JS 数组去重策略：巧妙应对重复数据的处理

2023-11-12 10:11:13

在 JavaScript 中高效去除数组中的重复项

在 JavaScript 开发中，数组是一种广泛使用的结构，它允许我们存储一组值并通过索引轻松访问它们。然而，在实际应用中，我们经常会遇到数组中存在重复元素的情况。重复数据的存在不仅会影响代码的效率，还会损害数据的准确性。因此，掌握有效的数组去重策略至关重要。

策略一：利用 ES6 的 Set

ES6 引入了 Set 数据结构，它可以自动去除重复元素。为了利用 Set 去除数组中的重复项，我们可以执行以下步骤：

使用 new Set(arr) 创建一个 Set 对象，其中 arr 是要进行去重的数组。
使用扩展运算符 (...) 将 Set 转换为一个新的数组。

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

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

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

策略二：使用 indexOf

JavaScript 提供了 indexOf() 方法，可用于检查数组中是否存在特定元素。如果元素存在，indexOf() 会返回其索引；否则，它会返回 -1。我们可以利用这个特性来实现数组去重：

遍历数组中的每个元素。
对于每个元素，使用 indexOf() 检查该元素是否已存在于数组中。
如果元素不存在（indexOf() 返回 -1），将其添加到结果数组中。

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

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, 5]

策略三：使用 filter

filter() 方法允许我们基于给定的条件从数组中筛选元素。我们可以使用 filter() 来去除数组中的重复项：

使用 filter() 遍历数组中的每个元素。
将一个回调函数作为 filter() 的参数。该函数应返回一个布尔值，指示是否保留该元素。
在回调函数中，使用 indexOf() 检查该元素是否已存在于数组中。如果元素不存在（indexOf() 返回 -1），则将其保留。

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

const uniqueArr = arr.filter((item) => {
  return arr.indexOf(item) === -1;
});

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