Lodash前端开发利器

随着前端使用场景愈来愈复杂、须要处理数据愈来愈多、对操做数组的要求愈来愈高，搜寻全网找到了一个很强大的前端开发工具--Lodash，lodash不只方法多，性能也快是不少开发人员使用的利器。css

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呢？git

1.安装

1.1直接引用：

下载地址：Core build (~4kB gzipped)   Full build (~24kB gzipped)  CDN copiesgithub

<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方法。
npm

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长度的方法(若数组没法分割成所有等长，最后剩余的将组成一个块)。bash

_.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 都是被认为是“假值”。dom

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

2.3 _.concat(array, [values])---数组拼接

concat 链接的 _.concat()就是把数组和另外其余数组或值链接在一块儿(不改变原有数组)。ide

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复制代码