Skip to main content

Lodash 数组类精选

一、数组分割 _.chunk​

_.chunk(array, [size=1])

参数:

  • array (Array): 需要处理的数组。
  • size (number): 每个数组区块的长度，默认为 1。

返回:

  • (Array): 返回一个包含拆分区块的新数组（注：相当于一个二维数组）。

将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。

如果array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。

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

二、过滤非真值 _.compact​

_.compact(array)

参数：

  • array (Array): 待处理的数组

返回值：

  • (Array): 返回过滤掉假值的新数组。

创建一个新数组，包含原数组中所有的非假值元素。

例如 false、null、0、""、undefined 和 NaN 都是被认为是“假值”。

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

三、值与数组链接 _.concat​

_.concat(array, [values])

参数：

  • array (Array): 被连接的数组。
  • values (...*): 连接的值。

返回值：

  • (Array): 返回连接后的新数组。

创建一个新数组，将 array 与任何数组或值连接在一起。

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

四、对数组值进行过滤​

1、_.difference​

_.difference(array, [values])

参数：

  • array (Array): 要检查的数组。
  • values (...Array): 排除的值。

返回值：

  • (Array): 返回一个过滤值后的新数组。

创建一个具有唯一 array 值的数组，每个值不包含在其他给定的数组中（即传入第二个参数数组 b，在第一个参数数组 a 中排除数组 b 中的值）

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

2、_.differenceBy​

_.differenceBy(array, [values], [iteratee=_.identity])

参数：

  • array (Array): 要检查的数组。
  • values (...Array): 排除的值。
  • iteratee=_.identity (Array|Function|Object|string): iteratee 调用每个元素。

返回值：

  • (Array): 返回一个过滤值后的新数组。

接受一个 iteratee（迭代器），iteratee 会调用一个参数将 array 和 values 中的所有元素进行迭代，然后对迭代后得到的元素进行对比，去掉迭代后相同的元素，array 剩下的元素组成的数组即为该方法的返回值，返回值是从第一数组中选择。

即以迭代器函数的返回值作为每一个元素的对比值进行对比，以第一个数组为准，去掉对比后相同的元素。

_.differenceBy([3.1, 2.2, 1.3], [4.4, 2.5], Math.floor);
// 迭代后结果为：[3, 2, 1], [4, 2]
// => [3.1, 1.3]

_.differenceBy([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], 'x');
// 迭代后结果为：[2, 1], [1]
// => [{ 'x': 2 }]

_.differenceBy([3, 2, 3, 2], [-3, -2], val => { return true })
// 迭代后结果为：[true, true, true, true], [true, true]
// => []

3、_.differenceWith​

_.differenceWith(array, [values], [comparator])

参数：

  • array (Array): 要检查的数组。
  • values (...Array): 排除的值。
  • comparator (Function): comparator 调用每个元素。

返回值：

  • (Array): 返回一个过滤值后的新数组。

接受一个 comparator（比较器），调用比较 array，values 中的元素，返回过滤后的新数组（结果值是从第一数组中选择）

var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
 
_.differenceWith(objects, [{ 'x': 1, 'y': 2 }], _.isEqual);
// => [{ 'x': 2, 'y': 1 }]

五、数组切片​

1、_.drop​

_.drop(array, [n=1])

参数：

  • array (Array): 要查询的数组。
  • n (number): 要去除的元素个数，默认为 1。

返回值：

  • (Array): 返回 array 剩余切片。

创建一个切片数组，去除 array 前面的 n 个元素（n 默认值为1）

_.drop([1, 2, 3]);
// => [2, 3]
 
_.drop([1, 2, 3], 2);
// => [3]
 
_.drop([1, 2, 3], 5);
// => []
 
_.drop([1, 2, 3], 0);
// => [1, 2, 3]

2、_.dropRight​

_.dropRight(array, [n=1])

参数

  • array (Array): 要查询的数组。
  • n (number): 要去除的元素个数，默认为 1。

返回值

  • (Array): 返回array剩余切片。

创建一个切片数组，去除 array 尾部的 n 个元素。（n 默认值为1。）

_.dropRight([1, 2, 3]);
// => [1, 2]
 
_.dropRight([1, 2, 3], 2);
// => [1]
 
_.dropRight([1, 2, 3], 5);
// => []
 
_.dropRight([1, 2, 3], 0);
// => [1, 2, 3]

六、数组填充 _.fill​

_.fill(array, value, [start=0], [end=array.length])

参数

  • array (Array): 要填充改变的数组。
  • value (*): 填充给 array 的值。
  • start (number): 开始位置，默认为 0。
  • end (number): 结束位置，默认为 array.length。

返回值

  • (Array): 返回 array。

使用 value 值来填充（替换）array，从 start 位置开始, 到 end 位置结束（不包含 end 位置本身）。

var array = [1, 2, 3];
_.fill(array, 'a');
// => ['a', 'a', 'a']
 
