DailyUp

新的ECMA代码执行描述

在执行学习JavaScript代码执行过程中，我们学习了很多ECMA文档的术语：

执行上下文栈：Execution Context Stack，用于执行上下文的栈结构；

执行上下文：Execution Context，代码在执行之前会先创建对应的执行上下文；

变量对象：Variable Object，上下文关联的VO对象，用于记录函数和变量声明；

全局对象：Global Object，全局执行上下文关联的VO对象；

激活对象：Activation Object，函数执行上下文关联的VO对象；

作用域链：scope chain，作用域链，用于关联指向上下文的变量查找；

在新的ECMA代码执行描述中（ES5以及之上），对于代码的执行流程描述改成了另外的一些词汇：

基本思路是相同的，只是对于一些词汇的描述发生了改变；

执行上下文栈和执行上下文也是相同的；

词法环境

词法环境是一种规范类型，用于在词法嵌套结构中定义关联的变量、函数等标识符；

一个词法环境是由环境记录（Environment Record）和一个外部词法环境（outer Lexical Environment）组成；

一个词法环境经常用于关联一个函数声明、代码块语句、try-catch语句，当它们的代码被执行时，词法环境被创建出来；

也就是在ES5之后，执行一个代码，通常会关联对应的词法环境；

那么执行上下文会关联哪些词法环境呢？

LexicalEnvironment和VariableEnvironment

LexicalEnvironment（词法环境）用于处理let、const声明的标识符

VariableEnvironment（变量环境）用于处理var和function声明的标识符

环境记录（Environment Record）

在这个规范中有两种主要的环境记录值:声明式环境记录和对象环境记录。

声明式环境记录：声明性环境记录用于定义ECMAScript语言语法元素的效果，如函数声明、变量声明和直接将标识符绑定与

ECMAScript语言值关联起来的Catch子句。

对象式环境记录：对象环境记录用于定义ECMAScript元素的效果，例如WithStatement，它将标识符绑定与某些对象的属性

关联起来。

新ECMA描述内存图

let/const基本使用

在ES5中我们声明变量都是使用的var关键字，从ES6开始新增了两个关键字可以声明变量：let、const

let、const在其他编程语言中都是有的，所以也并不是新鲜的关键字；

但是let、const确确实实给JavaScript带来一些不一样的东西；

let关键字：

从直观的角度来说，let和var是没有太大的区别的，都是用于声明一个变量；

const关键字：

const关键字是constant的单词的缩写，表示常量、衡量的意思；

它表示保存的数据一旦被赋值，就不能被修改；

但是如果赋值的是引用类型，那么可以通过引用找到对应的对象，修改对象的内容；

注意：

另外let、const不允许重复声明变量；

javascript

// ES6之前
var message1 = "Hello World"
message1 = "Hello Coderwhy"
message1 = "aaaaa"
console.log(message1)

// ES6开始
// 1.let
let message2 = "你好, 世界"
message2 = "你好, why"
message2 = 123
console.log(message2)

// 2.const
// const message3 = "nihao, shijie"
// message3 = "nihao, why" 不能修改

// 赋值引用类型
const info = {
    name: "why",
    age: 18
}
// info = {} 不能修改，这样直接改了整个内存地址
info.name = "kobe" // 但可以改变对象里面的属性，地址还是不变
console.log(info)

javascript

// 1.var变量可以重复声明
// var message = "Hello World"
// var message = "你好, 世界"


// 2.let/const不允许变量的重复声明
// var address = ""
let address = "广州市"
// let address = "上海市"
const info = {}
// const info = {}

let/const作用域提升

let、const和var的另一个重要区别是作用域提升：

我们知道var声明的变量是会进行作用域提升的；

但是如果我们使用let声明的变量，在声明之前访问会报错；

javascript

console.log(foo) // ReferenceError: Cannot access 'foo' before initialization

let foo = "foo"

那么是不是意味着foo变量只有在代码执行阶段才会创建的呢？

事实上并不是这样的，我们可以看一下ECMA262对let和const的描述；

这些变量会被创建在包含他们的词法环境被实例化时，但是是不可以访问它们的，直到词法绑定被求值；

javascript

// 1.var声明的变量会进行作用域的提升
// console.log(message)
// var message = "Hello World"

// 2.let/const声明的变量: 没有作用域提升
// console.log(address)
console.log(address) // 这里已经创建出来整个变量了，只是不能访问
let address = "广州市"
const info = {}

