JavaScript 数组去重的七种方法及特殊数据类型处理-CSDN博客

本文链接：https://blog.csdn.net/2401_86373285/article/details/148141375

一、为什么需要数组去重？

在数据处理场景中，重复元素会导致：

统计结果失真
渲染性能下降（如列表重复渲染）
接口重复提交风险
存储空间浪费

通过去重操作可提升数据纯净度，优化应用性能。以下 7 种常见实现方案。

二、去重方法

1. ES6 Set

function removeDuplicatesWithSet(arr) {
  return [...new Set(arr)];
}

原理：
利用 Set 数据结构自动去重的特性，通过扩展运算符快速转换回数组

2. filter + indexOf

function removeDuplicatesWithFilter(arr) {
  return arr.filter((item, index) => arr.indexOf(item) === index);
}

原理：
通过 indexOf 检查元素首次出现位置，过滤非首次出现的元素

3. for 循环法

function removeDuplicatesWithFor(arr) {
  const uniqueArray = [];
  for (let i = 0; i < arr.length; i++) {
    if (uniqueArray.indexOf(arr[i]) === -1) {
      uniqueArray.push(arr[i]);
    }
  }
  return uniqueArray;
}

4. 双重 for 循环法

function removeDuplicatesWithDoubleFor(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}

5. indexOf 首现检测法

function removeDuplicatesWithIndexOf(arr) {
  const uniqueArray = [];
  for (let i = 0; i < arr.length; i++) {
    if (arr.indexOf(arr[i]) === i) {
      uniqueArray.push(arr[i]);
    }
  }
  return uniqueArray;
}

原理：
利用 indexOf 返回首个匹配索引的特性

6. includes 检测法

function removeDuplicatesWithIncludes(arr) {
  const uniqueArray = [];
  for (let item of arr) {
    if (!uniqueArray.includes(item)) {
      uniqueArray.push(item);
    }
  }
  return uniqueArray;
}

7. reduce 累积法

function removeDuplicatesWithReduce(arr) {
  return arr.reduce((acc, curr) => {
    return acc.includes(curr) ? acc : [...acc, curr];
  }, []);
}

三、特殊数据类型处理

对象去重：

// 根据特定属性去重
const uniqueByKey = (arr, key) => {
  const seen = new Set();
  return arr.filter(item => 
    seen.has(item[key]) ? false : seen.add(item[key])
};