zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    用python2和python3伪装浏览器爬取网页
    详解python2 和 python3的区别[附实例]
    两种判断(抓取)网页编码的方法【python版】
    python用两种方法实现url短连接
    2013年1月编程语言排行榜榜单: ObjectiveC继续增长
    年初给力!教你自己动手做手机APP应用!!
    [原创]用python求第1000个质数的值
    linux下如何安装配置redis及主从配置
    第四次博客作业结对项目
    2sat的一些总结
  • 原文地址:https://www.cnblogs.com/fengxuefei/p/6250577.html
Copyright © 2011-2022 走看看