返回

揭秘 JavaScript 数组去重的五大经典方法

前端

JavaScript 数组去重的重要性

在 JavaScript 中，数组是一种非常重要的数据结构。它可以存储多个相同类型的值，并且可以通过索引访问每个值。然而，有时我们需要处理一个数组，其中包含重复的元素。这可能会导致代码的复杂性和错误。因此，了解如何从数组中删除重复元素非常重要。

方法一：使用 Set(ES6)

Set 是 ES6 中引入的一种新的数据结构。它可以存储唯一的值。这意味着，如果将一个重复的值添加到 Set 中，它将被忽略。我们可以利用这一点来对数组进行去重。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];

const uniqueArr = [...new Set(arr)];

console.log(uniqueArr); // [1, 2, 3, 4, 5]

方法二：使用 let 和 newArr

这种方法使用 let 声明一个新的变量 newArr，并使用扩展运算符 (...) 将 Set(arr) 中的唯一值复制到 newArr 中。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];

let newArr = [...new Set(arr)];

console.log(newArr); // [1, 2, 3, 4, 5]

方法三：使用数组 filter

filter() 方法可以创建一个新数组，其中只包含通过给定函数测试的元素。我们可以利用这个特性来过滤掉数组中的重复元素。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];

const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);

console.log(uniqueArr); // [1, 2, 3, 4, 5]

方法四：使用普通对象 object

普通对象 object 也可以用来去重。因为对象中 key 名不能有重复的。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];

const uniqueArr = [];

const obj = {};

for (let i = 0; i < arr.length; i++) {
  if (!obj[arr[i]]) {
    obj[arr[i]] = true;
    uniqueArr.push(arr[i]);
  }
}

console.log(uniqueArr); // [1, 2, 3, 4, 5]

方法五：使用双循环

双循环去重也是一种常用的方法，但它比较耗时。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];

const uniqueArr = [];

for (let i = 0; i < arr.length; i++) {
  let isUnique = true;
  for (let j = 0; j < uniqueArr.length; j++) {
    if (arr[i] === uniqueArr[j]) {
      isUnique = false;
      break;
    }
  }
  if (isUnique) {
    uniqueArr.push(arr[i]);
  }
}

console.log(uniqueArr); // [1, 2, 3, 4, 5]

结语

总之，有许多方法可以从 JavaScript 数组中删除重复元素。每种方法都有其优缺点。您可以根据具体情况选择最合适的方法。如果您有其他更好的方法，欢迎在评论区分享。