Set的基本使用

• 在ES6之前，我们存储数据的结构主要有两种：数组、对象。
• 在ES6中新增了另外两种数据结构：Set、Map，以及它们的另外形式WeakSet、WeakMap。

Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复。

• 创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）：
• 我们可以发现Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重。

1.ES6新增数据结构Set

const set = new Set();
set.add(10);
set.add(20);
set.add(30);
set.add(10);
set.add(30);
console.log(set); //Set(3) {10, 20, 30}

2.对数组arr进行去重

const arr = [10, 20, 30, 20, 10];

//解决方式：
//1.把数组转换为Set数据结构，则会去掉重复的元素
const arrSet = new Set(arr);
// 2.把Set数据结构转换为数组
// 方法一：
const newArr = Array.from(arrSet);
// 方法二：
const newArr1 = [...arrSet];
console.log(newArr); // [ 10, 20, 30 ]
console.log(newArr1); // [ 10, 20, 30 ]

3.Set的属性：

• size Set数据结构的元素个数

4.Set的方法

• add(item) 向Set数据结构添加元素
• delete(item) 从Set数据结构删除元素
• has(item) //查询Set数据结构是否包含某个元素，返回一个布尔值
• clear() //清空Set数据结构

const set1 = new Set();

//给set1添加元素
set1.add(10);
set1.add({});
set1.add("aaa");
console.log(set1); //Set(3) {10, {}, 'aaa'}

//查看set1中的元素个数
console.log(set1.size) // 3

//查看set1是否包含aaa元素
console.log(set1.has("aaa")); //true

//删除aaa元素
set1.delete("aaa");
console.log(set1); //Set(3) {10, {}}

//清空set1
set1.clear();
console.log(set1); //Set(0) {}

5.Set数据结构是支持遍历的

const set = new Set();
set.add(10);
set.add({});
set.forEach(item => {
  console.log(item)
})
// 10
// {}

const set = new Set();
set.add(10);
set.add({});
for(let item of set) {
  console.log(item)
}
// 10
// {}

WeakSet的基本使用

• ES6新增了数据类型WeakSet
• WeakSet数据结构只能存放对象类型
• WeakSet数据结构对对象元素的引用是弱引用, 如果对元素对象的其他强引用别取消，只剩下WeakSet对此对象进行弱引用，则此对象会被GC回收
• WeakSet数据结构不能被遍历,也不能被解构

const w = new WeakSet();
const obj = {
 name: "why",
 age: 18,
};
w.add(obj);
console.log(w); //WeakSet { <items unknown> }

WeakSet常见的方法：

• add(value)：添加某个元素，返回WeakSet对象本身；
• delete(value)：从WeakSet中删除和这个值相等的元素，返回boolean类型；
• has(value)：判断WeakSet中是否存在某个元素，返回boolean类型；

const w = new WeakSet();
const obj = {
  name: "why",
  age: 18,
};
w.add(obj);
//w中是否包含obj这个对象
console.log(w.has(obj)); //true
//从w中删除obj对象
console.log(w.delete(obj)); //true
console.log(w.has(obj)); // false
console.log(w); // WeakSet { <items unknown> }

WeakSet的应用场景

const pWeakSet = new WeakSet();
class Person {
  constructor() {
    pWeakSet.add(this);
  }
  running() {
    if (!pWeakSet.has(this)) {
      throw new Error("running方法不能被非构造函数Person创建出来的对象调用");
    }
    console.log("running");
  }
}
const p = new Person();
p.running(); // running
p.running.call({ name: "why" }); //running方法不能被非构造函数Person创建出来的对象调用

非常感谢王红元老师的深入JavaScript高级语法让我学习到很多 JavaScript 的知识