高性能的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)

   做用：建立一個新數組幷包含原數組中全部的非假值元素。例如 false、null、 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'