16-underscore库(上)

时间:2023-03-09 06:31:04
16-underscore库(上)

第16课 underscore库

一、介绍

Underscore 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象。他弥补了 jQuery 没有实现的功能,同时又是 Backbone 必不可少的部分。

二、集合方法介绍

集合函数能在数组,对象,和类数组对象,比如arguments, NodeList和类似的数据类型上正常工作。 但是它通过duck-typing工作,所以要避免传递一个不固定length属性的对象(注:对象或数组的长度(length)属性要固定的)。

1、each

结构

_.each(list, iteratee, [context])

说明

遍历list中的所有元素,按顺序用遍历输出每个元素。如果传递了context参数,则把iteratee绑定到context对象上。每次调用iteratee都会传递三个参数:(element, index, list)。如果list是个JavaScript对象,iteratee的参数是 (value, key, list))。返回list以方便链式调用。

举例

_.each([1, 2, 3], alert);
=> alerts each number in turn...
_.each({one: 1, two: 2, three: 3}, alert);
=> alerts each number value in turn...

2、map

结构

_.map(list, iteratee, [context])

说明

通过变换函数(iteratee迭代器)把list中的每个值映射到一个新的数组中(注:产生一个新的数组)。如果存在原生的map方法,就用原生map方法来代替。如果list是个JavaScript对象,iteratee的参数是(value, key, list)。

举例

_.map([1, 2, 3], function(num){ return num * 3; });
=> [3, 6, 9]
_.map({one: 1, two: 2, three: 3}, function(num, key){ return num * 3; });
=> [3, 6, 9]

3、reduce

结构

_.reduce(list, iteratee, [memo], [context])

说明

reduce方法把list中元素归结为一个单独的数值。Memo是reduce函数的初始值,reduce的每一步都需要由iteratee返回。这个迭代传递4个参数:memo, value 和 迭代的index(或者 key)和最后一个引用的整个 list。

如果没有memo传递给reduce的初始调用,iteratee不会被列表中的第一个元素调用。第一个元素将取代 传递给列表中下一个元素调用iteratee的memo参数

举例

var sum = _.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0);
=> 6

4、find

结构

_.find(list, predicate, [context])

说明

在list中逐项查找,返回第一个通过predicate迭代函数真值检测的元素值,如果没有值传递给测试迭代器将返回undefined。 如果找到匹配的元素,函数将立即返回,不会遍历整个list。

举例

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

5、filter

结构

_.filter(list, predicate, [context])

说明

遍历list中的每个值,返回包含所有通过predicate真值检测的元素值。

举例

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

6、reject

结构

_.reject(list, predicate, [context])

说明

返回list中没有通过predicate真值检测的元素集合,与filter相反。

举例

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

7、invoke

结构

_.invoke(list, methodName, *arguments)

说明

在list的每个元素上执行methodName方法。 任何传递给invoke的额外参数,invoke都会在调用methodName方法的时候传递给它。

举例

_.invoke([[5, 1, 7], [3, 2, 1]], 'sort');
=> [[1, 5, 7], [1, 2, 3]]

8、max

结构

_.max(list, [iteratee], [context])

说明

返回list中的最大值。如果传递iteratee参数,iteratee将作为list中每个值的排序依据。如果list为空,将返回-Infinity

举例

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

9、min

结构

_.min(list, [iteratee], [context])

说明

返回list中的最小值。如果传递iteratee参数,iteratee将作为list中每个值的排序依据。如果list为空,将返回-Infinity

举例

var numbers = [10, 5, 100, 2, 1000];
_.min(numbers);
=> 2

10、sortBy

结构

_.sortBy(list, iteratee, [context])

说明

返回一个排序后的list拷贝副本。如果传递iteratee参数,iteratee将作为list中每个值的排序依据。迭代器也可以是字符串的属性的名称进行排序的(比如 length)。

举例

_.sortBy([1, 2, 3, 4, 5, 6], function(num){ return Math.sin(num); });
=> [5, 4, 6, 3, 1, 2]

三、数组方法介绍

1、first

结构

_.first(array, [n])

说明

返回array(数组)的第一个元素。传递 n参数将返回数组中从第一个元素开始的n个元素(注:返回数组中前 n 个元素.)。

举例

_.first([5, 4, 3, 2, 1]);
=> 5

2、initial

结构

_.initial(array, [n])

说明

返回数组中除了最后一个元素外的其他全部元素。 在arguments对象上特别有用。传递 n参数将从结果中排除从最后一个开始的n个元素(注:排除数组后面的 n 个元素)。

举例

_.initial([5, 4, 3, 2, 1]);
=> [5, 4, 3, 2]

3、last

结构

_.last(array, [n])

说明

返回array(数组)的最后一个元素。传递 n参数将返回数组中从最后一个元素开始的n个元素(注:返回数组里的后面的n个元素)。

举例

_.last([5, 4, 3, 2, 1]);
=> 1

4、rest

结构

_.rest(array, [index])

说明

返回数组中除了第一个元素外的其他全部元素。传递 index 参数将返回从index开始的剩余所有元素 。

举例

_.rest([5, 4, 3, 2, 1]);
=> [4, 3, 2, 1]

5、compact

结构

_.compact(array)

说明

返回一个除去所有false值的 array副本。 在javascript中, false, null, 0, "", undefined 和 NaN 都是false值

举例

_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]

6、without

结构

_.without(array, *values)

说明

返回一个删除所有values值后的 array副本。(注:使用===表达式做相等测试。)

举例

_.without([1, 2, 1, 0, 3, 1, 4], 0, 1);
=> [2, 3, 4]

7、union

结构

_.union(*arrays)

说明

返回传入的 arrays(数组)并集:按顺序返回,返回数组的元素是唯一的,可以传入一个或多个 arrays(数组)。

举例

_.union([1, 2, 3], [101, 2, 1, 10], [2, 1]);
=> [1, 2, 3, 101, 10]

8、difference

结构

_.difference(array, *others)

说明

类似于without,但返回的值来自array参数数组,并且不存在于other 数组.

举例

_.difference([1, 2, 3, 4, 5], [5, 2, 10]);
=> [1, 3, 4]

9、zip

结构

_.zip(*arrays)

说明

将 每个arrays中相应位置的值合并在一起。在合并分开保存的数据时很有用. 如果你用来处理矩阵嵌套数组时, _.zip.apply 可以做类似的效果。

举例

_.zip(['moe', 'larry', 'curly'], [30, 40, 50], [true, false, false]);
=> [["moe", 30, true], ["larry", 40, false], ["curly", 50, false]] _.zip.apply(_, arrayOfRowsOfData);
=> arrayOfColumnsOfData

10、range

结构

_.range([start], stop, [step])

说明

一个用来创建整数灵活编号的列表的函数,便于each 和 map循环。如果省略start则默认为 0;step 默认为 1.返回一个从start 到stop的整数的列表,用step来增加 (或减少)独占。值得注意的是,如果stop值在start前面(也就是stop值小于start值),那么值域会被认为是零长度,而不是负增长。-如果你要一个负数的值域 ,请使用负数step.

举例

_.range(10);
=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
_.range(1, 11);
=> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
_.range(0, 30, 5);
=> [0, 5, 10, 15, 20, 25]
_.range(0, -10, -1);
=> [0, -1, -2, -3, -4, -5, -6, -7, -8, -9]
_.range(0);
=> []

参考网站

http://underscorejs.org/

http://www.bootcss.com/p/underscore