[JavaScript知识库]ES6：数据结构Set和Map&WeakSet和WeakMap

在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;