zoukankan      html  css  js  c++  java
  • 高性能的JavaScript库---Lodash

          上周在仿做Nodejs社区的时候,遇到了lodash这个javascript库,很惭愧,那也是我第一次听说lodash。人嘛,对于新鲜的事物总是会或多或少感到些好奇的,于是就毫不犹豫地去lodash官网逛了逛......咦...这货我怎么感觉在哪儿见过?......额,尼玛这不就是underscore吗?难道是升级版?于是接着各种百度,google......先在这里简单总结一下吧!

          lodash中文网上的第一句话是这么说的:

        这是一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库。

          字体好大,先不管了。

         说到模块化,其实这也是lodash的一大亮点,也就是说开发者可以按需加载,而不是引用整个库。每一个模块都暴露在了npm中,可以单独引入进来:

       npm install lodash.map

    var map = require('lodash.map');
      lodash和underscore都是现在非常流行的两个javascript库,提供了一套函数式编程的实用功能。而lodash本身最初也是underscore的一个fork,因为和其他(Underscore.js的)贡献者意见相左。lodash主要使用了延迟计算,所以也使得lodash的性能远远超过了Underscore。在lodash中使用延迟计算,也就意味着当我们使用链式方法时,在直接或间接调用value()之前是不会执行的。下面先简单介绍一些我用到过的或者印象比较深刻的方法吧,更多方法请自行查看lodash官方文档

      演示:

       1) _.map(collection, [iteratee=_.identity], [thisArg])

       作用:创建一个经过 iteratee 处理的集合中每一个元素的结果数组. iteratee 会传入3个参数:(value, index|key, collection). 

       别名(Aliases):_.collect

       参数1): 需要遍历的集合,可以是数组,对象或者字符串.

       参数2): 迭代器,可以是函数,对象或者字符串.

       参数3): 迭代器中this所绑定的对象.

       返回值(Array): 映射后的新数组.

       示例:

     1 function timesThree(n) {
     2   return n * 3;
     3 }
     4 
     5 _.map([1, 2], timesThree);
     6 // => [3, 6]
     7 
     8 _.map({ 'a': 1, 'b': 2 }, timesThree);
     9 // => [3, 6] (iteration order is not guaranteed)
    10 
    11 var users = [
    12   { 'user': 'barney' },
    13   { 'user': 'fred' }
    14 ];
    15 
    16 // using the `_.property` callback shorthand
    17 _.map(users, 'user');
    18 // => ['barney', 'fred']

     2) _.chunk(array, [size=1])

       作用:将 array 拆分成多个 size 长度的块,把这些块组成一个新数组。 如果 array 无法被分割成全部等长的块,那么最后剩余的元素将组成一个块.

       参数1): 需要被处理的数组.

       参数2): 每个块的长度.

       返回值(Array): 返回一个包含拆分块数组的新数组(相当于一个二维数组).

       示例:

    1 _.chunk(['a', 'b', 'c', 'd'], 2);
    2 // => [['a', 'b'], ['c', 'd']]
    3 
    4 _.chunk(['a', 'b', 'c', 'd'], 3);
    5 // => [['a', 'b', 'c'], ['d']]

     3) _.compact(array)

       作用:创建一个新数组并包含原数组中所有的非假值元素。例如 falsenull、 0""undefined 和 NaN 都是“假值”.

       参数: 需要被过滤的数组.

       返回值(Array): 过滤假值后的数组.

       示例:

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

     4) _.difference(array, [values])

       作用:创建一个差异化后的数组,不包括使用 SameValueZero 方法提供的数组.

       参数1): 需要处理的数组.

       参数2): 数组需要排除掉的值.

       返回值(Array): 过滤后的数组.

       示例:

    1 _.difference([1, 2, 3], [4, 2]);
    2 // => [1, 3]
    3 _.difference([1, '2', 3], [4, 2]);
    4 // => [1, "2", 3]

     5) _.drop(array, [n=1])

       作用:将 array 中的前 n 个元素去掉,然后返回剩余的部分.

       参数1): 被操作的数组.

       参数2): 去掉的元素个数.

       返回值(Array): 数组的剩余部分.

       示例:

     1 _.drop([1, 2, 3]);
     2 // => [2, 3] 默认是1开始的
     3 
     4 _.drop([1, 2, 3], 2);
     5 // => [3]
     6 
     7 _.drop([1, 2, 3], 5);
     8 // => []
     9 
    10 _.drop([1, 2, 3], 0);
    11 // => [1, 2, 3]

     6)_.dropRight(array, [n=1])

       作用:将 array 尾部的 n 个元素去除,并返回剩余的部分.

       参数1): 需要被处理的数组.

       参数2): 去掉的元素个数.

       返回值(Array): 数组的剩余部分.

       示例:

     1 _.dropRight([1, 2, 3]);
     2 // => [1, 2]
     3 
     4 _.dropRight([1, 2, 3], 2);
     5 // => [1]
     6 
     7 _.dropRight([1, 2, 3], 5);
     8 // => []
     9 
    10 _.dropRight([1, 2, 3], 0);
    11 // => [1, 2, 3]

     7)_.dropRightWhile(array, [predicate=_.identity], [thisArg])

       作用:从尾端查询(右数)数组 array ,第一个不满足predicate 条件的元素开始截取数组.

       参数1): 需要查询的数组.

       参数2): 迭代器,可以是函数,对象或者字符串.

       参数3): 对应 predicate 属性的值.

       返回值(Array): 截取元素后的数组.

       示例:

     1 _.dropRightWhile([1, 2, 3], function(n) {
     2   return n > 1;
     3 });
     4 // => [1]
     5 
     6 var users = [
     7   { 'user': 'barney',  'active': true },
     8   { 'user': 'fred',    'active': false },
     9   { 'user': 'pebbles', 'active': false }
    10 ];
    11 
    12 // using the `_.matches` callback shorthand
    13 _.pluck(_.dropRightWhile(users, { 'user': 'pebbles', 'active': false }), 'user');
    14 // => ['barney', 'fred']
    15 
    16 // using the `_.matchesProperty` callback shorthand
    17 _.pluck(_.dropRightWhile(users, 'active', false), 'user');
    18 // => ['barney']
    19 
    20 // using the `_.property` callback shorthand
    21 _.pluck(_.dropRightWhile(users, 'active'), 'user');
    22 // => ['barney', 'fred', 'pebbles']

     8)_.pluck(collection, path)

       作用:抽取集合中path所指定的路径的属性值.

       参数1): 需要抽取的数组.

       参数2): 需要抽取的属性所对应的路径.

       返回值(Array): 抽取的属性值所组成的数组.

       示例:

     1 var users = [
     2   { 'user': 'barney', 'age': 36 },
     3   { 'user': 'fred',   'age': 40 }
     4 ];
     5 
     6 _.pluck(users, 'user');
     7 // => ['barney', 'fred']
     8 
     9 var userIndex = _.indexBy(users, 'user');
    10 _.pluck(userIndex, 'age');
    11 // => [36, 40] (iteration order is not guaranteed)

     9)_.fill(array, value, [start=0], [end=array.length])

       作用:使用 value 值来填充(也就是替换) array,从start位置开始, 到end位置结束(但不包含end位置).

       参数1): 需要填充的数组.

       参数2): 填充 array 元素的值.

       参数3): 起始位置(包含).

       参数4): 结束位置(不含).

       返回值(Array): 填充后的数组.

       示例:

     1 var array = [1, 2, 3];
     2 
     3 _.fill(array, 'a');
     4 console.log(array);
     5 // => ['a', 'a', 'a']
     6 
     7 _.fill(Array(3), 2);
     8 // => [2, 2, 2]
     9 
    10 _.fill([4, 6, 8], '*', 1, 2);
    11 // => [4, '*', 8]

     10)_.findIndex(array, [predicate=_.identity], [thisArg])

       作用:该方法类似 _.find,区别是该方法返回的是符合 predicate条件的第一个元素的索引,而不是返回元素本身. 

       参数1): 需要搜索的数组.

       参数2): 迭代器,可以是函数,对象或者字符串.

       参数3): 对应 predicate 属性的值.

       返回值(Number): 符合查询条件的元素的索引值, 未找到则返回 -1.

       示例:

     1 var users = [
     2   { 'user': 'barney',  'active': false },
     3   { 'user': 'fred',    'active': false },
     4   { 'user': 'pebbles', 'active': true }
     5 ];
     6 
     7 _.findIndex(users, function(chr) {
     8   return chr.user == 'barney';
     9 });
    10 // => 0
    11 
    12 // using the `_.matches` callback shorthand
    13 _.findIndex(users, { 'user': 'fred', 'active': false });
    14 // => 1
    15 
    16 // using the `_.matchesProperty` callback shorthand
    17 _.findIndex(users, 'active', false);
    18 // => 0
    19 
    20 // using the `_.property` callback shorthand
    21 _.findIndex(users, 'active');
    22 // => 2

     11)_.find(collection, [predicate=_.identity], [thisArg])

       作用:遍历集合中的元素,返回最先经 predicate 检查为真值的元素. predicate 会传入3个元素:(value, index|key, collection).

       参数1): 要检索的集合,可以是数组,对象或者字符串.

       参数2): 迭代器,可以是函数,对象或者字符串.

       参数3): 迭代器中this所绑定的对象.

       返回值: 匹配元素,否则返回 undefined.

       示例:

     1 var users = [
     2   { 'user': 'barney',  'age': 36, 'active': true },
     3   { 'user': 'fred',    'age': 40, 'active': false },
     4   { 'user': 'pebbles', 'age': 1,  'active': true }
     5 ];
     6 
     7 _.find(users, function(o) { return o.age < 40; });
     8 // =>  'barney'
     9 
    10 // 使用了 `_.matches` 的回调结果
    11 _.find(users, { 'age': 1, 'active': true });
    12 // =>  'pebbles'
    13 
    14 // 使用了 `_.matchesProperty` 的回调结果
    15 _.find(users, ['active', false]);
    16 // =>  'fred'
    17 
    18 // 使用了 `_.property` 的回调结果
    19 _.find(users, 'active');
    20 // =>  'barney'

     12)_.forEach(collection, [iteratee=_.identity], [thisArg])

       作用:调用 iteratee 遍历集合中的元素, iteratee 会传入3个参数:(value, index|key, collection)。 如果显式的返回 false ,iteratee 会提前退出.

       参数1): 需要遍历的集合,可以是数组,对象或者字符串.

       参数2): 迭代器,只能是函数.

       参数3): 迭代器中this所绑定的对象.

       返回值: 遍历后的集合.

       示例:

    1 _([1, 2]).forEach(function(value) {
    2   console.log(value);
    3 });
    4 // => 输出 `1` 和 `2`
    5 
    6 _.forEach({ 'a': 1, 'b': 2 }, function(value, key) {
    7   console.log(key);
    8 });
    9 // => 输出 'a' 和 'b' (不保证遍历的顺序)

     13)_.reduce(collection, [iteratee=_.identity], [accumulator], [thisArg])

       作用:通过 iteratee 遍历集合中的每个元素. 每次返回的值会作为下一次 iteratee 使用。如果没有提供accumulator,则集合中的第一个元素作为 accumulator. iteratee 会传入4个参数:(accumulator, value, index|key, collection).

       参数1): 需要遍历的集合,可以是数组,对象或者字符串.

       参数2): 迭代器,只能是函数.

       参数3): 累加器的初始化值.

       参数4): 迭代器中this所绑定的对象.

       返回值: 累加后的值.

       示例:

     1 _.reduce([1, 2], function(total, n) {
     2   return total + n;
     3 });
     4 // => 3
     5 
     6 _.reduce({ 'a': 1, 'b': 2 }, function(result, n, key) {
     7   result[key] = n * 3;
     8   return result;
     9 }, {});
    10 // => { 'a': 3, 'b': 6 } (iteration order is not guaranteed)

     14)_.some(collection, [predicate=_.identity], [thisArg])

       作用:通过 predicate 检查集合中的元素是否存在任意真值的元素,只要 predicate 返回一次真值,遍历就停止,并返回 true. predicate 会传入3个参数:(value, index|key, collection).

       参数1): 需要遍历的集合,可以是数组,对象或者字符串.

       参数2): 迭代器,可以是函数,对象或字符串.

       参数3): 迭代器中this所绑定的对象.

       返回值如果任意元素经 predicate 检查都为真值,则返回true,否则返回 false.

       示例:

     1 _.some([null, 0, 'yes', false], Boolean);
     2 // => true
     3 
     4 var users = [
     5   { 'user': 'barney', 'active': true },
     6   { 'user': 'fred',   'active': false }
     7 ];
     8 
     9 // using the `_.matches` callback shorthand
    10 _.some(users, { 'user': 'barney', 'active': false });
    11 // => false
    12 
    13 // using the `_.matchesProperty` callback shorthand
    14 _.some(users, 'active', false);
    15 // => true
    16 
    17 // using the `_.property` callback shorthand
    18 _.some(users, 'active');
    19 // => true

     15)_.chain(value)

       作用:创建一个包含 value  lodash 对象以开启内置的方法链.方法链对返回数组、集合或函数的方法产生作用,并且方法可以被链式调用.

       参数: 需要被包裹成lodash对象的值.

       返回值: 新的lodash对象的实例.

       示例:

     1 var users = [
     2   { 'user': 'barney',  'age': 36 },
     3   { 'user': 'fred',    'age': 40 },
     4   { 'user': 'pebbles', 'age': 1 }
     5 ];
     6 
     7 var youngest = _.chain(users)
     8   .sortBy('age')
     9   .map(function(chr) {
    10     return chr.user + ' is ' + chr.age;
    11   })
    12   .first()
    13   .value();
    14 // => 'pebbles is 1'

     

  • 相关阅读:
    android数据恢复
    UVA 690 Pipeline Scheduling
    2017 国庆湖南 Day4
    2017 国庆湖南 Day5
    2017 国庆湖南 Day6
    2017国庆 清北学堂 北京综合强化班 Day1
    2017 国庆湖南Day2
    bzoj 2962 序列操作
    UVA 818 Cutting Chains
    UVA 211 The Domino Effect
  • 原文地址:https://www.cnblogs.com/tangshiwei/p/5489738.html
Copyright © 2011-2022 走看看