JavaScript 数组去重详解

在编写 JavaScript 代码时，经常需要对数组进行去重，以方便后续的操作和处理。本文将详细讲解 JavaScript 数组去重的方法，包括使用 ES6 Set、使用 filter 和 forEach 等方法。

使用 ES6 Set

ES6 中的 Set 是一种新的数据结构，可以用来去重。Set 中存储的值都是唯一的，如果尝试向 Set 中添加相同的值，则不会生效。因此，可以使用 Set 来对数组进行去重操作。

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

上面代码中，首先定义了一个包含重复元素的数组，然后通过扩展运算符和 Set 构造函数实例化一个 Set，再将其转换成数组。

使用 filter 和 forEach

除了使用 Set，还可以使用 filter 和 forEach 方法进行数组去重。其中，filter 方法用于过滤数组中的重复元素，而 forEach 方法用于对去重后的数组进行操作。

let arr = [1, 2, 2, 3, 3, 4, 5];
let uniqueArr = [];
arr.filter(function(item) {
  if (uniqueArr.indexOf(item) === -1) {
    uniqueArr.push(item);
  }
});
uniqueArr.forEach(function(item) {
  console.log(item);
});

上面代码中，首先定义了一个包含重复元素的数组，然后通过 filter 方法对数组进行去重操作，使用 indexOf 判断元素是否已存在于新数组，然后使用 push 添加不存在的元素。接着，使用 forEach 方法遍历去重后的数组，并输出每个元素的值。

示例说明

下面将结合两个示例，详细说明使用以上两种方式进行数组去重的方法。

示例一

let arr = [1, 2, 2, 3, 3, 4, 5];
let uniqueArr1 = [...new Set(arr)];
let uniqueArr2 = [];
arr.filter(function(item) {
  if (uniqueArr2.indexOf(item) === -1) {
    uniqueArr2.push(item);
  }
});
console.log(uniqueArr1); // [1, 2, 3, 4, 5]
console.log(uniqueArr2); // [1, 2, 3, 4, 5]

上面代码中，定义了一个包含重复元素的数组 arr，然后分别使用 ES6 中的 Set 和 filter 和 forEach 完成去重操作，并将结果存储在 uniqueArr1 和 uniqueArr2 变量中。最后，通过 console.log 输出去重后的数组。

示例二

let arr = [
  {id: 1, name: "Amy"},
  {id: 2, name: "Bob"},
  {id: 2, name: "Bob"},
  {id: 3, name: "Cat"},
  {id: 3, name: "Cat"},
  {id: 4, name: "Dave"},
  {id: 5, name: "Eric"}
];
let uniqueArr1 = [];
let uniqueArr2 = [];
arr.filter(function(item) {
  let exist = uniqueArr1.find(function(uItem) {
    return uItem.id === item.id;
  });
  if (!exist) {
    uniqueArr1.push(item);
  }
  if (uniqueArr2.indexOf(item.id) === -1) {
    uniqueArr2.push(item.id);
  }
});
console.log(uniqueArr1);
/*
[
  {id: 1, name: "Amy"},
  {id: 2, name: "Bob"},
  {id: 3, name: "Cat"},
  {id: 4, name: "Dave"},
  {id: 5, name: "Eric"}
]
*/
console.log(uniqueArr2); // [1, 2, 3, 4, 5]

上面代码中，定义了一个包含对象的数组 arr，由于对象无法使用 Set 和 indexOf 进行去重操作，因此采用了不同的方法。首先定义两个空数组 uniqueArr1 和 uniqueArr2，使用 filter 方法对数组进行去重操作，对 uniqueArr1 使用 find 方法取出已存在的对象，如果对象不存在，则将其添加到新数组中；对 uniqueArr2 使用 indexOf 判断元素是否已存在于新数组，然后使用 push 添加不存在的元素。最后，通过 console.log 输出去重后的数组。