`

underscore.js 学习(一)

阅读更多

        工作中需要用到underscore.js,发现这是一个包括了很多基本功能函数的js库,里面有很多实用的函数。而且它没有扩展 javascript的原生对象。主要涉及对Collection、Object、Array、Function的操作。
       学习官方网址:http://underscorejs.org

       Collection Functions (Arrays or Objects) 【集合函数】

        1.each   _.each(list, iterator, [context]) Alias: forEach

        迭代list中的所有元素,按顺序用迭代器输出每个元素。如果传递了context参数,则把iterator绑定到context对象上。每次调用iterator都会传递三个参数:(element, index, list)。如果list是个JavaScript对象,iterator的参数是 (value, key, list)。存在原生的forEach方法,Underscore就委托给forEach。

//_.each
_.each([1, 2, 3], function(num){ console.log(num); });
//  1,2,3
_.each({one : 1, two : 2, three : 3}, function(num, key){ console.log(num); });
//  1,2,3
_.each({one : 1, two : 2, three : 3}, function(num, key){ console.log(key); });
//  one,two,three

        

        2.map  _.map(list, iterator, [context]) Alias: collect

用转换函数把list中的每个值映射到一个新的数组。如果list是个JavaScript对象,iterator的参数是(value, key, list),这里的用法和each一样。 mapeach 的区别就是map可以接受返回值。

//_.map
var r = _.map([1, 2, 3], function(num){ return num * 3; });
console.log(r); //   [3, 6, 9]
var r = _.map({one : 1, two : 2, three : 3}, function(num, key){ return num * 3; });
console.log(r); //   [3, 6, 9]
var r = _.map({one : 1, two : 2, three : 3}, function(num, key) {
    return key;
});
console.log(r); //["one", "two", "three"]

        

        3.reduce  _.reduce(list, iterator, memo, [context]) Aliases: inject, foldl

reduce方法把列表中元素归结为一个简单的数值,。Memo是reduce函数的初始值,reduce的每一步都需要由iterator返回。

//_.reduce
var sum = _.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0);
console.log(sum); //6
var sum = _.reduce([2, 4, 8], function(memo, num){ return memo + num; }, 11);
console.log(sum); //25

         这个函数有些浏览器提供了原生的,如下的underscore源代码可以很好的帮忙理解此函数。

// 代码的前面就声明了一个变量,检测是否支持原生reduce:
var nativeReduce = ArrayProto.reduce;

 

// **Reduce** builds up a single result from a list of values, aka `inject`,
  // or `foldl`. Delegates to **ECMAScript 5**'s native `reduce` if available.
  _.reduce = _.foldl = _.inject = function(obj, iterator, memo, context) {
    var initial = arguments.length > 2;
    if (obj == null) obj = [];
    if (nativeReduce && obj.reduce === nativeReduce) {
      if (context) iterator = _.bind(iterator, context);
      return initial ? obj.reduce(iterator, memo) : obj.reduce(iterator);
    }
    each(obj, function(value, index, list) {
      if (!initial) {
        memo = value;
        initial = true;
      } else {
        memo = iterator.call(context, memo, value, index, list);
      }
    });
    if (!initial) throw new TypeError(reduceError);
    return memo;
  };

         解释上面的例子1就是:试用迭代器把obj(1,2,3)里面的元素相加,由于设置了初始值(0),那就先加初始值,每次的相加的值都存储在memo里面。所以结果是0+1+2+3=6。

       

        4.reduceRight  _.reduceRight(list, iterator, memo, [context]) Alias: foldr

        reducRight是从右侧开始组合的元素的reduce函数,如果存在JavaScript 1.8版本的reduceRight,则用其代替。Foldr在javascript中不像其它有懒计算的语言那么有用(lazy evaluation:一种求值策略,只有当表达式的值真正需要时才对表达式进行计算)。

//_.reduceRight
var list = [[0, 1], [2, 3], [4, 5]];
var flat = _.reduceRight(list, function(a, b) { return a.concat(b); }, []);
console.log(flat); // [4, 5, 2, 3, 0, 1]
    
var list = [[0],[11,22],[33,44,55]];
var flat = _.reduceRight(list, function(a, b) { return a.concat(b); }, []);
console.log(flat); // [33, 44, 55, 11, 22, 0]

 

        5.find  _.find(list, iterator, [context]) Alias: detect

        遍历list,返回第一个通过iterator真值检测的元素值。如果找到匹配的元素立即返回,不会遍历整个list。

//_.find
var even = _.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
console.log(even); //2
var even = _.find([1, 2, 3, 4, 5, 6], function(num){ return num > 3; });
console.log(even); //4

 

        6.filter  _.filter(list, iterator, [context]) Alias: select

        遍历list,返回包含所有通过iterator真值检测的元素值。如果存在原生filter方法,则委托给filter,

和find不同的是,它返回所有符合条件的值,返回一个数组。

//_.filter
var r = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
console.log(r); //[2, 4, 6]
var r = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num > 3; });
console.log(r); //[4, 5, 6]

 

        7.where   _.where(list, properties)

        遍历list,返回properties中所有键值对都相等的对象数组。

//_.where
var listOfPlays = [{title: "Cymbeline", author: "Shakespeare", year: 1611},
        {title: "The Tempest", author: "Shakespeare", year: 1631},
        {title: "The Tempest2", author: "Shakespeare", year: 1661},
        {title: "The Tempest3", author: "Shakespeare3", year: 1611},
        {title: "The Tempest4", author: "Shakespeare", year: 1611}];
var r = _.where(listOfPlays, {author: "Shakespeare", year: 1611});
console.log(r);
//[{title: "Cymbeline", author: "Shakespeare", year: 1611},{title: "The Tempest4", author: "Shakespeare", year: 1611}]

 

        8.findWhere   _.findWhere(list, properties)

        遍历list,返回properties中所有键值对都相等的第一个对象。

//_.findWhere
var listOfPlays = [{title: "Cymbeline", author: "Shakespeare0", year: 1611},
        {title: "The Tempest", author: "Shakespeare", year: 1611},
        {title: "The Tempest2", author: "Shakespeare", year: 1661},
        {title: "The Tempest3", author: "Shakespeare3", year: 1611},
        {title: "The Tempest4", author: "Shakespeare", year: 1611}];
var r = _.findWhere(listOfPlays, {author: "Shakespeare", year: 1611});
console.log(r); //{title: "The Tempest", author: "Shakespeare", year: 1611} 

 

        9.reject   _.reject(list, iterator, [context])

        返回那么没有通过iterator真值检测的元素数组,filter的相反函数。

//_.reject
var r = _.reject([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
console.log(r); //[1, 3, 5]
var r = _.reject([1, 2, 3, 4, 5, 6], function(num){ return num > 3; });
console.log(r); //[1, 2, 3]

 

        10.every    _.every(list, [iterator], [context]) Alias: all

        如果list中的所有元素都通过iterator的真值检测就返回true。如果存在原生的every方法,则委托给every。

//_.every
var r = _.every([2, 22, 12, 4, 34, 68], function(num){ return num % 2 == 0; });
console.log(r); //true
var r = _.every([2, 22, 12, 3, 34, 68], function(num){ return num % 2 == 0; });
console.log(r); //false

 

        11.some  _.some(list, [iterator], [context])  Alias: any

        如果有任何一个元素通过通过 iterator 的真值检测就返回true。如果存在原生的some方法,则委托给some。

//_.some
var r = _.some([null, 0, 'yes', false]);
console.log(r); //true
var r = _.some([2, 1, 13, 6, 37, 68], function(num){ return num % 2 == 0; });
console.log(r); //true
var r = _.some([2, 1, 13, 7, 37, 68], function(num){ return num % 3 == 0; });
console.log(r); //false

 

        12.contains    _.contains(list, value)    Alias: include

        如果list包含指定的value则返回true,使用===检测是否相等。如果list 是数组,内部使用indexOf判断。

//_contains
var r = _.contains([1, 2, 3], 3);
console.log(r); //true
var r = _.contains({one:1,two:2},1);
console.log(r); //true
var r = _.contains({one:2,two:3},1);
console.log(r); //false

 

        13.invoke   _.invoke(list, methodName, [*arguments])

        在list的每个元素上执行methodName方法。如果有额外的参数,则在调用methodName方法的时候传给它。

//_invoke
var r = _.invoke([[5,1,7],[3,2,1]],'sort');//进行排序操作
console.log(r); //[[1, 5, 7], [1, 2, 3]]

 

        14.pluck   _.pluck(list, propertyName)

        提取对象中的一个属性,返回一个数组。

//_.pluck
var stooges = [{name : 'moe', age : 40}, {name : 'larry', age : 50}, {name : 'curly', age : 60}];
var r = _.pluck(stooges, 'name');
console.log(r);	//["moe", "larry", "curly"] 
var r = _.pluck(stooges, 'age');
console.log(r); //[40, 50, 60]

 

        15.max   _.max(list, [iterator], [context])

        返回list中的最大值,迭代器可选,如果有,则以迭代器作为排序依据。

//_.max
var stooges = [{name : 'moe', age : 40}, {name : 'larry', age : 50}, {name : 'curly', age : 60}];
var r = _.max(stooges, function(stooge){ return stooge.age; });
console.log(r); //{name: "curly", age: 60}

 

        16.min   _.min(list, [iterator], [context])

        返回list中的最小值,迭代器可选,如果有,则以迭代器作为排序依据。

//_.min
var numbers = [10, 5, 100, 2, 1000];
var r = _.min(numbers);
console.log(r); //2
var stooges = [{name : 'moe', age : 40}, {name : 'larry', age : 50}, {name : 'curly', age : 60}];
var r = _.min(stooges, function(stooge){ return stooge.age; });
console.log(r); //{name: "moe", age: 40}

 

        17.sortBy   _.sortBy(list, iterator, [context])

        返回一个通过升序排序后的一个数组(新的数组),如果有迭代器,以迭代器作为排序依据。

//_.sortBy
var r = _.sortBy([1, 2, 3, 4, 5, 6], function(num){ return Math.sin(num); }); 
console.log(r); //[5, 4, 6, 3, 1, 2]

 

        18.groupBy   _.groupBy(list, iterator, [context])

        通过迭代器返回的值分组,生成一个json对象。迭代器也可以是一个字符串,通过调用元素对应的属性分组。

//_.groupBy
var r = _.groupBy([1.3, 2.1, 2.4], function(num){ return Math.floor(num); }); 
console.log(r); //{1: [1.3], 2: [2.1, 2.4]}
var r = _.groupBy(['one', 'two', 'three'], 'length'); 
console.log(r); //{3: ["one", "two"], 5: ["three"]}

  

        19.countBy   _.countBy(list, iterator, [context])

        对list进行分组,返回一个json对象,对应的键值对是:分组名(在迭代器里面设置)和数量。

//_.countBy
var r = _.countBy([1, 2, 3, 4, 5], function(num) { return num % 2 == 0 ? 'even' : 'odd'; }); 
console.log(r); //{odd: 3, even: 2}

 

        20.shuffle   _.shuffle(list)

        返回一个打乱了的list数组副本。

//_.shuffle
var r = _.shuffle([1, 2, 3, 4, 5, 6]); 
console.log(r); //[5, 2, 6, 1, 4, 3]

  

        21.toArray   _.toArray(list)

        转换list为数组,对有参数对象的转换很有用。

//_.toArray
var r = (function(){
    return _.toArray(arguments).slice(1); 
})(1, 2, 3, 4); 
console.log(r); //[2, 3, 4]

        说明:slice() 方法可从已有的数组中返回选定的元素。arrayObject.slice(start,end) :返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

 

        22.size   _.size(list)

        返回list的长度

//_.size
var r = _.size({one : 1, two : 2, three : 3});
console.log(r); //3

 

分享到:
评论

相关推荐

    underscore.js源码

    underscore.js源码,适合初始化学习javascript,强烈推荐

    bcakbone.js中Underscore.js实现的视图与子视图

    而Underscore.js则是一个实用工具库,为JavaScript提供了一套丰富的函数式编程方法。 标题"bcakbone.js中Underscore.js实现的视图与子视图"指向了Backbone.js中如何利用Underscore.js来处理视图及其子视图的相关...

    前端项目-underscore.string.zip

    首先,underscore.string是underscore.js库的一个扩展,它为JavaScript的String对象添加了超过150个实用方法,涵盖了字符串处理的各个方面,如格式化、分割、查找替换、大小写转换等。这个库的设计理念是使字符串...

    javascript函数式编程 underscore.js

    Underscore.js是一个轻量级的JavaScript实用库,它为开发者提供了大量函数式编程工具,使得在JavaScript中实践函数式编程变得更加容易。 在JavaScript中,函数式编程的核心概念包括: 1. **纯函数**:一个纯函数在...

    微信小程序demo:使用第三方模块Underscore.js,Immutable.js,UUID.rar

    **Underscore.js** 是一个轻量级的JavaScript实用工具库,提供了大量的函数式编程辅助方法,如数组操作、对象处理、函数创建等。在微信小程序中,Underscore.js可以帮助开发者简化代码,提高效率。例如,它包含的`_....

    underscore-1.6.0.zip

    underscore.js是一款轻量级的JavaScript实用库,它为JavaScript开发提供了大量的实用函数,极大地增强了原生JavaScript对象的处理能力。在"underscore-1.6.0.zip"这个压缩包中,包含的就是underscore库的1.6.0版本。...

    微信小程序demo:使用第三方模块Underscore.js,Immutable.js,UUID.zip

    本示例中的“微信小程序demo”就展示了如何使用两个常用的JavaScript库——Underscore.js和Immutable.js,并且生成了一个UUID。下面将详细介绍这三个库及其在微信小程序中的应用。 **Underscore.js** Underscore.js...

    underscore.js-learning:underscore.js源码学习笔记

    本篇将围绕"underscore.js-learning"这一主题,深入学习underscore.js的源码,探讨其设计理念和实现机制。 首先,了解underscore.js的基本概念至关重要。它是John Resig在2009年创建的一个JavaScript实用工具库,...

    underscore.js

    underscore.js,作为一款轻量级的JavaScript库,它提供了一整套实用的功能,旨在简化和优化JavaScript开发中的常见任务。在本文中,我们将深入探讨underscore.js的核心特性、设计理念以及如何在实际项目中有效地利用...

    analyze_Underscore.js:解析underscore.js源码-源码解析

    《深入剖析Underscore.js:源码解析与应用实践》 Underscore.js是一款轻量级的JavaScript实用库,它提供了大量的实用...无论你是JavaScript新手还是资深开发者,分析Underscore.js源码都将是一次富有价值的学习体验。

    underscore-1.4.3.zip

    Underscore.js,一个轻量级的JavaScript实用库,以其强大的工具集和对JavaScript原生功能的补充,深受开发者喜爱。在本篇文章中,我们将深入探讨Underscore 1.4.3版本中的关键特性、设计理念以及如何在实际项目中...

    underscore-analysis, underscore-1.8.3.js 源码解读 & 系列文章(完 ).zip

    《underscore-1.8.3.js 源码...它不仅提供了一次深入学习underscore.js的机会,也是一次提高JavaScript编程能力的宝贵旅程。对于那些希望深入JavaScript世界,提升自身技术水平的开发者来说,这无疑是一份珍贵的礼物。

    underscore-analysis:underscore.js原始学习-js

    在JavaScript的世界里,underscore.js(下文简称_)是一个广泛使用的轻量级工具库,它为开发者提供了许多实用的函数,帮助我们处理日常编程中的常见任务。这个开源项目,以其简洁、高效的代码,成为了JavaScript...

    underscore.js:underscore.js原始解析-源码解析

    underscore.js,作为一个轻量级的JavaScript库,以其强大的功能性、高效性和灵活性,被广泛应用于前端开发中。它提供了大量的实用函数,帮助开发者处理数组、对象、函数等数据类型,极大地提高了代码的可读性和可...

    underscore源码学习计划

    总结,Underscore.js作为一款优秀的JavaScript实用库,它的源码学习能够提升我们的编程技巧,加深对函数式编程的理解,同时也能帮助我们在项目中更好地利用这些工具,提高代码质量。通过深入学习和实践,你将能够...

    underscore-example:Underscore.js 演示

    在JavaScript的世界里,Underscore.js是一款不可或缺的工具库,它为开发者提供了大量实用的函数,简化了日常编程任务。本文将通过"underscore-example"项目,深入探讨Underscore.js的核心功能和使用方法,帮助你更好...

    backbound. underscore

    《深入解析 underscore.js:一个强大的JavaScript工具库》 在JavaScript的世界里,underscore.js 是一个备受推崇的工具库,它提供了大量的实用函数,帮助开发者更高效地处理数组、对象、函数等核心JavaScript数据...

    underscore-source-analysis:Underscore.js原始学习

    通过对Underscore.js源码的深入学习,开发者不仅可以掌握JavaScript的高级用法,还能了解到函数式编程的设计模式和优化技巧,为自己的编程生涯添加一笔宝贵的经验。同时,了解并参与到开源项目中,也是提升专业素养...

    underscore_note:underscore.js原始代码阅读学习笔记

    其中,underscore.js(简称_)是一个轻量级的JavaScript实用库,提供了许多实用函数,使得开发者能够更方便地处理数组、对象、函数等。本文将基于对underscore.js原始代码的阅读,分享一些关键知识点,帮助你理解其...

    Underscore.js 1.3.3 中文注释翻译说明

    Underscore.js 是一个JavaScript实用库,它提供了丰富的函数式编程工具,但并不扩展JavaScript的内置对象。这个库的设计目的是为了帮助开发者更方便地处理数据和执行各种操作,而不会与现有的JavaScript环境发生冲突...

Global site tag (gtag.js) - Google Analytics