- 在ES6之前，我们存储数据的结构主要有两种：数组、对象。
- 在ES6中新增了另外两种数据结构：Set、Map，以及它们的另外形式WeakSet、WeakMap。
Set和WeakSet
Set的使用
- Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复。
- 创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）：
- 可以发现Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重。
//通过new关键字创建
const set1 = new Set();
set1.add(1)
set1.add(2)
set1.add(2)
set1.add({name:13})
console.log(set1); //Set(3) { 1, 2, { name: 13 } }
//根据数组创建set对象
const set2 = new Set([1,2,3,4,5,5])
console.log(set2); //Set(5) { 1, 2, 3, 4, 5 }
//将set转变为数组
const newArray1 = [...set2]
console.log(newArray1);
const newArray2 = Array.from(set2)
console.log(newArray2);
Set的常见属性和方法
- size：返回Set中元素的个数；
method：
- add(value)：添加某个元素，返回Set对象本身；
- delete(value)：从set中删除和这个值相等的元素，返回boolean类型；
- has(value)：判断set中是否存在某个元素，返回boolean类型；
- clear()：清空set中所有的元素，没有返回值；
- forEach(callback, [, thisArg])：通过forEach遍历set；
- Set是支持for of的遍历的。
WeakSet的使用
- 和Set类似的另外一个数据结构称之为WeakSet，也是内部元素不能重复的数据结构。
- 和Set的区别
区别一：WeakSet中只能存放对象类型，不能存放基本数据类型；
区别二：WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收（弱引用可以理解为有地址指向对象，但是对象依然能够被销毁）；
const wset = new WeakSet()
const obj1 = {
name:"zs",
age:14
}
const obj12 = {
name:"zsss",
age:142
}
wset.add(10) //报错：invalid val used
wset.add(obj1)
wset.add(obj12)
console.log(wset);
WeakSet常见的方法：
- add(value)：添加某个元素，返回WeakSet对象本身；
- delete(value)：从WeakSet中删除和这个值相等的元素，返回boolean类型；
- has(value)：判断WeakSet中是否存在某个元素，返回boolean类型；
const wset = new WeakSet();
const obj1 = {
name: "zs",
age: 14,
};
const obj2 = {
name: "zsss",
age: 142,
};
const obj3 = {
name: "zsss",
age: 142,
};
// wset.add(10)
wset.add(obj1);
wset.add(obj2);
console.log(wset.has(obj2)); //true
console.log(wset.has(obj3)); //false，注意
wset.delete(obj2);
console.log(wset.has(obj2)); //false
WeakSet的应用
- 阻止其他的对象的借用调用
const wset = new WeakSet();
class Person {
constructor() {
wset.add(this); //将创建的对象保存到weakset中
}
running() {
//每次调用该方法先判断weakset中是否有保证该对象，保证只有Person类的子对象可以调用
if (!wset.has(this)) {
throw new Error("不能通过其他类型的对象调用running方法");
}
console.log("running", this);
}
}
Map和WeakMap
Map的使用
- Map用于存储映射关系。
之前我们可以使用对象来存储映射关系，有什么区别呢？
对象存储映射关系只能用字符串（ES6新增了Symbol）作为属性名（key）；某些情况下我们可能希望通过其他类型作为key，比如对象，这个时候会自动将对象转成字符串来作为key；那么我们就可以使用Map：
const obj = { name: "zs", age: 18, height: 1.88 };
const obj2 = { name: "zsss", age: 11, height: 1.55 };
const map1 = new Map();
map1.set(obj, "abc");
map1.set(obj2, "bcd");
console.log(map1);
/* Map(2) {
{ name: 'zs', age: 18, height: 1.88 } => 'abc',
{ name: 'zsss', age: 11, height: 1.55 } => 'bcd'
} */
console.log(map1.get(obj)); //abc
Map的常用属性方法
- size：返回Map中元素的个数；
Map常见的方法：
- set(key, value)：在Map中添加key、value，并且返回整个Map对象；
- get(key)：根据key获取Map中的value；
- has(key)：判断是否包括某一个key，返回Boolean类型；
- delete(key)：根据key删除一个键值对，返回Boolean类型；
- clear()：清空所有的元素；
- forEach(callback, [, thisArg])：通过forEach遍历Map；
- Map也可以通过for of进行遍历。
WeakMap的使用
- 和Map区别
区别一：WeakMap的key只能使用对象，不接受其他的类型作为key；
区别二：WeakMap的key对对象想的引用是弱引用，如果没有其他引用引用这个对象，那么GC可以回收该对象；
WeakMap的常用属性方法：
- set(key, value)：在Map中添加key、value，并且返回整个Map对象；
- get(key)：根据key获取Map中的value；
- has(key)：判断是否包括某一个key，返回Boolean类型；
- delete(key)：根据key删除一个键值对，返回Boolean类型；
WeakMap的应用 ：
- vue3响应式原理
//WeakMap(fkey(对象)：value.}):key是一个对象，弱引用
const targetMap = new WeakMap();
function getDep(target, key) {
//·1.根据对象(target)取出对应的Map对象
let depsMap = targetMap.get(target);
if (!depsMap) {
depsMap = new Map();
targetMap.set(target, depsMap);
//·2.取出具体的dep对象
let dep = depsMap.get(key);
if (!dep) dep = new Dep();
depsMap.set(key, dep);
}
return dep;
}
网友评论