关于JavaScript数组去重的一些理解汇总

JavaScript数组去重是前端开发中一个常见的需求，本文将从以下几个方面对JavaScript数组去重进行详细的讲解和总结：

• 使用ES6 Set去重
• 使用ES5 filter方法去重
• 对比两种方法的优缺点

使用ES6 Set去重

ES6引入了Set来解决数组去重问题，Set是一种对象类型，它允许我们存储任何类型的唯一值。我们可以通过将一个数组传递给Set构造函数来创建一个Set对象：

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

在这个示例中，我们使用new关键字创建了一个Set对象，然后将原始数组传递给Set构造函数，这样Set对象就包含原始数组中的唯一值。最后，我们使用扩展运算符将Set对象转换回数组。

使用ES5 filter方法去重

如果你需要在ES5中去重，可以使用数组的filter方法结合indexOf或者lastIndexOf方法：

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

在这个示例中，我们使用arr.filter方法对原数组进行遍历，然后使用arr.indexOf方法获取每个元素在数组中的第一个位置，最后得到新的去重数组uniqueArr。

对比两种方法的优缺点

ES6 Set去重的优点在于代码简单、性能好，但缺点是Set对象不支持下标访问，需要转换为数组，使用上需要注意。而使用ES5 filter方法去重的优点是兼容性好，但缺点是性能相对较低，需要对原数组进行遍历，算法复杂度较高。

根据实际情况选择合适的方法进行数组去重。

示例说明

下面是两条例子说明：

示例一：一个字符串数组去重

const arr = ['a', 'b', 'c', 'c', 'd', 'e', 'd'];
const set = new Set(arr);
console.log([...set]); // ['a', 'b', 'c', 'd', 'e']

在这个示例中，我们使用了ES6的Set对象，来将字符串数组arr去重，并将结果输出。

示例二：一个对象数组去重

const arr = [{name: 'Tom', age: 18}, {name: 'Jerry', age: 18}, {name: 'Tom', age: 18}];
const uniqueArr = arr.filter((item, index) => {
  const _arr = arr.slice(index + 1);
  return _arr.findIndex(val => JSON.stringify(val) === JSON.stringify(item)) === -1;
});
console.log(uniqueArr); // [{name: 'Tom', age: 18}, {name: 'Jerry', age: 18}]

在这个示例中，我们使用ES5的filter方法，将对象数组arr去重，并将结果输出。注意到如果数组中元素是对象类型的，则需要用JSON.stringify将其转换为字符串判断是否相等，从而实现去重。