JavaScript数组去重深入理解：ES6 Set 方法解析

"关于JavaScript数组去重的理解与实践" 在JavaScript中，数组去重是一个常见的需求，尤其是在处理数据集合时。本文将汇总几种常见的数组去重方法，特别是ES6引入的新特性Set的使用。 一、ES6中的`new Set`方式 `Set`是ES6新增的数据结构，它类似于数组，但所有成员都是唯一的，不允许重复。Set的一个显著优点是它自动去重，这使得它成为处理数组去重的理想选择。下面是一个示例： ```javascript const list1 = [1, 2, 3, 7, 11, 56, 3, 2, 4, 5]; const list2 = new Set(list1); ``` 转换后的`list2`是一个Set对象，不再包含重复的值。然而，我们通常需要一个数组形式的结果，这时可以使用`Array.from()`方法： ```javascript const list3 = Array.from(list2); ``` 这种方式适用于现代浏览器，不考虑旧版本浏览器的兼容性。值得注意的是，`Set`无法去除重复的函数和对象，因为它们被视为不同的引用。 关于`Array.from()`的扩展，它可以从类似数组或可迭代对象创建新的数组实例，并可选地提供一个映射函数来处理每个元素： ```javascript const list4 = Array.from('name', arg => arg + 12); console.log(list4); // ['n12', 'a12', 'm12', 'e12'] ``` 在这里，`'name'`是一个伪数组，每个字符被映射并添加了数字12。 二、`Set`的另一种写法 除了直接使用`new Set`，还可以结合扩展运算符(`...`)来实现数组去重： ```javascript const list20 = [5, 3, 5, 5, 6, 37, 22, 22]; const list21 = [...new Set(list20)]; ``` 这种方式同样简洁且高效。 三、其他去重方法 1. 使用`filter()`方法： ```javascript const list5 = [1, 2, 3, 3, 4, 4, 5].filter((item, index, array) => array.indexOf(item) === index); ``` 这种方法依赖于`indexOf()`，性能相对较差，因为每次检查都需要遍历整个数组。 2. 利用`reduce()`方法： ```javascript const list6 = [1, 2, 3, 3, 4, 4, 5].reduce((acc, cur) => acc.includes(cur) ? acc : [...acc, cur], []); ``` `reduce()`方法将数组累积成一个单一值，这里我们用它来构建一个新数组，避免重复。 总结 JavaScript数组去重有多种方法，其中`Set`提供了最简单且高效的解决方案。在实际项目中，应根据兼容性和性能需求选择合适的方法。面试时，了解并能解释这些方法将展现你对JavaScript基础知识的掌握程度。