_.fill([1, 2, 3, 4], '*', 1, 3);
// => [1, '*', '*', 4]

代替方法（array.fill）

var array = [1, 2, 3].fill('a')
console.log(array);
// => ['a', 'a', 'a']

七、数组降维​

1、_.flatten​

_.flatten(array)

参数

  • array (Array): 需要减少嵌套层级的数组。

返回值

  • (Array): 返回减少嵌套层级后的新数组。

减少一级 array 嵌套深度。

_.flatten([1, [2, [3, [4]], 5]]);
// => [1, 2, [3, [4]], 5]

2、_.flattenDeep​

_.flattenDeep(array)

参数

  • array (Array): 需要处理的数组。

返回值

  • (Array): 返回一个的新一维数组。

将 array 递归为一维数组。

_.flattenDeep([1, [2, [3, [4]], 5]]);
// => [1, 2, 3, 4, 5]

3、_.flattenDepth​

_.flattenDepth(array, [depth=1])

参数

  • array (Array): 需要减少嵌套层级的数组。
  • depth (number):最多减少的嵌套层级数，默认为 1。

返回值

  • (Array): 返回减少嵌套层级后的新数组。

根据 depth 递归减少 array 的嵌套层级

var array = [1, [2, [3, [4]], 5]];
 
_.flattenDepth(array, 1);
// => [1, 2, [3, [4]], 5]
 
_.flattenDepth(array, 2);
// => [1, 2, 3, [4], 5]

替代方案（flat or flatMap）

const arr = [1, 2, 3, 4, [5, 6, [7, 8, 9]]]
arr.flat(2)
// => [1, 2, 3, 4, 5, 6, 7, 8, 9]

const arr = [1, 2, 3, 4]
arr.flatMap(item => [item * 10])
// => [10, 20, 30, 40]

八、二维数组转对象 _.fromPairs​

_.fromPairs(pairs)

参数

  • pairs (Array): 键值对 pairs。

返回值

  • (Object): 返回一个新对象。

根据二维数组返回一个由键值对 pairs 构成的对象。

_.fromPairs([
  ['name', 'Tim'],
  ['kemp', 's3,s4,s6']
])
// => { name: "Tim", kemp: "s3,s4,s6" }

代替方案（Object.fromEntries）

const result = Object.fromEntries([
  ['name', 'Tim'],
  ['kemp', 's3,s4,s6']
])
console.log(result)
// => { name: "Tim", kemp: "s3,s4,s6" }

const player = new Map()
player.set('name', 'Tim')

const result = Object.fromEntries(player)
console.log(result)
// => { name: "Tim" }

const arr = Object.entries({
  name: 'Tim'
})
console.log(arr)
// => [["name", "Tim"]]

九、求传入数组的交集 _.intersection​

_.intersection([arrays])

参数

  • arrays (...Array): 待检查的数组。

返回值

  • (Array): 返回一个包含所有传入数组交集元素的新数组。

创建唯一值的数组，这个数组包含所有给定数组都包含的元素，使用SameValueZero进行相等性比较。（注：可以理解为给定数组的交集）

_.intersection([2, 1], [4, 2], [1, 2]);
// => [2]

十、删除指定元素​

1、_.pull​

_.pull(array, [values])

参数

  • array (Array): 要修改的数组。
  • values (...*): 要删除的值。

返回值

  • (Array): 返回 array.

移除数组 array 中所有和给定值相等的元素，使用SameValueZero 进行全等比较。

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

2、_.pullAll​

_.pullAll(array, values)

参数

  • array (Array): 要修改的数组。
  • values (Array): 要移除值的数组。

返回值

  • (Array): 返回 array。

这个方法类似 _.pull，区别在于这个方法接收一个要移除值的数组。

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

3、_.pullAt​

_.pullAt(array, [indexes])

参数

  • array (Array): 要修改的数组。
  • indexes (...(number|number[])): 要移除元素的索引。

返回值

  • (Array): 返回移除元素组成的新数组。

根据索引 indexes，移除 array 中对应的元素，并返回被移除元素的数组。

var array = [5, 10, 15, 20];
var evens = _.pullAt(array, 1, 3);
 
console.log(array);
// => [5, 15]
 
console.log(evens);
// => [10, 20]

替代方案 array.splice

十、数组去重 _.uniq​

_.uniq(array)

参数

  • array (Array): 要检查的数组。

返回

  • (Array): 返回新的去重后的数组。

创建一个去重后的 array 数组副本。使用了SameValueZero 做等值比较。只有第一次出现的元素才会被保留。

_.uniq([2, 1, 2]);
// => [2, 1]

十一、排序并去重 _.sortedUniq​

_.sortedUniq(array)

参数

  • array (Array): 要检查的数组。

返回

  • (Array): 返回一个新的不重复的数组。

这个方法与 _.uniq 类似，但会优化排序数组。

_.sortedUniq([1, 1, 2]);
// => [1, 2]