随着前端使用场景越来越复杂、需要处理数据越来越多、对操作数组的要求越来越高,搜寻全网找到了一个很强大的前端开发工具--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
复制代码
注意:关于在浏览器中用到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复制代码