JavaScript 常用数组去重方法及性能对比（附：扩展运算符...总结）

JavaScript 数组去重有多种方法，性能差异显著。

以下是常用方法及其性能对比：

1. ES6 Set（推荐）

javascript

// 最快，代码最简洁 function uniqueSet(arr) { return [...new Set(arr)]; // 或 Array.from(new Set(arr)) }

2. Filter + indexOf

javascript

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

3. Reduce

javascript

function uniqueReduce(arr) { return arr.reduce((acc, cur) => { if (!acc.includes(cur)) { acc.push(cur); } return acc; }, []); }

4. 双层循环

javascript

function uniqueDoubleLoop(arr) { const result = []; for (let i = 0; i < arr.length; i++) { let isDuplicate = false; for (let j = 0; j < result.length; j++) { if (arr[i] === result[j]) { isDuplicate = true; break; } } if (!isDuplicate) result.push(arr[i]); } return result; }

5. Object键值（仅字符串）

javascript

function uniqueObject(arr) { const obj = {}; const result = []; for (let i = 0; i < arr.length; i++) { if (!obj[arr[i]]) { obj[arr[i]] = true; result.push(arr[i]); } } return result; }

性能对比测试

javascript

// 生成测试数据 const testArray = []; for (let i = 0; i < 10000; i++) { testArray.push(Math.floor(Math.random() * 1000)); } // 性能测试函数 function testPerformance(fn, arr, name) { const start = performance.now(); fn([...arr]); // 避免修改原数组 const end = performance.now(); console.log(`${name}: ${(end - start).toFixed(2)}ms`); } // 测试 console.log('10000个元素的数组去重性能对比:'); testPerformance(uniqueSet, testArray, 'Set'); testPerformance(uniqueFilter, testArray, 'Filter'); testPerformance(uniqueReduce, testArray, 'Reduce'); testPerformance(uniqueDoubleLoop, testArray, '双层循环'); testPerformance(uniqueObject, testArray, 'Object键值');

性能排名（从快到慢）

1. Set- O(n) - 最快，代码最简洁

2. Object键值- O(n) - 较快，但仅适用于字符串或可转字符串的值

3. Filter + indexOf- O(n²) - 中等，代码简洁但性能随数据量下降

4. Reduce- O(n²) - 中等偏慢

5. 双层循环- O(n²) - 最慢

特殊场景考虑

处理复杂对象

javascript

// 对象数组去重（基于某个属性） function uniqueByKey(arr, key) { const map = new Map(); return arr.filter(item => { if (!map.has(item[key])) { map.set(item[key], true); return true; } return false; }); } // 使用JSON.stringify（性能较差） function uniqueObjects(arr) { const set = new Set(); return arr.filter(obj => { const str = JSON.stringify(obj); if (set.has(str)) return false; set.add(str); return true; }); }

保持顺序

大多数方法（Set、Filter、Reduce）都能保持原始顺序，但Object键值不保证顺序。

总结建议

最佳实践：

• 现代项目直接使用[...new Set(arr)]

• 需要考虑兼容性时，使用polyfill或lodash的_.uniq()

• 大型数组优先考虑时间复杂度O(n)的方法

扩展运算符（Spread Operator）...总结

关键特点总结

1. 浅拷贝：只复制一层，嵌套对象是引用

2. 可迭代性：只能用于可迭代对象（数组、字符串、Set、Map等）

3. 不可变操作：创建新对象/数组，不修改原数据

4. 顺序重要：在对象合并中，后面的属性覆盖前面的

5. ES6+特性：需要Babel转译以支持旧浏览器

实用示例

javascript

// 1. 快速数组合并去重 const uniqueMerge = [...new Set([...arr1, ...arr2])]; // 2. 带默认值的对象配置 const createConfig = (userConfig) => ({ port: 3000, host: 'localhost', ...userConfig }); // 3. 安全的删除属性 const removePassword = ({password, ...user}) => user; // 4. 数组插入元素 const insertAt = (arr, index, ...items) => [ ...arr.slice(0, index), ...items, ...arr.slice(index) ];

扩展运算符是现代JavaScript开发中最常用、最简洁的特性之一，极大简化了数组和对象的操作。