贼好用的前端工具Lodash ---数组
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于：
- 遍历 array、object 和 string
- 对值进行操作和检测
- 创建符合功能的函数
安装
npm i --save lodash
// 或
yarn add lodash
引入
import _ from 'lodash'
数组
_.chunk 拆分数组(一维转二维)
将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。 如果array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。
语法
_.chunk(array, [size=1])
参数
1. array (Array) : 需要处理的数组
2. [size=1] (number) : 每个数组区块的长度,size默认为1
返回
(Array) : 返回一个包含拆分区块的新数组（注：相当于一个二维数组）。
示例
const arr =['a', 'b', 'c', 'd']
console.log(_.chunk(arr)); // [['a'],['b'],['c'],['d']]
const arr =['a', 'b', 'c', 'd']
console.log(_.chunk(arr, 3)); // [['a', 'b', 'c'],['d']]
_.compact 过滤假值元素
创建一个新数组，包含原数组中所有的非假值元素。例如false, null,0, "", undefined, 和 NaN 都是被认为是“假值”。
语法
_.compact(array)
参数
array (Array): 待处理的数组
返回值
(Array): 返回过滤掉假值的新数组。
示例
const arr = ['a', false, true, 0, '', null, undefined, NaN, 'b']
console.log(_.compact(arr)); // ['a', true, 'b']
_.concat 连接数组
创建一个新数组，将array与任何数组 或 值连接在一起。
语法
_.concat(array, [values])
参数
array (Array): 被连接的数组。
[values] (...*): 连接的值。
返回值
(Array): 返回连接后的新数组。
示例
const arr =['a', 'b']
// _.concat
const arr2 = [2, 'hi', [3, [4]]]
console.log(_.concat(['l'],arr, arr2, 'w')); // ['l', 'a', 'b', 2, 'hi', [3, [4]], 'w]
_.difference 比较差异
创建一个具有唯一array值的数组，每个值不包含在其他给定的数组中。（注：即创建一个新数组，这个数组中的值，为第一个数字（array 参数）排除了给定数组中的值。）结果值的顺序是由第一个数组中的顺序确定。
语法
_.difference(array, [values])
参数
array (Array): 要检查的数组。
[values] (...Array): 排除的值。
返回值
(Array): 返回一个过滤值后的新数组。
示例
const arr = [1, 4, 3, 'a', 'b', 0]
const arr1 = ['a', 'b', 2, 1]
console.log(_.difference(arr, arr1, [4])); // [3, 0]
_.take 提取元素
创建一个数组切片，从array数组的起始元素开始提取n个元素。
_.takeRight(array, [n=1]): 创建一个数组切片，从
array数组的最后一个元素开始提取n个元素。
语法
_.take(array, [n=1])
参数
array (Array): 要检索的数组。
[n=1] (number): 要提取的元素个数。
返回
(Array): 返回 array 数组的切片（从起始元素开始n个元素）。
示例
_.take([1, 2, 3]);
// => [1]
_.take([1, 2, 3], 2);
// => [1, 2]
_.take([1, 2, 3], 5);
// => [1, 2, 3]
_.take([1, 2, 3], 0);
// => []
_.drop 去除元素
创建一个切片数组，去除array前面的n个元素。（n默认值为1。）
语法
_.drop(array, [n=1])
参数
array (Array): 要查询的数组。
[n=1] (number): 要去除的元素个数。
返回值
(Array): 返回array剩余切片。
示例
const arr = [1, 2, 3]
_.drop(arr);
// => [2, 3]
_.drop(arr, 2);
// => [3]
_.drop(arr, 5);
// => []
_.drop(arr, 0);
// => [1, 2, 3]
_.dropWhile
创建一个切片数组，去除array中从起点开始到 predicate 返回假值结束部分。predicate 会传入3个参数： (value, index, array)。
语法
_.dropWhile(array, [predicate=_.identity])
参数
array (Array): 要查询的数组。
[predicate=_.identity] (Function): 这个函数会在每一次迭代调用。
返回值
(Array): 返回array剩余切片。
示例
var users = [
{ 'user': 'barney', 'active': false },
{ 'user': 'fred', 'active': false },
{ 'user': 'pebbles', 'active': true }
];
_.dropWhile(users, function(o) { return !o.active; });
// => objects for ['pebbles']
// The `_.matches` iteratee shorthand.
_.dropWhile(users, { 'user': 'barney', 'active': false });
// => objects for ['fred', 'pebbles']
// The `_.matchesProperty` iteratee shorthand.
_.dropWhile(users, ['active', false]);
// => objects for ['pebbles']
// The `_.property` iteratee shorthand.
_.dropWhile(users, 'active');
// => objects for ['barney', 'fred', 'pebbles']
_.dropRight
创建一个切片数组，去除array尾部的n个元素。（n默认值为1。）
语法
_.dropRight(array, [n=1])
参数
array (Array): 要查询的数组。
[n=1] (number): 要去除的元素个数。
返回值
(Array): 返回array剩余切片。
示例
const arr = [1, 2, 3]
_.dropRight(arr);
// => [1, 2]
_.dropRight(arr, 2);
// => [1]
_.dropRight(arr, 5);
// => []
_.dropRight(arr, 0);
// => [1, 2, 3]
_.dropRightWhile
创建一个切片数组，去除array中从 predicate 返回假值开始到尾部的部分。predicate 会传入3个参数： (value, index, array)。
语法
_.dropRightWhile(array, [predicate=_.identity])
参数
array (Array): 要查询的数组。
[predicate=_.identity] (Function): 这个函数会在每一次迭代调用。
返回值
(Array): 返回array剩余切片。
示例
var users = [
{ 'user': 'barney', 'active': true },
{ 'user': 'fred', 'active': false },
{ 'user': 'pebbles', 'active': false }
];
_.dropRightWhile(users, function(o) { return !o.active; });
// => objects for ['barney']
// The `_.matches` iteratee shorthand.
_.dropRightWhile(users, { 'user': 'pebbles', 'active': false });
// => objects for ['barney', 'fred']
// The `_.matchesProperty` iteratee shorthand.
_.dropRightWhile(users, ['active', false]);
// => objects for ['barney']
// The `_.property` iteratee shorthand.
_.dropRightWhile(users, 'active');
// => objects for ['barney', 'fred', 'pebbles']
_.fill 填充
使用 value 值来填充（替换） array，从start位置开始, 到end位置结束（但不包含end位置）。
Note: 这个方法会改变 array（注：不是创建新数组）。
语法
_.fill(array, value, [start=0], [end=array.length])
参数
array (Array): 要填充改变的数组。
value (*): 填充给 array 的值。
[start=0] (number): 开始位置（默认0）。
[end=array.length] (number):结束位置（默认array.length）。
返回值
(Array): 返回 array。
示例
var arr = [1, 2, 3];
_.fill(arr, 'a');
console.log(arr);
// => ['a', 'a', 'a']
_.fill(arr(3), 2);
// => [2, 2, 2]
_.fill([4, 6, 8, 10], '*', 1, 3);
// => [4, '*', '*', 10]
_.findIndex 查询元素
该方法返回第一个通过 predicate 判断为真值的元素的索引值（index），而不是元素本身。
语法
_.findIndex(array, [predicate=_.identity], [fromIndex=0])
参数
array (Array): 要搜索的数组。
[predicate=_.identity] (Array|Function|Object|string): 这个函数会在每一次迭代调用。
[fromIndex=0] (number): The index to search from.
返回值
(number): 返回找到元素的 索引值（index），否则返回 -1。
示例
var users = [
{ 'user': 'barney', 'active': false },
{ 'user': 'fred', 'active': false },
{ 'user': 'pebbles', 'active': true }
];
_.findIndex(users, function(o) { return o.user == 'barney'; });
// => 0
// The `_.matches` iteratee shorthand.
_.findIndex(users, { 'user': 'fred', 'active': false });
// => 1
// The `_.matchesProperty` iteratee shorthand.
_.findIndex(users, ['active', false]);
// => 0
// The `_.property` iteratee shorthand.
_.findIndex(users, 'active');
// => 2
_.findLastIndex
这个方式类似_.findIndex， 区别是它是从右到左的迭代集合array中的元素。
语法
_.findLastIndex(array, [predicate=_.identity], [fromIndex=array.length-1])
参数
array (Array): 要搜索的数组。
[predicate=_.identity] (Array|Function|Object|string): 这个函数会在每一次迭代调用。
[fromIndex=array.length-1] (number): The index to search from.
返回值
(number): 返回找到元素的 索引值（index），否则返回 -1
示例
var users = [
{ 'user': 'barney', 'active': true },
{ 'user': 'fred', 'active': false },
{ 'user': 'pebbles', 'active': false }
];
_.findLastIndex(users, function(o) { return o.user == 'pebbles'; });
// => 2
// The `_.matches` iteratee shorthand.
_.findLastIndex(users, { 'user': 'barney', 'active': true });
// => 0
// The `_.matchesProperty` iteratee shorthand.
_.findLastIndex(users, ['active', false]);
// => 2
// The `_.property` iteratee shorthand.
_.findLastIndex(users, 'active');
// => 0
_.first _.head 首元素
获取数组 array 的第一个元素。
别名 _.first
语法
_.head(array)
参数
array (Array): 要查询的数组。
返回值
(*): 返回数组 array的第一个元素。
示例
_.head([1, 2, 3]);
// => 1
_.head([]);
// => undefined
_.last 尾元素
获取array中的最后一个元素。
语法
_.last(array)
参数
array (Array): 要检索的数组。
返回值
(*): 返回array中的最后一个元素
示例
_.last([1, 2, 3]);
// => 3
_.flatten
减少一级array嵌套深度。
语法
_.flatten(array)
参数
array (Array): 需要减少嵌套层级的数组。
返回值
(Array): 返回减少嵌套层级后的新数组。
示例
_.flatten([1, [2, [3, [4]], 5]]);
// => [1, 2, [3, [4]], 5]
_.flattenDeep 多维转一维
将array递归为一维数组。
语法
_.flattenDeep(array)
参数
array (Array): 需要处理的数组。
返回值
(Array): 返回一个的新一维数组。
示例
_.flattenDeep([1, [2, [3, [4]], 5]]);
// => [1, 2, 3, 4, 5]
_.flattenDepth 减少数组嵌套
根据 depth 递归减少 array 的嵌套层级
语法
_.flattenDepth(array, [depth=1])
参数
array (Array): 需要减少嵌套层级的数组。
[depth=1] (number):最多减少的嵌套层级数。
返回值
(Array): 返回减少嵌套层级后的新数组。
示例
var array = [1, [2, [3, [4]], 5]];
_.flattenDepth(array, 1);
// => [1, 2, [3, [4]], 5]
_.flattenDepth(array, 2);
// => [1, 2, 3, [4], 5]
示例
_.fromPairs([['fred', 30], ['barney', 40]]);
// => { 'fred': 30, 'barney': 40 }
_.indexOf (right -> left遍历)
返回首次 value 在数组array中被找到的 索引值， 如果 fromIndex 为负值，将从数组array尾端索引进行匹配。
语法
_.indexOf(array, value, [fromIndex=0])
参数
array (Array): 需要查找的数组。
value (*): 需要查找的值。
[fromIndex=0] (number): 开始查询的位置。
返回值
(number): 返回 值value在数组中的索引位置, 没有找到为返回-1。
示例
const arr = [1, 2, 1, 2]
_.indexOf(arr, 2);
// => 1
_.indexOf(arr, 2, 2);
// => 3
_.lastIndexOf (left -> right遍历)
这个方法类似_.indexOf ，区别是它是从右到左遍历array的元素。
语法
_.lastIndexOf(array, value, [fromIndex=array.length-1])
参数
array (Array): 要搜索的数组。
value (*): 要搜索的值。
[fromIndex=array.length-1] (number): 开始搜索的索引值。
返回值
(number): 返回匹配值的索引值，否则返回 -1。
_.initial 获取非尾元素
获取数组array中除了最后一个元素之外的所有元素（注：去除数组array中的最后一个元素）。
语法
_.initial(array)
参数
1. array *(Array)* : 要查询的数组。
返回值
(Array) : 返回截取后的数组array。
示例
_.initial([1, 2, 3]);
// => [1, 2]
_.tial 获取非尾=首元素
获取除了array数组第一个元素以外的全部元素。
语法
_.tail(array)
参数
array (Array) : 要检索的数组。
返回
(Array): 返回 array 数组的切片（除了array数组第一个元素以外的全部元素）。
示例
_.tail([1, 2, 3]);
// => [2, 3]
_.intersection
创建唯一值的数组，这个数组包含所有给定数组都包含的元素。(注：可以理解为给定数组的交集）
语法
_.intersection([arrays])
参数
[arrays] (...Array): 待检查的数组。
返回值
(Array): 返回一个包含所有传入数组交集元素的新数组。
示例
_.intersection([2, 1], [4, 2], [1, 2]);
// => [2]
示例
_.lastIndexOf([1, 2, 1, 2], 2);
// => 3
// Search from the `fromIndex`.
_.lastIndexOf([1, 2, 1, 2], 2, 2);
// => 1
_.nth 获取第n个元素
获取array数组的第n个元素。如果n为负数，则返回从数组结尾开始的第n个元素。
语法
_.nth(array, [n=0])
参数
array (Array): 要查询的数组。
[n=0] (number): 要返回元素的索引值。
返回值
(*): 获取array数组的第n个元素。
示例
var array = ['a', 'b', 'c', 'd'];
_.nth(array, 1);
// => 'b'
_.nth(array, -2);
// => 'c';
_.pull 移除
移除数组array中所有和给定值相等的元素，使用SameValueZero 进行全等比较。
注意： 和_.without 方法不同，这个方法会改变数组。使用_.remove 从一个数组中移除元素。
语法
_.pull(array, [values])
参数
array (Array): 要修改的数组。
[values] (...*): 要删除的值。
返回值
(Array): 返回 array.
示例
var array = [1, 2, 3, 1, 2, 3];
_.pull(array, 2, 3);
console.log(array);
// => [1, 1]
_.pullAll 移除
这个方法类似_.pull，区别是这个方法接收一个要移除值的数组。
Note: 不同于_.difference, 这个方法会改变数组 array。
语法
_.pullAll(array, values)
参数
array (Array): 要修改的数组。
values (Array): 要移除值的数组。
返回值
(Array): 返回 array。
示例
var array = [1, 2, 3, 1, 2, 3];
_.pullAll(array, [2, 3]);
console.log(array);
// => [1, 1]
_.pullAt 移除
根据索引 indexes，移除array中对应的元素，并返回被移除元素的数组。
Note: 和_.at不同, 这个方法会改变数组 array。
语法
_.pullAt(array, [indexes])
参数
array (Array): 要修改的数组。
[indexes] (...(number|number[])): 要移除元素的索引。
返回值
(Array): 返回移除元素组成的新数组。
示例
var array = [5, 10, 15, 20];
var evens = _.pullAt(array, 1, 3);
console.log(array);
// => [5, 15]
console.log(evens);
// => [10, 20]
_.remove 移除
移除数组中predicate（断言）返回为真值的所有元素，并返回移除元素组成的数组。predicate（断言） 会传入3个参数： (value, index, array)。
Note: 和_.filter不同, 这个方法会改变数组 array。使用_.pull来根据提供的value值从数组中移除元素。
语法
_.remove(array, [predicate=_.identity])
参数
array (Array): 要修改的数组。
[predicate=_.identity] (Array|Function|Object|string): 每次迭代调用的函数。
返回
(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]
_.reverse 反转
反转array，使得第一个元素变为最后一个元素，第二个元素变为倒数第二个元素，依次类推。
Note: 这个方法会改变原数组 array，基于Array#reverse.
语法
_.reverse(array)
参数
array (Array): 要修改的数组。
返回
(Array): 返回 array.
示例
var array = [1, 2, 3];
_.reverse(array);
// => [3, 2, 1]
console.log(array);
// => [3, 2, 1]
_.slice 裁剪
裁剪数组array，从 start 位置开始到end结束，但不包括 end 本身的位置。
Note: 这个方法用于代替Array#slice 来确保数组正确返回。
语法
_.slice(array, [start=0], [end=array.length])
参数
array (Array): 要裁剪数组。
[start=0] (number): 开始位置。
[end=array.length] (number): 结束位置。
返回
(Array): 返回 数组array 裁剪部分的新数组。
示例
var array = [1, 2, 3];
_.reverse(array);
// => [3, 2, 1]
console.log(array);
// => [3, 2, 1]
_.uniq 去重
创建一个去重后的array数组副本。使用了SameValueZero 做等值比较。只有第一次出现的元素才会被保留。
语法
_.uniq(array)
参数
array (Array): 要检查的数组。
返回
(Array): 返回新的去重后的数组。
示例
_.uniq([2, 1, 2]);
// => [2, 1]
_.without 剔除
创建一个剔除所有给定值的新数组，剔除值的时候，使用SameValueZero做相等比较。
注意: 不像_.pull, 这个方法会返回一个新数组。
语法
_.without(array, [values])
参数
array (Array): 要检查的数组。
[values] (...*): 要剔除的值。
返回
(Array): 返回过滤值后的新数组。
示例
_.without([2, 1, 2, 3], 1, 2);
// => [3]
_.zipObject array -> object
这个方法类似_.fromPairs，除了它接受2个数组，第一个数组中的值作为属性标识符（属性名），第二个数组中的值作为相应的属性值。
语法
_.zipObject([props=[]], [values=[]])
参数
[props=[]] (Array): The property identifiers.
[values=[]] (Array): The property values.
返回
(Object): Returns the new object.
示例
_.zipObject(['a', 'b'], [1, 2]);
// => { 'a': 1, 'b': 2 }
_.fromPairs （array -> object）
返回一个由键值对pairs构成的对象。
语法
_.fromPairs(pairs)
参数
pairs (Array): 键值对pairs。
返回值
(Object): 返回一个新对象。
示例
_.fromPairs([['fred', 30], ['barney', 40]]);
// => { 'fred': 30, 'barney': 40 }