暂时性死区 (TDZ)

我们知道，在let、const定义的标识符真正执行到声明的代码之前，是不能被访问的

从块作用域的顶部一直到变量声明完成之前，这个变量处在暂时性死区（TDZ，temporal dead zone）

使用术语 “temporal” 是因为区域取决于执行顺序（时间），而不是编写代码的位置；

javascript

// 1.暂时性死区
function foo() {
    console.log(bar, baz)

    console.log("Hello World")
    console.log("你好 世界")
    let bar = "bar"
    let baz = "baz"
}
foo()

// 2.暂时性死区和定义的位置没有关系, 和代码执行的顺序有关系
function foo() {
    console.log(message) // 可以访问
}

let message = "Hello World"
foo()
console.log(message)

// 3.暂时性死区形成之后, 在该区域内这个标识符不能访问
let message = "Hello World"
function foo() {
    console.log(message) // 不能访问

    const message = "哈哈哈哈"
}

foo()

Window对象添加属性

我们知道，在全局通过var来声明一个变量，事实上会在window上添加一个属性：

但是let、const是不会给window上添加任何属性的。

那么我们可能会想这个变量是保存在哪里呢？

声明式环境记录

javascript

// 1.var定义的变量是会默认添加到window上的
var message = "Hello World"
var address = "广州市"

console.log(window.message)
console.log(window.address)

// 2.let/const定义的变量不会添加到window上的
let message = "Hello World"
let address = "广州市"

console.log(window.message)
console.log(window.address)

// 3.let/var分别声明变量
var message = "Hello World"
let adress = "广州市"

function foo() {
    debugger
}
foo()

var的块级作用域

在我们前面的学习中，JavaScript只会形成两个作用域：全局作用域和函数作用域。

ES5中放到一个代码中定义的变量，外面是可以访问的：

javascript

// 1.在ES5以及之前, 只有全局和函数会形成自己的作用域
// 代码块
function foo() {
    console.log("Hello World")
}
{
    var message = "Hello World"
    }
console.log(message) // 可以访问

let/const的块级作用域

在ES6中新增了块级作用域，并且通过let、const、function、class声明的标识符是具备块级作用域的限制的：

但是我们会发现函数拥有块级作用域，但是外面依然是可以访问的：

这是因为引擎会对函数的声明进行特殊的处理，允许像var那样进行提升；

javascript

// 2.从ES6开始, 使用let/const/function/class声明的变量是有块级作用域
    
// console.log(message)
// foo()
{
    var message = "Hello World"
    let age = 18
    const height = 1.88

    class Person {}

    function foo() {
        console.log("foo function")
    }
}
// 这三个都会报错，无法访问
// console.log(age) 
// console.log(height)
// const p = new Person()
foo() // 可以访问

块级作用域的应用

javascript

// 1.形成的词法环境
var message = "Hello World"
var age = 18
function foo() {}
let address = "广州市"

{
    var height = 1.88

    let title = "教师"
    let info = "了解真相~"
}

html

<button>按钮0</button>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>

javascript

// 2.监听按钮的点击
const btnEls = document.querySelectorAll("button")
[btn1, btn2, btn3, btn4]
for (var i = 0; i < btnEls.length; i++) {
    var btnEl = btnEls[i];
    // btnEl.index = i
    (function(m) {
        btnEl.onclick = function() {
            debugger
            //  console.log(`点击了${this.index}按钮`)
            console.log(`点击了${m}按钮`)
        }
    })(i)
}


for (let i = 0; i < btnEls.length; i++) {
    const btnEl = btnEls[i];
    btnEl.onclick = function() {
        console.log(`点击了${i}按钮`)
    }
}

// console.log(i)

var、let、const的选择

那么在开发中，我们到底应该选择使用哪一种方式来定义我们的变量呢？

对于var的使用：

我们需要明白一个事实，var所表现出来的特殊性：比如作用域提升、window全局对象、没有块级作用域等都是一些历史遗

留问题；

其实是JavaScript在设计之初的一种语言缺陷；

当然目前市场上也在利用这种缺陷出一系列的面试题，来考察大家对JavaScript语言本身以及底层的理解；

但是在实际工作中，我们可以使用最新的规范来编写，也就是不再使用var来定义变量了；

对于let、const：

对于let和const来说，是目前开发中推荐使用的；

我们会优先推荐使用const，这样可以保证数据的安全性不会被随意的篡改；

只有当我们明确知道一个变量后续会需要被重新赋值时，这个时候再使用let；

