lodash数组常用方法

303 阅读2分钟

_.pull 移除数组array中所有和给定值相等的元素

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

注意:  和_.without 方法不同,这个方法会改变数组。使用_.remove 从一个数组中移除元素。

_.without 移除数组array中所有和给定值相等的元素 但不会修改原数组

_.difference 数组求差集

同样可以使用Lodash库中的方法来实现更语义化的表达。对于这一行代码:

newCheckedKeys = newCheckedKeys.filter(item => !affectedInjectKeys.includes(item));

可以使用_.difference()方法替换,以获取newCheckedKeys中不在affectedInjectKeys中的元素。优化后的代码如下:

import _ from 'lodash';

// ...

if (!isChecked) {
  // 根据isChecked更新newCheckedKeys
  newCheckedKeys = _.difference(newCheckedKeys, affectedInjectKeys);
}

// ...

这里,_.difference(newCheckedKeys, affectedInjectKeys)返回一个新数组,包含所有在newCheckedKeys中但不在affectedInjectKeys中的元素,效果等同于原代码中的filter()操作。这种方法名更直观地表达了“求差集”的意图。

_.intersection 数组求交集

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

对于这一行代码:

const list = allChannelKeys.filter(item => newCheckedKeys.includes(item));

可以使用Lodash的_.intersection()方法来替换,以获取两个数组之间的交集。优化后的代码如下:

import _ from 'lodash';

// ...

const list = _.intersection(allChannelKeys, newCheckedKeys);

// ...

这里,_.intersection(allChannelKeys, newCheckedKeys)返回一个新的数组,包含所有同时出现在allChannelKeysnewCheckedKeys中的元素,效果等同于原代码中的filter()操作。使用intersection方法使得代码更具可读性,明确表达了计算交集的意图。

_.map() 是原生JS中的数组方法的升级版,我们可以通过一个字符串而不是回调函数来浏览深度嵌套的对象属性

    var arr = [{
        "name": "张三",
        "phone": [{"name": "MI"}, {"name": "iphone"}]
    }, {
        "name": "李四",
        "phone": [{"name": "HUAWEI"}, {"name": "honor"}]
    }];
    var jsMap = arr.map(function (owner) {
        return owner.phone[0].name;
    });
    var lodashMap = _.map(arr, 'phone[0].name');
    console.log(lodashMap);    // MI  HUAWEI

_.chunk(array, [size=1]) 按照size的大小来拆分array数组

将数组(array)拆分成多个 size 长度的区块,并将这些区块组成一个新数组。

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

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

var chunk1 = _.chunk(['a', 'b', 'c', 'd'], 2);
 console.log(chunk1);      // [['a', 'b'], ['c', 'd']]
var chunk2 = _.chunk(['a', 'b', 'c', 'd'], 3);
 console.log(chunk2);      // [['a', 'b', 'c'], ['d']]