ES6:数据结构Set和Map&WeakSet和WeakMap

Posted 还是不会呀

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6:数据结构Set和Map&WeakSet和WeakMap相关的知识,希望对你有一定的参考价值。


在ES6以前存储数据的结构有两种: 数组对象

在ES6中新增两种数据结构:SetMap

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值,最终是转化为 字符串,而Mapkey是不会转化为字符串的。

基本使用

创建方法一

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的主要内容,如果未能解决你的问题,请参考以下文章

es6 Map&Set

JavaScript--Map & Set

es6中的Set和Map

js ES6 Set和Map数据结构详解

ES6新特性:Set和Map

ES6学习—Set 和 Map 数据结构