这种在很多其他语言里面也都是一种约定俗成的规范，尽量我们也遵守这种规范；

字符串模板基本使用

在ES6之前，如果我们想要将字符串和一些动态的变量（标识符）拼接到一起，是非常麻烦和丑陋的（ugly）。

ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接：

首先，我们会使用 `` 符号来编写字符串，称之为模板字符串；

其次，在模板字符串中，我们可以通过 ${expression} 来嵌入动态的内容；

javascript

const name = "why"
const age = 18

// 1.基本用法
// 1.1.ES6之前
// const info = "my name is" + name + ", age is " + age

// 1.2.ES6之后
const info = `my name is ${name}, age is ${age}`
console.log(info)
console.log(`我是成年人吗 ? ${ age > 18 ? '是' : '否'}`)

function foo() {
    return "function is foo"
}
console.log(`my function is ${ foo()}`)

标签模板字符串使用

模板字符串还有另外一种用法：标签模板字符串（Tagged Template Literals）。

如果我们使用标签模板字符串，并且在调用的时候插入其他的变量：

模板字符串被拆分了；

第一个元素是数组，是被模块字符串拆分的字符串组合；

后面的元素是一个个模块字符串传入的内容；

javascript

// 2.标签模板字符串的用法
function foo(...args) {
    console.log("参数:", args)
}

// foo("why", 18, 1.88)
foo`my name is ${name}, age is ${age}, height is ${1.88}`

React的styled-components库

函数的默认参数

在ES6之前，我们编写的函数参数是没有默认值的，所以我们在编写函数时，如果有下面的需求：

传入了参数，那么使用传入的参数；

没有传入参数，那么使用一个默认值；

而在ES6中，我们允许给函数一个默认值：

javascript

// 注意: 默认参数是不会对null进行处理的
function foo(arg1 = "我是默认值", arg2 = "我也是默认值") {
    // 1.两种写法不严谨
    // 默认值写法一:
    // arg1 = arg1 ? arg1: "我是默认值"

    // 默认值写法二:
    // arg1 = arg1 || "我是默认值"

    // 2.严谨的写法
    // 三元运算符
    // arg1 = (arg1 === undefined || arg1 === null) ? "我是默认值": arg1

    // ES6之后新增语法: ?? 和三元运算符一样
    // arg1 = arg1 ?? "我是默认值"

    // 3.简便的写法: 默认参数
    console.log(arg1)
}

foo(123, 321)
foo()
foo(0)
foo("")
foo(false)
foo(null)
foo(undefined)

默认参数注意

javascript

// 1.注意一: 有默认参数的形参尽量写到后面
// 2.有默认参数的形参, 是不会计算在length之内(并且后面所有的参数都不会计算在length之内)
// 3.剩余参数也是放到后面(默认参数放到剩余参数的前面)
function foo(age, name = "why", ...args) {
    console.log(name, age, args)
}

foo(18, "abc", "cba", "nba")

console.log(foo.length)

默认参数解构

javascript

// 1.解构的回顾
// const obj = { name: "why" }
// const { name = "kobe", age = 18 } = obj

// 2.函数的默认值是一个对象
// function foo(obj = { name: "why", age: 18 }) {
//   console.log(obj.name, obj.age)
// }

function foo({ name, age } = { name: "why", age: 18 }) {
    console.log(name, age)
}

function foo({ name = "why", age = 18 } = {}) {
    console.log(name, age)
}

foo()

函数的剩余参数（已经学习）

ES6中引用了rest parameter，可以将不定数量的参数放入到一个数组中：

如果最后一个参数是 ... 为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组；

那么剩余参数和arguments有什么区别呢？

剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参；

arguments对象不是一个真正的数组，而rest参数是一个真正的数组，可以进行数组的所有操作；

arguments是早期的ECMAScript中为了方便去获取所有的参数提供的一个数据结构，而rest参数是ES6中提供并且希望以此

来替代arguments的；

注意：剩余参数必须放到最后一个位置，否则会报错。

函数箭头函数的补充

在前面我们已经学习了箭头函数的用法，这里进行一些补充：

箭头函数是没有显式原型prototype的，所以不能作为构造函数，使用new来创建对象；

箭头函数也不绑定this、arguments、super参数；

javascript

// 1.function定义的函数是有两个原型的:
// function foo() {}
// console.log(foo.prototype) // new foo() -> f.__proto__ = foo.prototype
// console.log(foo.__proto__) // -> Function.prototype

