js的数组去重方法

冰海恋雨.

于 2023-11-27 13:32:11 发布

阅读量1.3k

点赞数 27

分类专栏： js 文章标签： es6 前端 javascript

本文链接：https://blog.csdn.net/m0_64590669/article/details/134639501

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

使用Set：ES6引入的Set数据结构可以用于存储唯一的值。通过将数组转换为Set，然后将Set转换回数组，可以实现去重。

使用filter()方法和indexOf()方法：利用Array的filter()方法和indexOf()方法，可以过滤出不重复的元素。

使用reduce()方法和includes()方法：利用Array的reduce()方法和includes()方法，可以遍历数组并累积不重复的元素。

使用Map：利用Map数据结构的特性，可以实现数组的去重。

es6数组中对象去重

1. filter()用法

filter()方法返回一个包含符合指定条件的所有元素的新数组。如果没有符合条件的元素，则返回空数组。

注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。

let arr = [
		{id: 1,name: '王五'},
		{id: 2,name: '李赵六'}
	];

let nArr = arr.filter((value, index, Arr) =>{
    console.log(value);
    console.log(index);
    console.log(Arr);
});

打印结果：

{id: 1, name: '王五'}
0
[{id: 1, name: '王五'},{id: 2, name: '李赵六'}]

{id: 2, name: '李赵六'}
1
[{id: 1, name: '王五'},{id: 2, name: '李赵六'}]

2. findIndex()用法

findIndex()方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
findIndex()方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组，函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。

[3, 10, 18, 20].findIndex(value => value>11); // 2 (18的下标是2)
[3, 10, 18, 20].findIndex(value => value>1); // 0 (3的下标是0)
[3, 10, 18, 20].findIndex(value => value>30); // -1 (不存在则返回-1)

3. 去重

let arr = [
		{id: 1,name: '张三'},
		{id: 2,name: '李四'},
		{id: 1,name: '张三'},
		{id: 2,name: '李四'}
	];

let nArr = arr.filter((currentValue, currentIndex, selfArr) = >{
	return selfArr.findIndex(x = >x.name === currentValue.name) === currentIndex
});
console.log(nArr);

[{"id": 1,"name": "张三"},{"id": 2,"name": "李四"}]

其他方法：

var m = new Map();
person = person.filter((ele) => !m.has(ele.id) && m.set(ele.id, ""));

方法二：reduce()去重

1. reduce()用法

reduce方法和reduceRight方法依次处理数组的每个成员，最终累计为一个值。

区别：

reduce是从左到右处理（从第一个成员到最后一个成员），
reduceRight则是从右到左（从最后一个成员到第一个成员），其他完全一样。

注意:reduce() 对于空数组是不会执行回调函数的。

语法：
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

total 累积变量，默认为数组的第一个成员
currentValue 当前变量，默认为数组的第二个成员
currentIndex 当前位置（从0开始）
arr 原数组
这四个参数之中，只有前两个是必须的，后两个则是可选的

// total为最终累计值
let total = [1, 2, 3, 4, 5].reduce(function (a, b) {
  console.log(a, b);
  return a + b;
});
// 1 2
// 3 3
// 6 4
// 10 5
// 15

如果要对累积变量指定初值，可以把它放在reduce方法和reduceRight方法的第二个参数。

上面的第二个参数相当于设定了默认值，处理空数组时尤其有用，可避免一些空指针异常。

由于这两个方法会遍历数组，所以实际上还可以用来做一些遍历相关的操作。
比如，