【js数组去重方法】在JavaScript开发中，数组去重是一个常见的需求。当处理数据时，可能会出现重复的元素，影响后续的数据处理或展示效果。因此，掌握多种数组去重的方法是非常有必要的。以下是一些常用且高效的去重方式，并以表格形式进行总结。
常见的JS数组去重方法总结
| 方法名称 | 说明 | 是否保留顺序 | 使用ES6特性 | 适用场景 |
| `Set` + `Array.from()` | 利用`Set`的自动去重特性，将数组转为`Set`后重新转为数组 | 是 | ✅ | 简单快速，适合基础去重 |
| `filter` + `indexOf` | 通过遍历数组，检查每个元素是否已经存在 | 是 | ❌ | 简单易懂，兼容性好 |
| `reduce` | 通过累加器逐步构建新数组，避免重复项 | 是 | ✅ | 适合复杂逻辑处理 |
| `includes` + `forEach` | 遍历原数组，使用`includes`判断是否已存在 | 是 | ✅ | 代码清晰，可读性强 |
| `Object.keys` | 将数组元素作为对象的键，利用对象的唯一性去重 | 否 | ✅ | 适用于字符串或数字数组 |
| `JSON.stringify` + `Set` | 先将数组转为JSON字符串，再利用`Set`去重，最后还原 | 否 | ✅ | 可处理对象数组（需注意顺序） |
示例代码
使用 `Set`
```javascript
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5
```
使用 `filter` + `indexOf`
```javascript
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(uniqueArr); // [1, 2, 3, 4, 5
```
使用 `reduce`
```javascript
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.reduce((acc, item) => {
if (!acc.includes(item)) acc.push(item);
return acc;
}, []);
console.log(uniqueArr); // [1, 2, 3, 4, 5
```
使用 `Object.keys`
```javascript
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = Object.keys(arr.reduce((obj, item) => {
obj[item] = true;
return obj;
}, {}));
console.log(uniqueArr); // ["1", "2", "3", "4", "5"
```
总结
不同的去重方法各有优劣，选择合适的方式取决于具体的应用场景和性能要求。对于现代浏览器环境，推荐优先使用`Set`或`reduce`等ES6方法；而对于需要兼容旧版浏览器的情况，可以采用`filter`结合`indexOf`的方式。在实际开发中，合理选择去重方式能够提升代码效率与可维护性。