数组去重除了使用js自带的set方法,还可以用lodash的uniq方法:

eg:

const num = [1, 2, 3, 4, 4, 3];
const differNum = [...new Set(num)];
console.log(differNum);
// [1, 2, 3, 4];

但当数组为数组对象时,set方法便不能进行去重,

eg:

const list = [{
  processDesc: '走动',
  processNum: '1',
},
{
  processDesc: '顺序',
  processNum: '2',
},
{
  processDesc: '顺序',
  processNum: '2',
}];
const newList = [...new Set(list)];
console.log(newList);

因此,这里推荐lodash的uniqWith方法;

安装:

npm install --save lodash

_.uniq(array)

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

参数

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

返回

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

eg:

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

_.uniqBy(array, [iteratee=_.identity])

这个方法类似 _.uniq ,除了它接受一个 iteratee (迭代函数),调用每一个数组(array)的每个元素以产生唯一性计算的标准。iteratee 调用时会传入一个参数:(value)

参数

  1. array (Array): 要检查的数组。
  2. [iteratee=_.identity] (Array|Function|Object|string): 迭代函数,调用每个元素。

返回

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

eg:

_.uniqBy([2.1, 1.2, 2.3], Math.floor);
// => [2.1, 1.2]
 
// The `_.property` iteratee shorthand.
_.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x');
// => [{ 'x': 1 }, { 'x': 2 }]

_.uniqWith(array, [comparator])

这个方法类似 _.uniq, 除了它接受一个 comparator 调用比较arrays数组的每一个元素。 comparator 调用时会传入2个参数: (arrVal, othVal)

参数

  1. array (Array): 要检查的数组。
  2. [comparator] (Function): 比较函数,调用每个元素。

返回

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

eg:

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

更多方法可lodash官网参考文档:

https://www.lodashjs.com/docs/latest

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