// 2.箭头函数是没有显式原型
// 在ES6之后, 定义一个类要使用class定义
var bar = () => {}
// console.log(bar.__proto__ === Function.prototype)
// 没有显式原型
// console.log(bar.prototype)
// var b = new bar()

展开语法

展开语法(Spread syntax)：

可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；

还可以在构造字面量对象时, 将对象表达式按key-value的方式展开；

展开语法的场景：

在函数调用时使用；

在数组构造时使用；

在构建对象字面量时，也可以使用展开运算符，这个是在ES2018（ES9）中添加的新特性；

注意：展开运算符其实是一种浅拷贝；

javascript

// 1.基本演练
// ES6
const names = ["abc", "cba", "nba", "mba"]
const str = "Hello"

// const newNames = [...names, "aaa", "bbb"]
// console.log(newNames)

function foo(name1, name2, ...args) {
    console.log(name1, name2, args)
}

foo(...names)
foo(...str)

// ES9(ES2018)
const obj = {
    name: "why",
    age: 18
}
// 不可以这样来使用
// foo(...obj) // 在函数的调用时, 用展开运算符, 将对应的展开数据, 进行迭代
// 可迭代对象: 数组/string/arguments

const info = {
    ...obj,
    height: 1.88,
    address: "广州市"
}
console.log(info)

引用赋值-浅拷贝-深拷贝

引用赋值

javascript

const obj = {
    name: "why",
    age: 18,
    height: 1.88,
}

// 1.引用赋值
const info1 = obj

浅拷贝

javascript

const obj = {
    name: "why",
    age: 18,
    height: 1.88,
    friend: {
        name: "curry"
    }
}

// 2.浅拷贝
const info2 = {
    ...obj
}
info2.name = "kobe"
console.log(obj.name) // why
console.log(info2.name) // kobe
info2.friend.name = "james"
console.log(obj.friend.name) // james

深拷贝

javascript

const obj = {
    name: "why",
    age: 18,
    height: 1.88,
    friend: {
        name: "curry"
    }
}

// 3.深拷贝
// 方式一: 第三方库
// 方式二: 自己实现
// function deepCopy(obj) {}
// 方式三: 利用先有的js机制, 实现深拷贝JSON
const info3 = JSON.parse(JSON.stringify(obj))
console.log(info3.friend.name)
info3.friend.name = "james"
console.log("info3.friend.name:", info3.friend.name)
console.log(obj.friend.name)

数值的表示

在ES6中规范了二进制和八进制的写法：

javascript

// 1.进制
console.log(100)
console.log(0b100)
console.log(0o100)
console.log(0x100)

另外在ES2021新增特性：数字过长时，可以使用_作为连接符

javascript

// 2.长数字的表示
const money = 100_00_00_0000_00_00

Symbol的基本使用

Symbol是什么呢？Symbol是ES6中新增的一个基本数据类型，翻译为符号。

那么为什么需要Symbol呢？

在ES6之前，对象的属性名都是字符串形式，那么很容易造成属性名的冲突；

比如原来有一个对象，我们希望在其中添加一个新的属性和值，但是我们在不确定它原来内部有什么内容的情况下，很容易

造成冲突，从而覆盖掉它内部的某个属性；

比如我们前面在讲apply、call、bind实现时，我们有给其中添加一个fn属性，那么如果它内部原来已经有了fn属性了呢？

比如开发中我们使用混入，那么混入中出现了同名的属性，必然有一个会被覆盖掉；

Symbol就是为了解决上面的问题，用来生成一个独一无二的值。

Symbol值是通过Symbol函数来生成的，生成后可以作为属性名；

也就是在ES6中，对象的属性名可以使用字符串，也可以使用Symbol值；

**Symbol即使多次创建值，它们也是不同的：**Symbol函数执行后每次创建出来的值都是独一无二的；

我们也可以在创建Symbol值的时候传入一个描述description：这个是ES2019（ES10）新增的特性；

javascript

// ES6之前存在的问题
// const obj = {
//   name: "why",
//   fn: "aaa"
// }

// // 添加一个新的属性 name
// function foo(obj) {
//   obj.why = function() {}
// }
// foo(obj)
// console.log(obj.fn)


// ES6之后可以使用Symbol生成一个独一无二的值
const s1 = Symbol()
// const info = { name: "why" }
const obj = {
    [s1]: "aaa" 
}
console.log(obj)

