ES6:数据结构Set和Map&WeakSet和WeakMap
Posted 还是不会呀
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6:数据结构Set和Map&WeakSet和WeakMap相关的知识,希望对你有一定的参考价值。
ES6:数据结构Set和Map&WeakSet和WeakMap
在ES6以前存储数据的结构有两种:
数组
和
对象
。
在ES6中新增两种数据结构:Set
和Map
。
Set
Set里边的数据是不会重复的
基本使用
add方法添加
const set = new Set();
set.add(1);
set.add(2);
set.add(3);
set.add(2);
set.add(1);
console.log(set); // Set(4) { 1, 2, 3 }
传入数组
const nums = [1, 2, 3, 2, 1];
const set1 = new Set(nums);
console.log(set1); // Set(3) { 1, 2, 3 }
Set结构传化为数组
const nums = [1, 2, 3, 2, 1];
const set = new Set(nums);
console.log(set); // Set(3) { 1, 2, 3 }
const arr1 = [...set];
const arr2 = Array.from(set);
console.log(arr1); // [ 1, 2, 3 ]
console.log(arr2); // [ 1, 2, 3 ]
常见方法
const set = new Set();
// 1、add方法向Set实例内添加数据,已经存在的添加不成功
set.add(1);
set.add(2);
set.add(1);
console.log(set); // Set(2) { 1, 2 }
// 2、delete方法删除Set实例内对应的数据
set.delete(1);
console.log(set); // Set(1) { 2 }
// 3、has方法判断Set实例内是否存在对应数据
console.log(set.has(2)); // true
// 4、forEach(for...of..)遍历Set实例内的数据
set.add(3);
set.forEach((item) => console.log(item)); // 2 /n 3
for (const item of set) {
console.log(item); // 2 /n 3
}
// 5、clear方法清空Set实例内的所有数据
set.clear();
console.log(set); // Set(0) {}
WeakSet
WeakSet的特点
存在一个与
Set
相似的数据结构WeakSet
。区别: 1、
WeakSet
只能添加对象类型,而Set
可以添加其他基本数据类型。 2、
WeakSet
对数据的引用是弱引用,而Set
对数据的引用是强引用,GC算法会对弱引用对象进行回收。
基本使用
const info = { name: "fzb" };
// 创建一个 WeakSet实例
const weakSet = new WeakSet();
// 1、add方法
weakSet.add({});
weakSet.add(info);
// 2、has方法
console.log(weakSet.has(info)); // true
// 3、delete方法
weakSet.delete(info);
// WeakSet是没有clear方法,也是不能遍历的
console.log(weakSet); // WeakSet { <items unknown> }
WeakMap的应用
const weakSet = new WeakSet();
class Person {
constructor() {
weakSet.add(this);
}
running() {
if (!weakSet.has(this)) {
console.log("只能通过创造出来的实例对象调用该方法");
return;
}
console.log("running~");
}
}
const person = new Person();
person.running(); // running~
person.running.call({ name: "fzb" }); // 只能通过创造出来的实例对象调用该方法
console.log(person); // Person {}
Map
ES6新增Map
用来处理映射关系,普通的对象也可以处理映射关系,但是这是一种简单的处理,普通的对象的key值,最终是转化为 字符串,而Map
的key是不会转化为字符串的。
基本使用
创建方法一
const map = new Map();
map.set(1, "fzb");
map.set("2", 21);
map.set({}, "changsha");
console.log(map);
// Map(3) { 1 => 'fzb', '2' => 21, {} => 'changsha' }
创建方法二
const map = new Map([
[1, "fzb"],
["2", 21],
[{}, "changsha"],
]);
console.log(map);
// Map(3) { 1 => 'fzb', '2' => 21, {} => 'changsha' }
常见方法
// 创建Map实例
const map = new Map();
// 1、set方法,向Map实例添加映射
map.set(1, "fzb");
map.set({}, 21);
// 2、get方法,获取Map实例内对应key值得映射
console.log(map.get(1)); // fzb
// 3、has方法,判断Map实例内是否有对应的映射
console.log(map.has(1)); // true
// 4、delete方法,删除对应key值得映射,删除成功返回true
console.log(map.delete(1)); // true
// 5、forEach(for...of...)遍历
map.forEach((item, key) => {
console.log(item, key); // 21 {}
});
for (const [key, item] of map) {
console.log(key, item); // {} 21
}
// 6、clear方法,清空全部映射
map.clear();
console.log(map); // Map(0) {}
WeakMap
WeakMap的特点
存在一个与
Map
相似的数据结构WeakMap
。区别:1、
WeakMap
的key值只能是对象类型的,而Map
的key值可以是其他的数据类型 2、
WeakMap
的key值的引用是弱引用,而Map
的key值得引用是强引用,GC算法会对弱引用对象进行回收。
基本使用
const info = {};
const weakMap = new WeakMap();
// 1、set方法
weakMap.set({}, "fzb");
weakMap.set(info, 21);
// 2、has方法
console.log(weakMap.has(info)); // true
// 3、get方法
console.log(weakMap.get(info)); // 21
// 4、delete方法
console.log(weakMap.delete(info)); // true
// WeakMap实例是没有clear方法和不能遍历的
console.log(weakMap); // WeakMap { <items unknown> }
强引用和弱引用
强引用是不会被GC算法回收的,但弱引用会被GC算法回收
/**
* 对于Set,对数据的引用是强引用,在将obj1加入到set中,set就有指向obj1的引用,
* 当obj1=null,set在新版的ECMAScript中式存放在variable_中的,GC算法标记清除算法
* 有指向obj1的引用,那么obj1不会被回收
*/
const set = new Set();
const obj1 = { name: "obj1" };
set.add(obj1);
obj1 = null;
/**
* 对于WeakSet,对数据的引用是弱引用,在将obj2加入到weakSet中,weakSet就有指向obj2的引用,
* 当obj2=null,weakSet在新版的ECMAScript中式存放在variable_中的,GC算法标记清除算法
* 虽然还是存在对obj2的引用,但是因为weakSet是弱引用,就算有引用,也会被GC算法回收
*/
const weakSet = new WeakSet();
const obj2 = { name: "obj2" };
weakSet.add(obj2);
obj2 = null;
以上是关于ES6:数据结构Set和Map&WeakSet和WeakMap的主要内容,如果未能解决你的问题,请参考以下文章