### JavaScript 数组去重方法
在 JavaScript 中,数组去重是常见的需求。以下是几种常见的数组去重方法:
#### 1. 使用双层循环与 `splice` 方法
通过双层循环检查数组中的重复元素,并使用 `splice` 方法删除重复项。这种方法会改变原数组[^3]。
```javascript
function noRepeat9(arr) {
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr.length; j++) {
if (arr[i] == arr[j] && i != j) {
arr.splice(j, 1);
j--; // 调整索引以避免跳过元素
}
}
}
return arr;
}
var arr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 4, 3, 1, 2, 6, 6, 6, 6];
console.log(noRepeat9(arr)); // [1, 2, 3, 4, 5, 6]
```
#### 2. 使用 `Set` 数据结构
`Set` 是 ES6 引入的一种数据结构,它只允许存储唯一的值。通过将数组转换为 `Set` 再转回数组,可以轻松实现去重[^2]。
```javascript
function uniqueUsingSet(arr) {
return [...new Set(arr)];
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(uniqueUsingSet(arr)); // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]
```
需要注意的是,`Set` 方法无法正确处理对象类型的去重,例如空对象 `{}`。
#### 3. 使用 `filter` 和 `indexOf`
通过 `filter` 方法结合 `indexOf`,可以筛选出数组中第一次出现的元素,从而实现去重。
```javascript
function uniqueUsingFilter(arr) {
return arr.filter(function (item, index) {
return arr.indexOf(item) === index;
});
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a'];
console.log(uniqueUsingFilter(arr)); // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a"]
```
#### 4. 使用 `reduce` 方法
利用 `reduce` 方法遍历数组,并将未重复的元素添加到结果数组中。
```javascript
function uniqueUsingReduce(arr) {
return arr.reduce((result, item) => {
if (!result.includes(item)) {
result.push(item);
}
return result;
}, []);
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a'];
console.log(uniqueUsingReduce(arr)); // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a"]
```
#### 5. 使用 `Map` 数据结构
`Map` 可以用于存储键值对,通过判断键是否存在来实现去重。
```javascript
function uniqueUsingMap(arr) {
const map = new Map();
return arr.filter(item => {
const key = typeof item + JSON.stringify(item);
if (!map.has(key)) {
map.set(key, true);
return true;
}
return false;
});
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(uniqueUsingMap(arr)); // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]
```
这种方法能够更好地处理复杂数据类型,如对象和数组[^2]。
---
### 注意事项
- `Set` 方法虽然简洁,但对于对象类型的去重效果有限。
- 如果需要兼容旧版浏览器,可以使用双层循环或 `filter` 方法。
- 对于大型数组,性能可能会成为问题,需根据实际情况选择合适的方法。
---