ES6中的Set数据结构

Set 是什么

什么是 Set

• 类似 [1, 2] 这种是数组，数组是一系列有序的数据集合。
• Set 是一系列无序，没有重复值的数据集合。

理解 Set

// 数据的形式有两种,字面量与实例化构造函数
console.log([1, 2, 1]); // [1, 2, 1]
console.log(new Array(1, 2, 1)); // [1, 2, 1]

// Set 只有实例化构造函数的形式
const s = new Set();
s.add(1);
console.log(s); // Set(1) {1}
s.add(2);
console.log(s); // Set(2) {1, 2}
s.add(1);
console.log(s); // Set(2) {1, 2} 注意，Set 不能有重复成员，添加了也无效

归纳：

• Set 不能有重复成员，添加了也无效
• Set 没有下标去标示每一个值，所以 Set 是无序的，也不能像数组那样通过下标去访问 Set 的成员

Set 实例的方法和属性

方法

1. add

增加成员

const s = new Set();
s.add(1);
console.log(s); // Set(1) {1}
s.add(2).add(3);
console.log(s); // Set(3) {1, 2, 3}

2. has

判断有无含有某个成员

const s = new Set();
s.add(1);
console.log(s.has(1)); // true
console.log(s.has(2)); // false

3. delete

删除某个指定成员

const s = new Set();
s.add(1).add(2); // 此时为 Set(2) {1, 2}
s.delete(2);
console.log(s); // Set(1) {1}

注意: 使用 delete 删除不存在的成员，什么都不会发生，也不会报错

4. clear

删除所有成员

const s = new Set();
s.add(1).add(2).add(3); // 此时为 Set(3) {1, 2, 3}
s.clear();
console.log(s); // Set(0) {}

5. forEach

之前说过 Set 是无序的，不能通过下标的方法获取到成员，可通过 forEach 方法解决。

const s = new Set();
s.add(1).add(2).add(3); // 此时为 Set(3) {1, 2, 3}
s.forEach((value, key, set) => {
	console.log(value); // 1 2 3
});

注意： Set 中使用 forEach 的 value = key，且按照成员添加进集合的顺序遍历

属性

size

类似于数组的length属性

const s = new Set();
s.add(1).add(2).add(3); // 此时为 Set(3) {1, 2, 3}
console.log(s.size); // 3

Set 构造函数的参数

1. 数组

最常用

const arg = [1, 2, 1];
const s = new Set(arg); // Set(2) {1, 2}

2. 字符串、arguments、NodeList、Set 等

// 字符串
const str = 'hi';
const s = new Set(str); // Set(2) {"h", "i"}

// arguments
function func() {
  console.log(new Set(arguments));
}
func(1, 2, 3, 4); // Set(4) {1, 2, 3, 4}

// NodeList
<P>1</P>
<P>2</P>
<P>3</P>
console.log(new Set(document.querySelectorAll('p'))); // Set(3) {p, p, p}

// Set
const s = new Set([1, 2, 1]); // s 为Set(2) {1, 2}
console.log(new Set(s)); // Set(2) {1, 2}
console.log(new Set(s) === s); // false 两者只是长得一样，算是一个复制的过程

注意事项

1.判断重复的方式

Set 怎么判断有无重复的成员？

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

重点： Set 对重复值的判断基本遵循严格相等（===），但是对于 NaN 的判断与 === 不同，Set 中 NaN 等于 NaN

2.什么时候使用 Set

1.数组或者字符串去重时

2.不需要通过下标访问，只需要遍历时

3.为了使用Set提供的方法和属性时（add delete clear has forEach size 等）

应用

1.数组去重

const arr = [1, 2, 1];
console.log([...new Set(arr)]); // [1, 2]

2.字符串去重

const str = 'abbacbd';
const s = new Set(str); // s 为 Set(4) {"a", "b", "c", "d"}，接下来可先转为数组，再通过join()转为字符串
const arr_s = [...s]; // arr_s 为 ["a", "b", "c", "d"]
console.log(arr_s.join('')); // abcd

// 这样一步到位的写就可以
console.log([...new Set(str)].join('')); 

3.操作DOM元素

//html
<p>1</p>
<p>2</p>
<p>3</p>

// script
const s = new Set(document.querySelectorAll('p'));
s.forEach(ele => {
	ele.style.color = 'red';
	ele.style.backgroundColor = 'yellow';
});

练习题

题目：去除字符串"study hard and make and progress every day study"中重复的单词，最终输出为"study hard and make progress every day"。

解答：

let str = "study hard and make and progress every day study";
const str_arr = [...new Set(str.split(' '))];
console.log(str_arr.join(' ')); // "study hard and make progress every day"