javascript利用set进行数组去重的方法是什么

# JavaScript利用Set进行数组去重的方法是什么

在JavaScript开发中，数组去重是一个常见的需求。随着ES6的普及，使用`Set`数据结构实现数组去重因其简洁高效而广受欢迎。本文将详细介绍这种方法及其原理，并对比传统方案的优劣。

## 一、Set数据结构的特性

`Set`是ES6引入的新的数据结构，它类似于数组，但有一个关键区别：**Set中的元素都是唯一的**。当尝试向Set中添加重复值时，只有第一个值会被保留。

```javascript
const uniqueSet = new Set();
uniqueSet.add(1);
uniqueSet.add(2);
uniqueSet.add(1); // 重复添加会被忽略

console.log(uniqueSet); // Set(2) {1, 2}

二、基本去重实现方法

利用Set的特性，数组去重可以简化为一行代码：

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];

console.log(uniqueArr); // [1, 2, 3, 4, 5]

实现步骤解析：

1. new Set(arr) 将数组转换为Set，自动去除重复项
2. ...扩展运算符将Set转换回数组

三、与传统方法的对比

1. 双重循环法

function unique(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;
}

缺点：时间复杂度O(n²)，性能较差

2. filter+indexOf法

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

缺点：indexOf需要遍历数组，大数据量时效率低

3. Set方案的优势

• 时间复杂度：O(n)
• 代码简洁度：单行实现
• 可读性：语义明确

四、特殊场景处理

1. 对象数组的去重

Set使用严格相等（===）比较，对象即使内容相同也会被视为不同：

const objArr = [{a:1}, {a:1}];
[...new Set(objArr)]; // 仍然包含两个对象

解决方案：使用JSON序列化（有局限性）

const uniqueObjArr = [...new Set(objArr.map(JSON.stringify))].map(JSON.parse);

2. 包含NaN的情况

Set能正确处理NaN去重（NaN === NaN为false，但Set认为它们是相同的）

const nanArr = [NaN, NaN, 1];
[...new Set(nanArr)]; // [NaN, 1]

五、性能测试对比

通过jsPerf测试（10000个元素的数组）： - Set方案：约0.5ms - 双重循环：约250ms - filter方案：约15ms

六、浏览器兼容性

现代浏览器（Chrome 38+、Firefox 13+、Edge 12+、Safari 8+）均支持Set。对于老版本浏览器，需要使用Babel等工具转译。

七、完整封装函数

function uniqueArray(arr) {
  if (!Array.isArray(arr)) {
    throw new TypeError('Expected an array');
  }
  return [...new Set(arr)];
}

// 使用示例
uniqueArray([1, 2, 2, 'a', 'a']); // [1, 2, 'a']

八、总结

使用Set进行数组去重是ES6带来的高效方案，相比传统方法具有明显优势： 1. 代码简洁：一行代码即可实现 2. 性能优越：线性时间复杂度 3. 语义清晰：直观表达去重意图

建议在支持ES6的环境下优先采用此方案，对于复杂对象去重需要结合具体情况处理。 “`