一文搞清楚ES6新增数据结构 Symbol Map WeakMap Set WeakSet

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情

每天3分钟，重学ES6-ES12文章汇总

前言

今天开始和大家一起系统的学习ES6 ,每天3分钟，用一把斗地主的时间，重学ES6 ，今天介绍的是新增的数据结构Symbol Map WeakMap Set WeakSet

Symbol

Symbol的基本使用

• Symbol是什么呢?Symbol是ES6中新增的一个基本数据类型，翻译为符号。
• 那么为什么需要Symbol呢?
  • 在ES6之前，对象的属性名都是字符串形式，那么很容易造成属性名的冲突;
  • 比如原来有一个对象，我们希望在其中添加一个新的属性和值，但是我们在不确定它原来内部有什么内容的情况下， 很容易造成冲突，从而覆盖掉它内部的某个属性;
  • 比如我们在写apply、call、bind实现时，我们有给其中添加一个fn属性，那么如果它内部原来已经有了fn属性了呢?
  • 比如开发中我们使用混入，那么混入中出现了同名的属性，必然有一个会被覆盖掉;
• Symbol就是为了解决上面的问题，用来生成一个独一无二的值。
  • Symbol值是通过Symbol函数来生成的，生成后可以作为属性名;
  • 也就是在ES6中，对象的属性名可以使用字符串，也可以使用Symbol值;
• Symbol即使多次创建值，它们也是不同的:Symbol函数执行后每次创建出来的值都是独一无二的;
• 我们也可以在创建Symbol值的时候传入一个描述description:这个是ES2019(ES10)新增的特性;

代码演示

代码语言：javascript复制

// 1.ES6之前, 对象的属性名(key)
var obj = {
     name: "why",
     friend: { name: "kobe" },
     age: 18
}

// obj['newName'] = "james"
// console.log(obj)

// 2.ES6中Symbol的基本使用
const s1 = Symbol()
const s2 = Symbol()

console.log(s1 === s2)
// false

// ES2019(ES10)中, Symbol还有一个描述(description)
const s3 = Symbol("aaa")
console.log(s3.description)
// aaa

Symbol作为属性名

我们通常会使用Symbol在对象中表示唯一的属性名

注意: 不能通过.语法获取

使用Symbol作为key的属性名,在遍历/Object.keys等中是获取不到这些Symbol值

需要Object.getOwnPropertySymbols来获取所有Symbol的key

代码演示

代码语言：javascript复制

// 3.Symbol值作为key
// 3.1.在定义对象字面量时使用
const obj = {
  [s1]: "abc",
  [s2]: "cba"
}

// 3.2.新增属性
obj[s3] = "nba"

// 3.3.Object.defineProperty方式
const s4 = Symbol()
Object.defineProperty(obj, s4, {
  enumerable: true,
  configurable: true,
  writable: true,
  value: "mba"
})

console.log(obj[s1], obj[s2], obj[s3], obj[s4])
// 注意: 不能通过.语法获取
// console.log(obj.s1)


// 4.使用Symbol作为key的属性名,在遍历/Object.keys等中是获取不到这些Symbol值
// 需要Object.getOwnPropertySymbols来获取所有Symbol的key
console.log(Object.keys(obj))
console.log(Object.getOwnPropertyNames(obj))
console.log(Object.getOwnPropertySymbols(obj))
const sKeys = Object.getOwnPropertySymbols(obj)
for (const sKey of sKeys) {
  console.log(obj[sKey])
}

相同值的Symbol

• 前面我们讲Symbol的目的是为了创建一个独一无二的值，那么如果我们现在就是想创建相同的Symbol应该怎么 来做呢?
  • 我们可以使用Symbol.for方法来做到这一点;
  • 并且我们可以通过Symbol.keyFor方法来获取对应的key;

代码演示

代码语言：javascript复制

const sa = Symbol.for("aaa")
const sb = Symbol.for("aaa")
console.log(sa === sb) // true

