ES6扩展：Set数据结构

ES6扩展：Set数据结构

一、Set的定义
数组：一系列有序的数据集合
Set ：一系列无序、没有重复值的数据集合

const s = new Set();
s.add(1);   // Set(1) {1}
s.add(2);   //Set(2) {1, 2}
s.add(1);   //Set(2) {1, 2}    //没有重复值

Set 没有下标去标示每一个值，所以 Set 是无序的，也不能像数组那样通过下标去访问 Set 的成员
二、Set 实例的方法
1、add 添加某个值，返回 Set 结构本身。

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

2、has 返回一个布尔值，表示该值是否为Set的成员。

console.log(s.has(1));   //tuue

3、delete 删除某个值，返回一个布尔值，表示删除是否成功。

s.delete(3);

4、clear 清除所有成员，没有返回值。

s.clear();

5、forEach 可进行遍历：按照成员添加进集合的顺序遍历

let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key , value))
//1 1
//4 4
//9 9

forEach方法的参数就是一个处理函数。依次为键值、键名、集合本身（上例省略了该参数）。这里需要注意，Set 结构的键名就是键值（两者是同一个值），因此第一个参数与第二个参数的值永远都是一样的。
另外，forEach方法还可以有第二个参数，表示绑定处理函数内部的this对象。
三、Set 实例的属性
size :返回长度
console.log(s.size);
四、Set 构造函数的参数
1、数组

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

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

console.log(new Set('hi'));//Set(2) {'h', 'i'}

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

const s = new Set([1, 2, 1]);
console.log(new Set(s) === s);
console.log(s);
//false  
// Set(2) {1, 2}   相当于进行了复制

五、Set 的注意事项
1、判断重复的方式
Set 对重复值的判断基本遵循严格相等（===）
但是对于 NaN 的判断与 === 不同，Set 中 NaN 等于 NaN

console.log(NaN === NaN);   //false
const s = new Set([NaN, 2, NaN]);
console.log(s);  //Set(2) {NaN, 2}   Set 中 NaN 等于 NaN

2、什么时候使用 Set
① 数组或字符串去重时
② 不需要通过下标访问，只需要遍历时
③ 为了使用 Set 提供的方法和属性时（add delete clear has forEach size 等）
六、Set 的应用
1、数组去重

//[1, 2, 1];
const s = new Set([1, 2, 1]);
console.log(s);
//将s再次成为数组
//1）s.forEach进行遍历 
//2)展开运算符console.log([...new Set([1, 2, 1])]);  //(2) [1, 2]

2、字符串去重

//'abbacbd';
const s = new Set('abbacbd');
console.log([...s].join(''));   //先转化为数组，再使用join方法
console.log(s);   //abcd
//一步到位 
console.log([...new Set('abbacbd')].join(''));

3、存放 DOM 元素

const s = new Set(document.querySelectorAll('p'));
s.forEach(function (elem) {
  // console.log(elem);
  elem.style.color = 'red';
  elem.style.backgroundColor = 'yellow';
});