JS - Lodash工具库的使用详解6(Array数组函数3:移除、修改原数组内容)

作者: hgweb 发布时间: 2019-10-14 浏览: 120 次 编辑

六、Array 数组操作函数3:修改原数组内容

1,剔除一个数组的元素(指定元素移除)

pull 方法可以移除数组 array 中所有和给定值相等的元素。


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

原文:JS - Lodash工具库的使用详解6(Array数组函数3:移除、修改原数组内容)

2,剔除一个数组的元素(指定索引移除)

pullAt 方法根据索引 indexes,移除 array 中对应的元素,并返回被移除元素的数组。该方法同样会改变原数组。


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

3,剔除一个数组的元素(与另一个数组比较)

(1)pull 与前文介绍的 difference 类似。但它不是创建一个新数组,而是直接移除原数组中所有与另一个数组里相等的元素。

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

(2)pullAllBy 方法相较于 pullAll 方法多了第三个参数, 该参数接受一个 iteratee (迭代器),它会分别迭代两个数组的每个元素,返回的值作为比较值。 与 differenceBy 不同的是,该方法会改变原数组。

var array = [{ 'x': 1 }, { 'x': 2 }, { 'x': 3 }, { 'x': 1 }];
  
_.pullAllBy(array, [{ 'x': 1 }, { 'x': 3 }], 'x');
console.log(array);   // => [{ 'x': 2 }]

(3)pullAllWith 方法相较于 pullAll 方法多了第三个参数, 该参数接受一个 comparator (比较器),它调用比较 arrayvalues 中的元素。 与 differenceWith 不同的是,该方法会改变原数组。

var array = [{ 'x': 1, 'y': 2 }, { 'x': 3, 'y': 4 }, { 'x': 5, 'y': 6 }];
  
_.pullAllWith(array, [{ 'x': 3, 'y': 4 }], _.isEqual);
console.log(array);   // => [{ 'x': 1, 'y': 2 }, { 'x': 5, 'y': 6 }]

4,剔除一个数组的元素(通过方法判断)

remove 方法可以移除数组中 predicate(断言)返回为真值的所有元素,并返回移除元素组成的数组。

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]

JS Lodash工具库的使用详解系列:

JS - Lodash工具库的使用详解1(使用debounce函数实现防抖)

JS - Lodash工具库的使用详解2(使用throttle函数实现节流)

JS - Lodash工具库的使用详解3(String字符串操作函数)

JS - Lodash工具库的使用详解4(Array数组函数1:查找指定元素、或索引)

JS - Lodash工具库的使用详解5(Array数组函数2:获取部分数组片段)

JS - Lodash工具库的使用详解6(Array数组函数3:移除、修改原数组内容)

JS - Lodash工具库的使用详解7(Array数组函数4:数组排序、打乱)

JS - Lodash工具库的使用详解8(Array数组函数5:数组与对象间的转换)

JS - Lodash工具库的使用详解9(Array数组函数6:如果不是数组强制转成数组)

JS - Lodash工具库的使用详解10(Array数组函数7:根据指定规则进行分组、统计)

JS - Lodash工具库的使用详解11(Array数组函数8:创建指定范围数字的数组)

JS - Lodash工具库的使用详解12(创建一个只能调用1次、n次的函数)

JS - Lodash工具库的使用详解13(创建一个对某函数结果取反的函数)

JS - Lodash工具库的使用详解14(浅拷贝,深拷贝)

JS - Lodash工具库的使用详解15(深比较,判断是否包含某属性或属性值)

JS - Lodash工具库的使用详解16(判断是否为空)

JS - Lodash工具库的使用详解17(类型检查)

JS - Lodash工具库的使用详解18(生成随机数)