JavaScript 数组与对象去重实战：Set、Filter 与 Reduce 详解
本文介绍 JavaScript 中去除数组和对象重复项的多种实现方式。通过 Set 构建唯一值集合，利用 filter 配合 indexOf 筛选首次出现元素，以及使用 reduce 结合 includes 累积结果。针对对象，演示如何基于属性值生成唯一键值对，涵盖 for...in 与 Object.keys 两种遍历思路，帮助开发者根据场景选择最优方案。
前言
在 JavaScript 开发中，处理数据时经常需要清理冗余信息。针对数组和对象中的重复元素，有多种技术手段可以实现去重操作。以下将详细解析几种常用且高效的实现路径。
去除数组中的重复项
方法一：使用 Set
利用 Set 数据结构是清理数组重复元素最为便捷且性能较高的方案。Set 本身仅存储唯一值，它接收一个具备迭代接口的对象（如数组）作为输入，并返回一个仅包含不重复元素的新数组实例。具体实现如下：
javascriptCopy code
const arr = [1, 2, 3, 3, 4, 5, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]方法二：使用 filter 和 indexOf
通过组合 filter 方法与 indexOf 方法，可以筛选出数组中每个元素第一次出现的位置，从而剔除后续重复项。实现逻辑如下：
javascriptCopy code
const arr = [1, 2, 3, 3, 4, 5, 5];
const uniqueArr = arr.filter((item, index) => {
return arr.indexOf(item) === index;
});
console.log(uniqueArr); // [1, 2, 3, 4, 5]方法三：使用 reduce 和 includes
借助 reduce 方法遍历数组，并结合 includes 检查当前元素是否已存在于累加器中，若不存在则追加，以此构建无重复的新数组。具体代码如下：
javascriptCopy code
const arr = [1, 2, 3, 3, 4, 5, 5];
const uniqueArr = arr.reduce((prev, cur) => {
if (!prev.includes(cur)) {
prev.push(cur);
}
return prev;
}, []);
console.log(uniqueArr); // [1, 2, 3, 4, 5]去除对象中的重复项
方法一：使用 for…in 和 hasOwnProperty
通过 for...in 循环遍历对象的所有可枚举属性，并借助 hasOwnProperty 方法确认该属性是否为对象自身的属性（而非继承属性）。在此基础上，可根据属性值构建去重后的新对象。示例如下：
javascriptCopy code
const obj = {
a: 1,
b: 2,
c: 3,
d: 3,
e: 4,
f: 4
};
const uniqueObj = {};
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
uniqueObj[obj[key]] = key;
}
}
console.log(uniqueObj); // { '1': 'a', '2': 'b', '3': 'c', '4': 'e' }方法二：使用 Object.keys 和 reduce
首先调用 Object.keys 获取对象的所有键名集合，随后利用 reduce 方法遍历这些键。在累加过程中，检查目标值是否已存在于结果对象中，若未存在则将其存入，最终得到去重后的对象。实现方式如下：
javascriptCopy code
const obj = {
a: 1,
b: 2,
c: 3,
d: 3,
e: 4,
f: 4
};
const uniqueObj = Object.keys(obj).reduce((prev, key) => {
const value = obj[key];
if (!prev.hasOwnProperty(value)) {
prev[value] = key;
}
return prev;
}, {});
console.log(uniqueObj); // { '1': 'a', '2': 'b', '3': 'c', '4': 'e' }上述内容涵盖了处理数组与对象去重的几种典型方案。在实际项目中，开发者应依据具体的数据结构、性能要求及代码可读性偏好，选择最合适的去重策略。
总结
本文介绍了 JavaScript 中去除数组或对象重复项的相关技巧。如需了解更多关于 JS 数据处理的实用方法，建议查阅本站过往文章或继续阅读后续系列内容。感谢支持。
JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组？
2026-11-05 09:59:18