首页 > 文章 > 前端

JavaScript数组去重的10种高效方法

时间：2025-11-24 22:18:55 419浏览收藏

在JavaScript开发中，数组去重是一项常见且重要的任务，尤其是在处理大量数据或用户输入时。本文深入探讨了JavaScript数组去重的十大实用方法，旨在帮助开发者根据不同场景选择最佳方案。从ES6简洁的Set去重，到兼容性好的filter+indexOf，再到灵活的自定义函数，每种方法都有其独特的优势和适用场景。本文不仅涵盖了基础类型数组的去重技巧，也提供了处理复杂对象数组的策略，例如利用Map、JSON.stringify以及Symbol标记等高级技巧。无论你是前端新手还是经验丰富的开发者，都能从中找到适合自己的JavaScript数组去重方案，提升代码效率和质量。

答案：JavaScript数组去重有十种常用方法。1. Set去重最简洁，适用于基本类型；2. filter+indexOf兼容性好但性能差；3. reduce+includes逻辑清晰但慢；4. for循环+对象键值性能高但仅限基本类型；5. Map可处理复杂键；6. 双重循环暴力对比适合小数组；7. sort排序后去重需注意顺序改变；8. JSON.stringify用于简单对象但受属性顺序影响；9. Symbol标记避免污染但慎用第三方数据；10. 自定义函数按字段灵活去重。基本类型推荐Set，对象数组建议Map或自定义函数。

JavaScript中数组去重的十种高效方法

JavaScript中数组去重是开发中常见需求，尤其在处理大量数据或用户输入时。虽然ES6提供了更简洁的方案，但根据场景不同，多种方法各有优势。以下是十种高效且实用的数组去重方式，涵盖基础类型与引用类型，帮助你在不同情况下选择最优解。

1. 利用Set去重（最常用）

ES6引入的Set结构自动去除重复值，结合扩展运算符可快速实现去重。

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

适用于基本类型数组，代码简洁、性能优秀，推荐日常使用。

2. filter + indexOf（基础兼容方案）

通过filter遍历数组，利用indexOf返回第一个匹配项的索引进行比对。

const unique = arr.filter((item, index) => arr.indexOf(item) === index);

兼容性好，适合老项目，但对长数组性能较差，因indexOf需多次遍历。

3. reduce + includes（逻辑清晰）

使用reduce累积唯一值，每次判断新数组是否已包含当前元素。

const unique = arr.reduce((acc, item) => !acc.includes(item) ? [...acc, item] : acc, []);

语义明确，适合初学者理解，但includes同样存在性能瓶颈。

4. for循环 + 对象键值（传统高效法）

利用对象属性不可重复的特性，将数组元素作为key存储。

let obj = {}, result = [];
for (let i = 0; i   if (!obj[arr[i]]) {
    obj[arr[i]] = true;
    result.push(arr[i]);
  }
}

性能较好，尤其适合字符串或数字类型，但注意key会转为字符串，可能引发隐式转换问题。

5. Map记录出现状态（支持复杂类型）

Map可准确区分类型，避免对象键字符串化的问题。

const map = new Map(), result = [];
for (let item of arr) {
  if (!map.has(item)) {
    map.set(item, true);
    result.push(item);
  }
}

比普通对象更安全，适用于需要精确类型判断的场景。

6. 双重for循环（原始但可控）

外层遍历每个元素，内层检查其是否已在结果数组中。

let result = [];
for (let i = 0; i   let isDuplicate = false;
  for (let j = 0; j     if (arr[i] === result[j]) {
      isDuplicate = true;
      break;
    }
  }
  if (!isDuplicate) result.push(arr[i]);
}

逻辑直观，便于调试和定制比较规则，但时间复杂度高，仅适合小数组。

7. sort后相邻比较（节省空间）

先排序，再遍历比较相邻元素是否相同。

const sorted = arr.slice().sort();
let result = [sorted[0]];
for (let i = 1; i if (sorted[i] !== sorted[i-1]) result.push(sorted[i]);
}

减少额外数据结构使用，但改变了原顺序，且只适合基本类型。

8. JSON.stringify去重对象数组

针对对象数组，可通过序列化后去重。

const seen = new Set();
const unique = arr.filter(item => {
  const k = JSON.stringify(item);
  if (seen.has(k)) return false;
  seen.add(k);
  return true;
});

可用于简单对象，但注意属性顺序影响结果，复杂嵌套或含函数时不适用。

9. 利用Symbol作为标记（高级技巧）

为每个对象添加唯一Symbol属性标记是否已添加。

const seen = Symbol('seen');
const result = [];
for (let item of arr) {
  if (!item[seen]) {
    result.push(item);
    item[seen] = true;
  }
}

适合对象数组且不修改原有数据结构，但会临时污染对象，慎用于第三方数据。

10. 自定义比较函数（灵活控制）

对于复杂对象，可指定字段或条件判断是否重复。

function uniqueBy(arr, keyFn) {
  const seen = new Set();
  return arr.filter(item => {
    const key = keyFn(item);
    if (seen.has(key)) return false;
    seen.add(key);
    return true;
  });
}
// 使用：uniqueBy(users, user => user.email);

高度灵活，适合按ID、邮箱等字段去重，是处理业务数据的理想方式。

基本上就这些。选择哪种方法取决于数据类型、性能要求和环境兼容性。多数情况下，Set是最优解；涉及对象时，建议结合Map或自定义函数处理。掌握这些方法，能应对绝大多数去重场景。

以上就是《JavaScript数组去重的10种高效方法》的详细内容，更多关于数组去重的资料请关注golang学习网公众号！

数组去重