本文详解 ES6 新增的 Set 数据结构，介绍其无重复成员的特性。内容涵盖通过构造函数或数组参数创建 Set、利用扩展运算符和 Array.from 实现数组去重，以及 add、delete、has、clear 等操作方法。同时解析 keys、values 和 entries 三种遍历器的用法与区别，帮助开发者高效掌握 Set 的核心功能。
ES6 Set 数据结构概述
ES6 中的 Set 数据结构
ES6 引入了一种名为 Set 的新数据结构，其形态类似于数组。Set 最显著的特征是内部成员不允许重复，这一特性使其成为实现数组去重的便捷工具。Set 本质上是一个构造函数，需通过 new Set() 语法来实例化创建。
Set 的创建与初始化
let arr1 = ['Hello', 'World', 'ES6']
let set1 = new Set()
arr1.forEach(type => {
set1.add(type)
})
首先通过 new Set() 创建一个空的 Set 实例。接着使用 forEach 方法遍历数组 arr1，并将数组中的每一项通过 Set.prototype.add 方法逐个添加至 Set 结构中。
在创建 Set 时，可以直接传入一个数组作为参数。
let arr2 = [1,2,3,4,1,5,2]
let set2 = new Set(arr2)
for (let type of set2) {
console.log(type)
}
// 1
// 2
// 3
// 4
// 5
上述代码中，new Set() 接收一个数组作为初始化参数。随后使用 for...of 循环遍历 set2。由于 Set 结构自动过滤重复值，最终输出的结果为 1、2、3、4、5。
Set 在接收参数时不会进行类型转换。例如 new Set(5, '5') 会被视为两个独立的值，因为数字 5 和字符串 '5' 类型不同。
利用 Set 特性实现数组去重
利用 Set 实现数组去重
// 方法1
[...new Set([1,2,3,1,2])] // 1 2 3
// 方法2
Array.from(new Set([1,2,3,1,2])) // 1 2 3主要方法是将数组传入 new Set()，利用其成员唯一的特性去除重复项。最后可通过扩展运算符 (...) 或 ES6 提供的 Array.from() 方法，将类数组的 Set 对象转换回标准数组。
Set 的基本操作方法
- Set.prototype.add(value)：向 Set 中添加一个新成员，该方法返回 Set 结构本身，支持链式调用。
- Set.prototype.delete(value)：删除指定成员，返回布尔值。若删除成功返回 true，若成员不存在则返回 false。
- Set.prototype.has(value)：检查 Set 中是否存在指定成员，存在返回 true，不存在返回 false。
- Set.prototype.clear()：清空 Set 中的所有成员。
Set 的基本操作方法
let arr3 = [7,8,9]
let set3 = new Set(arr3)
set3.add(10)
set3.size() // 4
set3.delete(8)
set3.size() // 3
set3.clear() // 0
Set 的遍历方法
- keys()：返回键名的遍历器。
- values()：返回键值的遍历器。
- entries()：返回键值对的遍历器，以数组形式返回 [key, value]。
Set 的遍历器方法
let arr4 = ['javascript', 'vue', 'node.js', 'typescript']
let set4 = new Set(arr4)
// set.keys()
for (let k of set4.keys()) {
console.log(k)\
// javascript
// vue
// node.js
// typescript
}
// set.values()
for (ket v of set4.values()) {
console.log(v)
// 和上面的set4.keys() 遍历的结果一样
}
// set.entries()
for (let e of set3.entries()) {
console.log(e)
// ['javascript', 'javascript']
// ['vue', 'vue']
// ['node.js', 'node.js']
// ['typescript', 'typescript']
}
可以看出，keys() 和 values() 的遍历结果完全一致，因此在实际使用中两者无区别。entries() 遍历返回的是数组，包含 keys 和 values 的结果对。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。