Lodash前端開發利器

隨着前端使用場景愈來愈複雜、須要處理數據愈來愈多、對操做數組的要求愈來愈高，搜尋全網找到了一個很強大的前端開發工具--Lodash，lodash不只方法多，性能也快是不少開發人員使用的利器。

Why Lodash?

Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc.Lodash’s modular methods are great for:

• Iterating arrays, objects, & strings
• Manipulating & testing values
• Creating composite functions

根據官網介紹lodash是一個下降arrays、numbers、objects、strings等使用難度的一個開發工具。那麼咱們如何使用lodash呢？

1.安裝

1.1直接引用：

下載地址：Core build (~4kB gzipped)   Full build (~24kB gzipped)  CDN copies

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
複製代碼

注意：關於在瀏覽器中用到lodash文件的引用問題，只有在引入lodash.min.js後，lodash纔會正常使用;而其餘版本的，皆會報「 Uncaught TypeError: _.difference is not a function」的錯誤，緣由就在於裏面沒有difference方法。

1.2經過npm使用：

1. npm i --save lodash
2. const _ = require('lodash');複製代碼

注意：
Install n_ for Lodash use in the Node.js < 6 REPL.

2.Lodash的Array方法：

lodash的方法不少，在此我只貼了一些經常使用方法具體其餘方法參考官方文檔，若是有錯誤歡迎指正。

2.1 _.chunk(array, [size=1])---數組分割

chunk  塊  _.chunk()就是把一個數組分割成某一個size長度的方法(若數組沒法分割成所有等長，最後剩餘的將組成一個塊)。

_.chunk(['a', 'b', 'c', 'd'], 2);// => [['a', 'b'], ['c', 'd']]
 _.chunk(['a', 'b', 'c', 'd'], 3);// => [['a', 'b', 'c'], ['d']]複製代碼

2.2 _.compact(array)---數組過濾假值

compact  緊湊   _.compact()就是把數組中的假值所有過濾掉false, null, 0, "", undefined, 和 NaN 都是被認爲是「假值」。

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

2.3 _.concat(array, [values])---數組拼接

concat 鏈接的 _.concat()就是把數組和另外其餘數組或值鏈接在一塊兒(不改變原有數組)。

var array = [1];
var other = _.concat(array, 2, [3], [[4]]); 
console.log(other);// => [1, 2, 3, [4]] 
console.log(array);// => [1]複製代碼

2.4 _.difference(array, [values])---取數組差值

difference 不一樣的 _.difference() 返回一個不在其餘給定數組([values])值的新數組。

array是須要檢查的數組，[values]是須要排除的值

_.difference([3, 2, 1], [4, 2]);// => [3, 1]複製代碼

2.5 _.union([arrays])---去重排序

union 聯合 _.union([arrays])建立順序排列的惟一值組成的數組。全部值通過 SameValueZero 等值比較。

_.union([2, 1], [4, 2], [1, 2]);
// => [2, 1, 4]複製代碼

2.6 _.unionBy([arrays], [iteratee=_.identity])--去重按照某個規則排序

這個方法相似 _.union， 除了它接受一個 comparator 調用比較arrays數組的每個元素。 comparator 調用時會傳入2個參數：(arrVal, othVal)。

_.unionBy([2.1], [1.2, 2.3], Math.floor);
// => [2.1, 1.2] 
// The `_.property` iteratee shorthand.
_.unionBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x');
// => [{ 'x': 1 }, { 'x': 2 }]複製代碼

2.7 _.unionWith([arrays], [comparator])--去重按照某個規則排序

這個方法相似 _.union， 除了它接受一個 comparator 調用比較arrays數組的每個元素。 comparator 調用時會傳入2個參數：(arrVal, othVal)。

var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }];
 _.unionWith(objects, others, _.isEqual);
// => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 1 }]複製代碼

2.8 _.uniq(array)--去重

建立一個去重後的array數組副本。使用了 SameValueZero 作等值比較。只有第一次出現的元素纔會被保留。

_.uniq([2, 1, 2]);// => [2, 1]複製代碼

2.8 _.without(array, [values])--去除某個數值

建立一個剔除全部給定值的新數組，剔除值的時候，使用SameValueZero作相等比較。 

_.without([2, 1, 2, 3], 1, 2);// => [3]複製代碼

2.9 _.pull(array, [values])--去除某個數值

移除數組array中全部和給定值相等的元素和 _.without 方法不一樣，這個方法會改變數組。

var array = [1, 2, 3, 1, 2, 3];
 _.pull(array, 2, 3);
console.log(array);// => [1, 1]複製代碼

2.10 _.nth(array, [n=0])--獲取第n個元素

獲取array數組的第n個元素。若是n爲負數，則返回從數組結尾開始的第n個元素。

var array = ['a', 'b', 'c', 'd'];
 _.nth(array, 1);// => 'b'
 _.nth(array, -2);// => 'c';複製代碼

2.11 _.last(array)--獲取最後一個元素

獲取array中的最後一個元素。

_.last([1, 2, 3]);// => 3複製代碼

2.12 _.indexOf(array, value, [fromIndex=0])--從某一位置獲取某個值所在的位置

使用 SameValueZero 等值比較，返回首次 value 在數組array中被找到的 索引值， 若是 fromIndex 爲負值，將從數組array尾端索引進行匹配。

_.indexOf([1, 2, 1, 2], 2);
// => 1
// Search from the `fromIndex`.
_.indexOf([1, 2, 1, 2], 2, 2);
// => 3複製代碼

2.13 _.lastIndexOf(array, value, [fromIndex=array.length-1])--從右到左從某一位置獲取某個值所在的位置

_.lastIndexOf([1, 2, 1, 2], 2);// => 3 
// Search from the `fromIndex`.
_.lastIndexOf([1, 2, 1, 2], 2, 2);// => 1複製代碼