const s2 = Symbol()
obj[s2] = "bbb"
console.log(obj)

function foo(obj) {
    const sKey = Symbol()
    obj[sKey] = function() {}
    delete obj[sKey]
}

foo(obj)

Symbol作为属性名

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

相同值的Symbol

前面我们讲Symbol的目的是为了创建一个独一无二的值，那么如果我们现在就是想创建相同的Symbol应该怎么来做呢？

我们可以使用Symbol.for方法来做到这一点；

并且我们可以通过Symbol.keyFor方法来获取对应的key；

javascript

const s1 = Symbol() // aaa
const s2 = Symbol() // bbb

// 1.加入对象中
const obj = {
    name: "why",
    age: 18,
    [s1]: "aaa",
    [s2]: "bbb"
}

// const obj1 = {}
// obj1[s1] = "aaa"
// obj2[s2] = "bbb"

// const obj2 = {}
// Object.defineProperty(obj, s1, {
//   value: "aaa"
// })

// 2.获取symbol对应的key
console.log(Object.keys(obj))
console.log(Object.getOwnPropertySymbols(obj))
const symbolKeys = Object.getOwnPropertySymbols(obj)
for (const key of symbolKeys) {
    console.log(obj[key])
}

// 3.description
// 3.1.Symbol函数直接生成的值, 都是独一无二
const s3 = Symbol("ccc")
console.log(s3.description) // ccc
const s4 = Symbol(s3.description)
console.log(s3 === s4) // false

// 3.2. 如果相同的key, 通过Symbol.for可以生成相同的Symbol值
const s5 = Symbol.for("ddd")
const s6 = Symbol.for("ddd")
console.log(s5 === s6) // true

// 获取传入的key
console.log(Symbol.keyFor(s5)) // ddd

Set的基本使用

在ES6之前，我们存储数据的结构主要有两种：数组、对象。

在ES6中新增了另外两种数据结构：Set、Map，以及它们的另外形式WeakSet、WeakMap。

Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复。

创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）：

我们可以发现Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重。

javascript

// 1.创建Set
const set = new Set()
console.log(set)

// 2.添加元素
set.add(10)
set.add(22)
set.add(35)
set.add(22)
console.log(set)

const info = {}
const obj = {name: "obj"}
set.add(info)
set.add(obj)
set.add(obj)
console.log(set)

// 3.应用场景: 数组的去重
const names = ["abc", "cba", "nba", "cba", "nba"]
// const newNames = []
// for (const item of names) {
//   if (!newNames.includes(item)) {
//     newNames.push(item)
//   }
// }
// console.log(newNames)
const newNamesSet = new Set(names)
const newNames = Array.from(newNamesSet)
console.log(newNames)

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

// 4.Set的其他属性和方法
// 属性
console.log(set.size)
// 方法
// 4.1. add方法
set.add(100)
console.log(set)
// 4.2. delete方法
set.delete(obj)
console.log(set)
// 4.3. has方法
console.log(set.has(info))
// 4.4. clear方法
// set.clear()
// console.log(set)
// 4.5. forEach
set.forEach(item => console.log(item))

// 5.set支持for...of
for (const item of set) {
    console.log(item)
}

WeakSet使用

和Set类似的另外一个数据结构称之为WeakSet，也是内部元素不能重复的数据结构。

那么和Set有什么区别呢？

区别一：WeakSet中只能存放对象类型，不能存放基本数据类型；

区别二：WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收；

WeakSet常见的方法：

add(value)：添加某个元素，返回WeakSet对象本身；

delete(value)：从WeakSet中删除和这个值相等的元素，返回boolean类型；

has(value)：判断WeakSet中是否存在某个元素，返回boolean类型；

javascript

// 1.Weak Reference(弱引用)和Strong Reference(强引用)
let obj1 = { name: "why" }
let obj2 = { name: "kobe" }
let obj3 = { name: "jame" }

// let arr = [obj1, obj2, obj3]
// obj1 = null
// obj2 = null
// obj3 = null

// const set = new Set(arr)
// arr = null

// 2.WeakSet的用法
// 2.1.和Set的区别一: 只能存放对象类型
const weakSet = new WeakSet()
weakSet.add(obj1)
weakSet.add(obj2)
weakSet.add(obj3)

// 2.2.和Set的区别二: 对对象的引用都是弱引用

WeakSet的应用

注意：WeakSet不能遍历

因为WeakSet只是对对象的弱引用，如果我们遍历获取到其中的元素，那么有可能造成对象不能正常的销毁。

