Appearance
新的 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)); // dddSet 的基本使用
在 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 有什么作用呢？（后续专门讲解）