2.14 _.remove(array, [predicate=_.identity])--移除不符合某個規則的數值返回新數組

Tips：這個方法會改變數組 array

var array = [1, 2, 3, 4];
var evens = _.remove(array, function(n) {  
    return n % 2 == 0;
}); 
console.log(array);// => [1, 3] 
console.log(evens);// => [2, 4]複製代碼

2.15 _.pull(array, [values])--移除和給定數值相等的元素

Tips：這個方法會改變數組 array

var array = [1, 2, 3, 1, 2, 3];
 _.pull(array, 2, 3);
console.log(array);// => [1, 1]複製代碼

2.15 _.pullAll(array, values)--移除和給定數組相等的元素

Tips：這個方法會改變數組 array

var array = [1, 2, 3, 1, 2, 3]; 
_.pullAll(array, [2, 3]);
console.log(array);// => [1, 1]複製代碼

3.Lodash的Math方法：

3.1 _.add(augend, addend)--兩個數值相加

_.add(6, 4);// => 10複製代碼

3.2 _.ceil(number, [precision=0])--向上取精度即保留幾位小數

_.ceil(4.006);// => 5 
_.ceil(6.004, 2);// => 6.01
_.ceil(6040, -2);// => 6100複製代碼

3.3 _.divide(dividend, divisor)--兩個數值相除

_.divide(6, 4);// => 1.5
_.divide(10,3);// => 3.3333333333333335
複製代碼

3.4 _.floor(number, [precision=0])--向下取精度

_.floor(4.006);// => 4 
_.floor(0.046, 2);// => 0.04 
_.floor(4060, -2);// => 4000複製代碼

3.5 _.max(array)--求數組中的最大值

Tips：若是 array 是 空的或者假值將會返回 undefined。

_.max([4, 2, 8, 6]);// => 8 
_.max([]);// => undefined複製代碼

3.6 _.maxBy(array, [iteratee=_.identity])--返回數組中某個對象的某個值的最大值

var objects = [{ 'n': 1 }, { 'n': 2 }]; 
_.maxBy(objects, function(o) { 
    return o.n; 
});// => { 'n': 2 } 
// The `_.property` iteratee shorthand.
_.maxBy(objects, 'n');// => { 'n': 2 }複製代碼

3.7 _.mean(array)--求數組的平均值

_.mean([4, 2, 8, 6]);// => 5複製代碼

3.8 _.meanBy(array, [iteratee=_.identity])--返回某個值的最大值

var objects = [{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }]; 
_.meanBy(objects, function(o) { return o.n; });// => 5 
// The `_.property` iteratee shorthand.
_.meanBy(objects, 'n');// => 5複製代碼

3.9 _.min(array)--計算最小值

_.min([4, 2, 8, 6]);// => 2 
_.min([]);// => undefined複製代碼

3.10 _.minBy(array, [iteratee=_.identity])--調用 array中的每個元素，來生成其值排序的標準

var objects = [{ 'n': 1 }, { 'n': 2 }]; 
_.minBy(objects, function(o) { 
return o.n; 
});// => { 'n': 1 } 
// The `_.property` iteratee shorthand.
_.minBy(objects, 'n');// => { 'n': 1 }複製代碼

3.11 _.multiply(multiplier, multiplicand)--兩數相乘

_.multiply(6, 4);// => 24複製代碼

3.12 _.round(number, [precision=0])--根據精度四捨五入

_.round(4.006);// => 4 
_.round(4.006, 2);// => 4.01 
_.round(4060, -2);// => 4100複製代碼

3.13 _.subtract(minuend, subtrahend)--兩數相減

_.subtract(6, 4);// => 2複製代碼

3.14 _.sum(array)--計算數組的總和

_.sum([4, 2, 8, 6]);// => 20
_.sum([4, 2, 8, 6,''])// => '20'
複製代碼

3.13 _.sumBy(array, [iteratee=_.identity])--調用 array中的每個元素，來生成其值排序的標準

var objects = [{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }]; 
_.sumBy(objects, function(o) { 
    return o.n; 
});// => 20 
// The `_.property` iteratee shorthand.
_.sumBy(objects, 'n');// => 20複製代碼

4.Lodash的Number方法：

4.1 _.clamp(number, [lower], upper)--返回限制在 lower 和 upper 之間的值。

_.clamp(-10, -5, 5);// => -5 
_.clamp(10, -5, 5);// => 5複製代碼

4.2 _.inRange(number, [start=0], end)--檢查數值在不在兩個值之間

檢查 n 是否在 start 與 end 之間，但不包括 end。 若是 end 沒有指定，那麼 start 設置爲0。 若是 start 大於 end，那麼參數會交換以便支持負範圍。

_.inRange(3, 2, 4);// => true 
_.inRange(4, 8);// => true 
_.inRange(4, 2);// => false 
_.inRange(2, 2);// => false 
_.inRange(1.2, 2);// => true 
_.inRange(5.2, 4);// => false 
_.inRange(-3, -2, -6);// => true複製代碼

4.3 _.random([lower=0], [upper=1], [floating])--返回隨機數。

產生一個包括 lower 與 upper 之間的數。 若是隻提供一個參數返回一個0到提供數之間的數。 若是 floating 設爲 true，或者 lower 或 upper 是浮點數，結果返回浮點數。

注意: JavaScript 遵循 IEEE-754 標準處理沒法預料的浮點數結果。

_.random(0, 5);
// => an integer between 0 and 5 
_.random(5);
// => also an integer between 0 and 5 
_.random(5, true);
// => a floating-point number between 0 and 5 
_.random(1.2, 5.2);
// => a floating-point number between 1.2 and 5.2複製代碼