首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript数组去重及特殊数据处理

JavaScript数组去重的七种方法及特殊数据类型处理详解

2025-05-22 11:32:50 作者：WAKEUP369

这篇文章主要介绍了数组去重的必要性及七种常见方法,涵盖ES6 Set、filter、循环等技术,并提及处理对象与NaN等特殊数据的注意事项,需要的朋友可以参考下

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

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

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

通过去重操作可提升数据纯净度，优化应用性能。以下 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])
};

NaN 处理：

indexOf 无法检测 NaN（返回 -1）
includes 可识别 NaN

以上就是JavaScript数组去重的七种方法及特殊数据类型处理详解的详细内容，更多关于JavaScript数组去重及特殊数据处理的资料请关注脚本之家其它相关文章！