JS去重的几种方式|极客笔记

JS去重的几种方式

在JavaScript开发中，数组去重是一个常见的操作，我们经常需要对数据进行去重处理。本文将会介绍几种常用的JavaScript去重方法，分别是利用Set对象、利用Array.prototype.filter()方法、利用Array.prototype.reduce()方法以及利用对象属性的方法。

利用Set对象

Set对象是一种新的数据结构，它类似于数组，但是成员的值都是唯一的，没有重复值。利用Set对象可以轻松实现数组去重操作。

const arr = [1, 2, 2, 3, 4, 4, 5];
const newArr = [...new Set(arr)];
console.log(newArr); // [1, 2, 3, 4, 5]

以上代码通过ES6的扩展运算符将Set对象转换为数组，从而实现了数组去重操作。使用Set对象能够很方便地去除重复元素，但是需要注意Set对象是按照插入顺序保存元素的。

利用Array.prototype.filter()方法

数组的filter()方法可以用于过滤数组中的元素，根据指定的条件返回一个新的数组。利用filter()方法，我们可以实现数组去重的功能。

const arr = [1, 2, 2, 3, 4, 4, 5];
const newArr = arr.filter((item, index, array) => array.indexOf(item) === index);
console.log(newArr); // [1, 2, 3, 4, 5]

以上代码中，filter()方法内部使用indexOf()方法来判断当前元素在数组中第一次出现的位置是否与当前索引相同，如果相同，则该元素是第一次出现，保留在新数组中，从而实现了数组去重。

利用Array.prototype.reduce()方法

数组的reduce()方法可以将数组中的元素归纳为一个单一的数值或对象。利用reduce()方法，我们可以实现数组去重的功能。

const arr = [1, 2, 2, 3, 4, 4, 5];
const newArr = arr.reduce((acc, cur) => acc.includes(cur) ? acc : [...acc, cur], []);
console.log(newArr); // [1, 2, 3, 4, 5]

以上代码中，reduce()方法的初始值为一个空数组，然后通过includes()方法判断当前元素是否已经存在于新数组中，如果不存在，则将其加入新数组中，从而实现了数组去重的功能。

利用对象属性的方法

利用对象属性也可以实现数组去重的功能，我们可以用数组元素作为对象的属性值，并通过Object.keys()方法获取到去重后的数组。

const arr = [1, 2, 2, 3, 4, 4, 5];
const obj = {};
arr.forEach(item => obj[item] = true);
const newArr = Object.keys(obj).map(Number);
console.log(newArr); // [1, 2, 3, 4, 5]

以上代码中，我们遍历原数组，将数组元素作为对象的属性值，由于对象的属性名是唯一的，重复元素会被覆盖，最后通过Object.keys()方法获取对象的属性名数组，从而实现了数组去重的功能。