所以存储到WeakSet中的对象是没办法获取的；

那么这个东西有什么用呢？

事实上这个问题并不好回答，我们来使用一个Stack Overflow上的答案；

下面案例展示调用running方法，只能通过p.running，通过其他方式调用会打印"Type error: 调用的方式不对"

javascript

// 3.WeakSet的应用
const pWeakSet = new WeakSet()
class Person {
    constructor() {
        pWeakSet.add(this)
    }

    running() {
        if (!pWeakSet.has(this)) {
            console.log("Type error: 调用的方式不对")
            return
        }
        console.log("running~")
    }
}

let p = new Person()
// p = null
p.running()
const runFn = p.running
runFn()
const obj = { run: runFn }
obj.run()

Map的基本使用

另外一个新增的数据结构是Map，用于存储映射关系。

但是我们可能会想，在之前我们可以使用对象来存储映射关系，他们有什么区别呢？

事实上我们对象存储映射关系只能用字符串（ES6新增了Symbol）作为属性名（key）；

某些情况下我们可能希望通过其他类型作为key，比如对象，这个时候会自动将对象转成字符串来作为key；

那么我们就可以使用Map：

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

const info = { name: "why" }
const info2 = { age: 18 }

// 1.对象类型的局限性: 不可以使用复杂类型作为key
// const obj = {
//   address: "北京市",
//   [info]: "哈哈哈",
//   [info2]: "呵呵呵"
// }
// console.log(obj)

// 2.Map映射类型
const map = new Map()
map.set(info, "aaaa")
map.set(info2, "bbbb")
console.log(map)

// 3.Map的常见属性和方法
// console.log(map.size)
// 3.1. set方法, 设置内容
map.set(info, "cccc")
console.log(map)
// 3.2. get方法, 获取内容
// console.log(map.get(info))
// 3.3. delete方法, 删除内容
// map.delete(info)
// console.log(map)
// 3.4. has方法, 判断内容
// console.log(map.has(info2))
// 3.5. clear方法, 清空内容
// map.clear()
// console.log(map)
// 3.6. forEach方法
// map.forEach(item => console.log(item))

// 4.for...of遍历
for (const item of map) {
    const [key, value] = item
    console.log(key, value)
}

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类型；

WeakMap的应用

注意：WeakMap也是不能遍历的

没有forEach方法，也不支持通过for of的方式进行遍历；

那么我们的WeakMap有什么作用呢？（后续专门讲解）

新的ECMA代码执行描述 ​

词法环境 ​

环境记录（Environment Record） ​

新ECMA描述内存图 ​

let/const基本使用 ​

let/const作用域提升 ​

暂时性死区 (TDZ) ​

Window对象添加属性 ​

var的块级作用域 ​

let/const的块级作用域 ​

块级作用域的应用 ​

var、let、const的选择 ​

字符串模板基本使用 ​

标签模板字符串使用 ​

React的styled-components库 ​

函数的默认参数 ​

默认参数注意 ​

默认参数解构 ​

函数的剩余参数（已经学习） ​

函数箭头函数的补充 ​

展开语法 ​

引用赋值-浅拷贝-深拷贝 ​

引用赋值 ​

浅拷贝 ​

深拷贝 ​

数值的表示 ​

Symbol的基本使用 ​

Symbol作为属性名 ​

相同值的Symbol ​

Set的基本使用 ​

Set的常见方法 ​

WeakSet使用 ​

WeakSet的应用 ​

Map的基本使用 ​

Map的常用方法 ​

WeakMap的使用 ​

WeakMap的应用 ​

新的ECMA代码执行描述

词法环境

环境记录（Environment Record）

新ECMA描述内存图

let/const基本使用

let/const作用域提升

暂时性死区 (TDZ)

Window对象添加属性

var的块级作用域

let/const的块级作用域

块级作用域的应用

var、let、const的选择

字符串模板基本使用

标签模板字符串使用

React的styled-components库

函数的默认参数

默认参数注意

默认参数解构

函数的剩余参数（已经学习）

函数箭头函数的补充

展开语法

引用赋值-浅拷贝-深拷贝

引用赋值

浅拷贝

深拷贝

数值的表示

Symbol的基本使用

Symbol作为属性名

相同值的Symbol

Set的基本使用

Set的常见方法

WeakSet使用

WeakSet的应用

Map的基本使用

Map的常用方法

WeakMap的使用

WeakMap的应用