const key = Symbol.keyFor(sa)
console.log(key) // aaa
const sc = Symbol.for(key)
console.log(sa === sc) // true

Set

Set的基本使用

• 在ES6之前，我们存储数据的结构主要有两种:数组、对象。
  • 在ES6中新增了另外两种数据结构:Set、Map，以及它们的另外形式WeakSet、WeakMap。
• Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复。
  • 创建Set我们需要通过Set构造函数(暂时没有字面量创建的方式):
• 我们可以发现Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重。

代码演示

代码语言：javascript复制

// 1.创建Set结构
const set = new Set()
set.add(10)
set.add(20)
set.add(40)
set.add(333)

set.add(10)
console.log(set)
//// 10, 20, 40, 333

// 3.对数组去重(去除重复的元素)
const arr = [33, 10, 26, 30, 33, 26]
const newArr = []
for (const item of arr) {
    if (newArr.indexOf(item) !== -1) {
         newArr.push(item)
   }
}

const arrSet = new Set(arr)
const newArr = Array.from(arrSet)
const newArr = [...arrSet]
console.log(newArr)

Set的常见方法

• Set常见的属性:
  • size:返回Set中元素的个数;
• Set常用的方法:
  • add(value):添加某个元素，返回Set对象本身;
  • delete(value):从set中删除和这个值相等的元素，返回boolean类型;
  • has(value):判断set中是否存在某个元素，返回boolean类型;
  • clear():清空set中所有的元素，没有返回值;
  • forEach(callback, [, thisArg]):通过forEach遍历set;
• 另外Set是支持for of的遍历的。 代码演示

代码语言：javascript复制

const arrSet = new Set()
// size属性
console.log(arrSet.size)

// Set的方法
// add
arrSet.add(100)
console.log(arrSet)

// delete
arrSet.delete(33)
console.log(arrSet)

// has
console.log(arrSet.has(100))

// clear
arrSet.clear()
console.log(arrSet)

// 6.对Set进行遍历
arrSet.forEach(item => {
  console.log(item)
})

for (const item of arrSet) {
  console.log(item)
}

WeakSet

WeakSet的基本使用

• 和Set类似的另外一个数据结构称之为WeakSet，也是内部元素不能重复的数据结构。
• 那么和Set有什么区别呢?
  • 区别一:WeakSet中只能存放对象类型，不能存放基本数据类型;
  • 区别二:WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么垃圾回收机制可以对该对象进行回收;

代码演示

代码语言：javascript复制

const weakSet = new WeakSet()

// 1.区别一: 只能存放对象类型
// TypeError: Invalid value used in weak set
// weakSet.add(10)

// 强引用和弱引用的概念(看图)

// 2.区别二: 对对象是一个弱引用
let obj = { 
  name: "why"
}

weakSet.add(obj)

const set = new Set()
// 建立的是强引用
set.add(obj)

// 建立的是弱引用
weakSet.add(obj)

WeakSet常见方法

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

WeakSet的应用

• 注意:WeakSet不能遍历
  • 因为WeakSet只是对对象的弱引用，如果我们遍历获取到其中的元素，那么有可能造成对象不能正常的销毁。
  • 所以存储到WeakSet中的对象是没办法获取的;
• 那么这个东西有什么用呢?
  • 事实上这个问题并不好回答，我们来使用一个Stack Overflow上的答案;

代码演示 不能通过非构造方法创建出来的对象 调用构造函数的方法

代码语言：javascript复制

const personSet = new WeakSet()
class Person {
  constructor() {
    personSet.add(this)
  }

  running() {
    if (!personSet.has(this)) {
      throw new Error("不能通过非构造方法创建出来的对象调用running方法")
    }
    console.log("running~", this)
  }
}

let p = new Person()
p.running()
p = null

p.running.call({name: "why"})

代码语言：javascript复制

