脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 数组去重

JavaScript数组去重常见四种方法(最新整理)

 更新时间：2025年07月09日 11:57:07   作者：Codellllll  
数组去重是JavaScript开发中常见的需求,本文将详细解析四种常用的数组去重方法及其优缺点,感兴趣的朋友一起看看吧

JavaScript数组去重的四种方法解析

数组去重是JavaScript开发中常见的需求，本文将详细解析四种常用的数组去重方法及其优缺点。

方法1: 使用Set数据结构

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

原理：

  • ES6的Set数据结构天生具有元素唯一性特性
  • 通过展开运算符...将Set转换回数组

优点：

  • 代码简洁，一行搞定
  • 性能最佳（O(n)时间复杂度）

缺点：

  • 无法区分对象引用（两个内容相同的对象会被视为不同元素）
  • 需要ES6支持

方法2: 使用filter和indexOf

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

原理：

  • indexOf返回元素第一次出现的索引
  • 只保留索引匹配的元素

优点：

  • 代码可读性好
  • 不改变原始数组

缺点：

  • 时间复杂度O(n²)，大数据量性能较差
  • 同样无法处理对象类型元素

方法3: 使用reduce方法

function deduplicateWithReduce(arr) {
  return arr.reduce((unique, item) => {
    return unique.includes(item) ? unique : [...unique, item];
  }, []);
}

原理：

  • 使用reduce累积唯一值
  • 通过includes检查是否已存在

优点：

  • 函数式编程风格
  • 逻辑清晰

缺点：

  • 每次迭代都创建新数组（使用...展开）
  • 时间复杂度O(n²)

方法4: 使用对象属性

function deduplicateWithObject(arr) {
  const obj = {};
  return arr.filter(item => {
    return obj.hasOwnProperty(item) ? false : (obj[item] = true);
  });
}

原理：

  • 利用对象属性不可重复的特性
  • 通过hasOwnProperty检查存在性

优点：

  • 时间复杂度O(n)
  • 兼容性好

缺点：

  • 所有元素会被转为字符串（如数字1和字符串"1"会被视为相同）
  • 无法处理复杂对象

性能比较

方法时间复杂度适用场景
SetO(n)ES6环境，简单数据类型
filterO(n²)小数据量，兼容性要求
reduceO(n²)函数式编程偏好
ObjectO(n)兼容性要求高

总结建议

  1. 现代项目优先使用Set方法，简洁高效
  2. 需要兼容老浏览器时考虑Object方法
  3. 小数据量可使用filter方法增强可读性
  4. 注意各种方法对对象类型元素的处理差异

提示：对于包含复杂对象的数组去重，可能需要结合JSON.stringify或自定义比较函数实现更精确的去重逻辑。

到此这篇关于js篇-数组去重常见四种方法的文章就介绍到这了,更多相关js 数组去重内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论