JS 数组去重的5种方法

JS 数组去重的5种方法

在前端开发中，经常会遇到需要对数组进行去重操作的情况。本文将介绍5种常见的方法来对 JavaScript 数组进行去重，让你在实际项目中能够轻松处理重复元素的问题。

方法一：使用 Set

ES6 增加了 Set 数据结构，它类似于数组，但是键值唯一，可以帮助我们实现数组去重的功能。

const arr = [1, 2, 3, 1, 2, 4];
const uniqueArr = Array.from(new Set(arr));

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

使用 Set 去重的方法非常简单，只需要将数组转为 Set，再将 Set 转回数组即可。该方法适用于大多数场景，但是在需要保持原数组顺序的情况下可能不太适用。

方法二：使用 indexOf

利用数组的 indexOf 方法来判断元素是否已经存在于新数组中，如果不存在则将其添加到新数组中。

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

for (let i = 0; i < arr.length; i++) {
  if (uniqueArr.indexOf(arr[i]) === -1) {
    uniqueArr.push(arr[i]);
  }
}

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

这种方法在处理小型数组时效果较好，但是对于大型数组则性能可能会有所下降。

方法三：使用 includes

ES6 增加了 includes 方法，用于判断数组是否包含指定元素。我们可以结合这个方法来实现数组去重。

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

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

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

这种方法与 indexOf 类似，只是写法更加简洁，适用于对数组元素的顺序不做要求的情况。

方法四：使用 filter

利用 filter 方法和 indexOf 方法结合，可以实现一行代码实现数组去重的功能。

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

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

这种方法在去重之后能够保持原数组的顺序，适用于对数组元素顺序有要求的情况。

方法五：使用 reduce

使用 reduce 方法结合 indexOf 方法可以实现数组去重的功能。

const arr = [1, 2, 3, 1, 2, 4];
const uniqueArr = arr.reduce((result, item) => {
  if (result.indexOf(item) === -1) {
    result.push(item);
  }
  return result;
}, []);

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

这种方法是比较通用的去重方法，适用于大多数情况。

总的来说，对于小型数组而言，使用 indexOf 或 includes 方法即可满足需求；对于大型数组而言，使用 Set 或 reduce 方法效率更高。根据实际情况选择合适的去重方法，能够提高代码效率和性能。