// 1.JavaScript中对象中是不能使用对象来作为key的
const obj1 = { name: "why" }
const obj2 = { name: "kobe" }

const info = {
   [obj1]: "aaa",
   [obj2]: "bbb"
}

console.log(info)

// 2.Map就是允许我们对象类型来作为key的
// 构造方法的使用
const map = new Map()
map.set(obj1, "aaa")
map.set(obj2, "bbb")
map.set(1, "ccc")
console.log(map)

const map2 = new Map([[obj1, "aaa"], [obj2, "bbb"], [2, "ddd"]])
console.log(map2)
// Map(3) {{…} => 'aaa', {…} => 'bbb', 2 => 'ddd'}

Map的常见方法

• 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进行遍历。

代码演示

代码语言：javascript复制

// 常见的属性和方法
console.log(map2.size)

// set
map2.set("why", "eee")
console.log(map2)

// get(key)
console.log(map2.get("why"))

// has(key)
console.log(map2.has("why"))

// delete(key)
map2.delete("why")
console.log(map2)

// clear
// map2.clear()
// console.log(map2)

// 遍历map
map2.forEach((item, key) => {
  console.log(item, key)
})

for (const item of map2) {
  console.log(item[0], item[1])
}

for (const [key, value] of map2) {
  console.log(key, value)
}

WeakMap

WeakMap的使用

• 和Map类型的另外一个数据结构称之为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类型;

代码演示

代码语言：javascript复制

const obj = {name: "obj1"}
// 1.WeakMap和Map的区别二:
const map = new Map()
map.set(obj, "aaa")

const weakMap = new WeakMap()
weakMap.set(obj, "aaa")

// 2.区别一: 不能使用基本数据类型
// weakMap.set(1, "ccc")

// 3.常见方法
// get方法
console.log(weakMap.get(obj))

// has方法
console.log(weakMap.has(obj))

// delete方法
console.log(weakMap.delete(obj))
// WeakMap { <items unknown> }
console.log(weakMap)

WeakMap的应用

• 注意:WeakMap也是不能遍历的
  • 因为没有forEach方法，也不支持通过for of的方式进行遍历;
• 那么我们的WeakMap有什么作用呢? 代码演示 可以做对象的依赖收集

先把对象的属性和属性对应的依赖，存储为Map结构，一个key 对应一组收集的函数依赖

然后把对象 和Map 结构存储为weakMap

当代理的对象有变化时，我们去weakMap 取key,再执行依赖函数集

代码语言：javascript复制

// 应用场景(vue3响应式原理)
const obj1 = {
  name: "why",
  age: 18
}

function obj1NameFn1() {
  console.log("obj1NameFn1被执行")
}

function obj1NameFn2() {
  console.log("obj1NameFn2被执行")
}

function obj1AgeFn1() {
  console.log("obj1AgeFn1")
}

function obj1AgeFn2() {
  console.log("obj1AgeFn2")
}


// 1.创建WeakMap
const weakMap = new WeakMap()

// 2.收集依赖结构
// 2.1.对obj1收集的数据结构
const obj1Map = new Map()
obj1Map.set("name", [obj1NameFn1, obj1NameFn2])
obj1Map.set("age", [obj1AgeFn1, obj1AgeFn2])
weakMap.set(obj1, obj1Map)


// 2.2如果obj1.name发生了改变
// Proxy/Object.defineProperty
obj1.name = "james"
const targetMap = weakMap.get(obj1)
const fns = targetMap.get("name")
fns.forEach(item => item())

最后，这是我第一次参加更文活动，茫茫人海中，如果有幸遇到你，读到我这篇文章，那真是太好了。我深知还有很多不足，希望大家能多提建议，还是想舔着脸皮，向屏幕前的大帅比们，大漂亮们，恳请一个小小的点赞，这会是对我莫大鼓励。也祝愿点赞的大帅比们，大漂亮们升职加薪走向人生巅峰！

编程算法 ecmascript java javascript 数据结构

0 人点赞