Lodash前端開發利器

我的糖呢發表於2018-09-08
前端

隨著前端使用場景越來越複雜、需要處理資料越來越多、對運算元組的要求越來越高，搜尋全網找到了一個很強大的前端開發工具--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複製程式碼


相關文章