阮一峰ES6全面回顾

时间 2019-11-06

原文原文链接

9月抽空从新回顾了下ES6全部知识点，整个回顾过程既惊喜又感慨，感慨开发这么久好像真的没有好好的静下心去读一本好的书，大多状况下只是在使用的时候用到了，不熟悉或者感兴趣再去蜻蜓点水一通，感慨之余也发现了一些自身的的问题，知识体系仍是不够丰富、扎实，一句话：有空多读书总没错，好了不闲扯了，下面咱们步入正题

关于JavaScript

现在前端知识突飞猛进，越是晚入门小伙伴，不少基础层面的东西，接触的真的是少之又少，各类前端框架层粗不穷 Vue、 React、 Ng这三大带有里程碑意义的框架 Api我想看的这么文字的盆友应该都有接触，基础的 Api使用应该是没有什么难度，可是在遇到问题，解决问题、以及在原有组件以及自我封装组件，搭建框架过程总会遇到一些莫名其妙的问题，解决这个问题， 看源码是大众都知道的一些方法，但我的认为这是一种进阶的方法，新手入门建议能够先了解我们 JavaScript的发展史能够比较轻松的认识咱们整个技术体系的发展和将来方向，避免一些认知错误

发展史

互联网早期javascript
- BS架构：1990年的12月25日，西方的圣诞节，Tim Berners-Lee在他的NeXT电脑上部署了第一套“主机-网站-浏览器”构成的Web系统，这标志BS架构的网站应用软件的开端，也是前端工程的开端。这个时候前端只是简单的Html静态文本简单到基本动画都没有
- 1995年javascript的诞生：1995年，NetScape(网景)公司的工程师Brendan Eich设计了javascript脚本语言，并集成到了navigator2.0版本中。随后微软也意识到了javascript的潜力，并模仿开发VBScript和JScript应用到了IE中，这直接开启了NetScape和微软的浏览器竞争。因为微软的IE集成在windows操做系统上的优点，NetScape的navigator很快在浏览器市场上落于下风。因而他们把javascript提交到了ECMA，推进制订了ECMAScript标准，成功实现了javascript的标准国际化。虽然第一次浏览器战争最后IE大胜Navigator，可是NetScape的javascript主导了W3C的官方标准。
互联网发展期前端
- 动态页面伊始：因为javascript推进，前端页面开始走向动态化，那时流行的跑马灯、悬浮广告基本是各大门户网站的标配，页面基本都是经过PHP、JSP、ASP动态渲染出来，这也直接致使后端代码的逻辑臃肿，服务端为了更好的管理代码，应运而生MVC模式
- Ajax出现：前期的动态性彻底由服务端推进，每一次的动态更新都须要将页面进行reload操做，无论交互仍是性能，都是不值当的 "这个问题直到谷歌在04年应用Ajax技术开发的Gmail和谷歌地图的发布，才获得了解决。" 这背后的秘密就是Ajax技术中实现的异步HTTP请求，这让页面无需刷新就能够发起HTTP请求，用户也不用专门等待请求的响应，而是能够继续网页的浏览或操做。
  Ajax开启了web2.0的时代
- 前端兼容问题：因为更重浏览器差别性，兼容问题也是层出不穷，不一样的浏览器技术标准有不小的差别，不利于兼容开发，这催生了Dojo、Mooltools、YUIExtJS、jQuery等前端兼容框架，其中jQuery应用最为普遍。这些框架中不知道你们用过几个
- Html5诞生：部分浏览器厂商为了解决适配问题提出过Web Forms 2.0、Web Applications 1.0等规章最后整合成HTML五、各大浏览器都在为适配浏览器不断改善本身的浏览器
- Node.js：2009年，Ryan Dahl以Chrome的V8引擎为基础开发了基于事件循环的异步I/O框架-Node.js。Node.js使得前端开发人员能够利用javascript开发服务器端程序。很快，大量的Node.js使用者就建构了一个用NPM包管理工具管理的Node.js生态系统。node.js也能开发跨平台的桌面应用
Node 衍生出的 NPM包管理工具为整个前端社区提供了一个规范良好的平台
互联网进击java
- 移动App、Hybrid App：移动互联网的到来，飞速发展，原生app迭代远远知足不了，你们找到折中的方法，损耗部分性能，提升产品产出；jQuery Mobile、Sencha Touch、Framework7如鱼得水；Hybrid技术指的是利用Web开发技术，调用Native相关的API，实现移动与Web两者的有机结合，既能利用Web开发周期短的优点，又能为用户提供Native的体验。
- ECMAScript6：2015年6月，ECMAScript 6.0发布，该版本增长了不少新的语法，极大的拓展了javascript的开发潜力;一些陈旧的浏览器能够经过Babel进行降级转义适配，ES6将JavaScript推向了另外一个历史转折点
- 进行中：通过历史的沉淀，技术演进，交互升级，React、Vue、Anjular三大框架利用js集合自身优点，彻底实现了目前的先后端分离的开发模式；开发体系发展到：NPM和Yarn为表明的包管理工具；ES6及Babel和TypeScript构成的脚本体系；HTML5；CSS3和相应的处理技术；React、Vue、Anjular为表明的框架；Webpack为表明的打包工具；Node.js为基础的Express和KOA后端框架；Hybrid技术。

ECMAScript简介

提案规则

权重自上到下node

Stage 0 - Strawman（展现阶段）
Stage 1 - Proposal（征求意见阶段）
Stage 2 - Draft（草案阶段）
Stage 3 - Candidate（候选人阶段）
Stage 4 - Finished（定案阶段）

通常走到草案阶段基本能够在正式标准中看到，Tc39可查看各提案es6

Tips:这也是在babel中配置presets的来由（可能咱们使用了一些仍然在草案甚至征求意见阶段的API）的时候需babel垫片web

Babel转码器

配置.babelrc/babel.config.js

// 基本格式
{
    "presets":[]
    "plugins":[]
}

不一样环境支持不一样的转换方法正则表达式

命令行 //@babel/cli
浏览器环境 //HTML中引入对应脚本
node环境 //Traceur模块

通常咱们使用的脚手架默认配置好，可是咱们须要配置的什么意思，以及为何要配置编程

@babel/register、babel-core/register

改写require命令，为每一个require引入的资源进行Babel转义windows

@babel/polyfill

Babel仅会转换新的语法，可是已有的Api中的Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise是须要用这个垫片处理后端

@babel/core

暴露出Babel的Api，进行特殊操做

ES6基础篇

基础篇咱们主要从es6中添加的一些命令，以及对已有数据类型拓展的汇总

let & const

let

特性以下

区别于var的块级做用域
不存在变量提高问题
具备暂时性死区
不能重复命名

// 下面这块很好的体现了`块级做用域`

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

特殊说明下暂时性死区的概念，就是：在块中，let 声明变量以前都是不能使用的

const

const 和 let 特性基本一致，区别于，使用const定义的是显式的常量，一经定义，不可更改

块级做用域

es5以前是有全局做用域、函数做用域，es6推出的块级做用域但凡一个{}就是一个做用域;
外层块级做用域能在内层使用，内层定义在外层访问不到

解构赋值

Tips： 解构赋值 对应的还有 拓展操做符,解构不成功则为undefined; 一看就懂，一用代码就简洁

ES6 容许按照必定模式，从数组和对象中提取值，对变量进行赋值（Iterator类型），这被称为解构（Destructuring）

数组的解构

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

对象的解构

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

数组对象的解构

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

函数参数的解构

// 设置默认值
function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

注:还有字符串解构（转换成数组）、字符/布尔解构（转换成对象），解构遵循的宗旨是模式、数据格式一致，便可解构，解构失败undefined；进行赋值的过程，无论是数组仍是对象解构均可以设置默认值；圆括号()只能在赋值语句的非模式部分便可

`用途优点`

结构清晰，代码明了
函数中直接返回多个值
```
let [a,b,c] = fn()
```
函数入参清晰多参数
JSON对象快速提取对应值
函数设置默认值

字符串

字符串中改动仍是蛮多的有添加Unicode表示、JSON.stringify()适配非UTF-8编码，下面介绍平常开发实用改变

添加Iterator接口

for of遍历器（es6新增）仅对拥有Iterator接口的适配

模板字符串

`` 反引号节省咱们字符串拼接的痛点

let str1 = 
    'There are <b>' + basket.count + '</b> ' +
      'items in your basket, ';
let str2 = `There arebasket.count ${variable}</b>items in your basket, `;

上面字符串拼接自上到下的升级，同时也可使用${}动态注入变量

模板编译

<%...%>中放置JavaScript代码，以下

let template = `
<ul>
  <% for(let i=0; i < data.supplies.length; i++) { %>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>
`;

能够利用字符串匹配<%...%>封装template转换函数

字符串方法

String.fromCodePoint(）// 识别大于0xFFFF的字符
String.raw() // 返回斜杠都转义的字符

codePointAt()

charAt() // UTF-8
    codePointAt() // UTF-16

normalize() //处理合成字符串

includes(), startsWith(), endsWith()

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

repeat() // 返回一个新字符，参数是重复次数
padStart()，padEnd() // 头/尾部补全字符两个参数第一个长度、第二个填补的str
trimStart()，trimEnd() // 消除头/尾部空格
matchAll() // 字符正则匹配参数正则表达式

数值类型

二进制、八进制表示法

0b(0B)二进制；0o(0O)八进制

方法

Number.isFinite(), Number.isNaN()
判断是否有限、判断参数类型是否为NAN
Number.parseInt(), Number.parseFloat()
将全局方法移植到内置对象下
Number.isInteger() 判断是不是整数
Number.EPSILON // 常量表示 1 与大于 1 的最小浮点数之间的差。
Math.trunc() // 返回整数
Math.sign() // 判断是否正数、负数、零
Math.cbrt() // 计算数组的立方根
Math.clz32() // 返回 32位前置零个数
Math.imul // 返回两个数以 32 位带符号整数形式相乘的结果
...

拓展符号(`右结合即右边先运算`)

**、**= 操做符进行指数运算

//指数拓展符
let a = 2;

a ** 2 **4 // 2 * (2 * 4)

a **= 3 // a = 2 * 2 * 2

数组拓展

展开运算符

...将一个数组转成用逗号分隔的参数排列

console.log(1,2 ...[3,4]) // 1,2,3,4

方法拓展

Array.form() // 将类数组转换成数组
Array.of() // 用于将一组值，转换为数组

实例方法拓展

find()、findIndex() // find找到第一个知足条件的值，findIndex和前者相似，可是返回是下标，找不到返回-1
fill() 数组填充(params0:填充的值,params1:开始下坐标,params2:结束下坐标)
entries()，keys() 和 values() // 返回数组的键值对
includes() //是否包含某个值，返回bool值

flat()、flatMap() // 扯平数组

[1, 2, , [4, 5]].flat() //[1, 2, 4, 5] 默认拉平一层，参数num、Infinity自定义拉平层数目
    // flatMap() 至关于先进行Map再进行flat操做
    // 至关于 [[2, 4], [3, 6], [4, 8]].flat()
    [2, 3, 4].flatMap((x) => [x, x * 2])
    // [2, 4, 3, 6, 4, 8]

sort() //ES2019 明确要求排序的稳定性

数组的空位

ES6中明确将空位装换成undefined；数组实例方法、map、扩展操做符存在差别

总之避免空位的出现是很必要的

对象类型

简洁写法

对象中的属性、方法只要key、value名字一致，便可简写成一个以下

// 属性
let a = 'a';
let b = 'b';
let obj = { a, b }
// 等同于
let a = 'a';
let b = 'b';
let obj = { a:a, b:b }

// 方法
let obj = 
{
    a,
    b,
    c(){
        console.log('这是一个对象方法')
    }
}
// 等同于
let obj = 
{
    a,
    b,
    c:function(){
        console.log('这是一个对象方法')
    }
}

属性名表达式

let propKey = 'foo';

let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};
// 须要注意的是若是属性名是一个对象默认会装换成[object Object]

拓展操做符

// 合并对象
let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);

// 同数组拓展操做符后可跟表达式 如：
const obj = {
  ...(x > 1 ? {a: 1} : {}),
  b: 2,
};

拓展方法

可枚举性

每一个属性都有一个描述对象，用来控制属性的行为Object.getOwnPropertyDescriptor(obj,'key')可获取对应属性的描述行为，
描述中enumerable标识是否可遍历

总之：操做中引入继承的属性会让问题复杂化，大多数时候，咱们只关心对象自身的属性。因此，尽可能不要用for...in循环，而用Object.keys()代替

遍历方法

for in
Object.getOwnPropertyNames()
1. 返回一个数组，包含对象自身的全部属性（不含 Symbol 属性，可是包括不可枚举属性）的键名。
Object.getOwnPropertySymbols()
1. 返回一个数组，包含对象自身的全部 Symbol 属性的键名。
Reflect.ownKeys（）
1. 返回一个数组，包含对象自身的全部键名，无论键名是 Symbol 或字符串，也无论是否可枚举。
Object.is()
1. 传统判断值是否相等使用==或者===,前者会强制类型转换，后者NAN不等于自身，并+0等于-0,此方法就解决了上述问题
Object.assign()
1. Object.assign方法用于对象的合并，将源对象（source）的全部可枚举属性，复制到目标对象（target）,第一个参数就是目标对象,只会处理可枚举的数据类型，并Symbol值属性也会被拷贝
2. 数组处理将值一一对应成对象类型
Object.getOwnPropertyDescriptors()
1. 对ES5中Object.getOwnPropertyDescriptor()的拓展，返回对象中全部属性（非继承）的值
原型操做方法替代__proto__
1. Object.setPrototypeOf()（写操做）、
2. Object.getPrototypeOf()（读操做）、
3. Object.create()（生成操做
对象键值对获取
1. Object.keys()，
2. Object.values()，
3. Object.entries()
4. Object.fromEntries() // Object.fromEntries()方法是Object.entries()的逆操做，用于将一个键值对数组转为对象

遍历规则以下：

首先遍历全部数值键，按照数值升序排列。
其次遍历全部字符串键，按照加入时间升序排列。
最后遍历全部 Symbol 键，按照加入时间升序排列。

Super 关键字

指向当前对象的原型对象。

const proto = {
  x: 'hello',
  foo() {
    console.log(this.x);
  },
};

const obj = {
  x: 'world',
  foo() {
    super.foo();
  }
}

Object.setPrototypeOf(obj, proto);

obj.foo() // "world"

上面代码中，super.foo指向原型对象proto的foo方法，可是绑定的this却仍是当前对象obj，所以输出的就是world。

ES6进阶篇

进阶篇，咱们主要对新增的 Symbol、ArrayBuffer以及 Set和Map数据结构介绍、 Promise 到 async的演变和差别,异步遍历的思想,以及 Class、Module的使用；

Symbol类型

ES6引入的新的数据类型，保证了数据的独一无二的特性，能够用来标识对象的额惟一key值

// 新建类型
let a = Symbol()
// 添加描述（用于标识Symbol值）
let a = Symbol('描述文件')

特性:

不能new操做注意Symbol()是一个相似string类型的值，不是对象
不能与其余类型值进行计算
能够显性的转换成字符类型/布尔值
座位对象的属性的时候须要注意和字符型属性，赋值、取值区别开来

方法:

Symbol.for()、Symbol.keyFor()
返回同一个标识的Symbol类型，keyFor返回当前Symbol类型的惟一标识
Symbol.isConcatSpreadable
判断数组concat()操做的时候是否能够会别呗展开
Symbol.match
Symbol.replace
Symbol.search
Symbol.match
Symbol.iterator
Symbol.toPrimitive
Symbol.toStringTag
Symbol.unscopables

Set、Map数据结构

Set

Set 数据结构。它相似于数组，可是成员的值都是惟一的，没有重复的值。

特性:

去重
Set() 去重的判断相等依据和 === 基本一致，可是在判断NAN的时候会判断相等，而且两个对象老是不相等的
属性
- size Set实例成员的总数
方法
- add()
- delete()
- has() bool值,是不是set成员
- clear() 清除全部set成员

WeakSet

和 Set 的区别

只能存储对象类型，不能是其余数据类型
不进入垃圾回收机制
没有size属性，同时不能遍历

Map

Map 的数据类型相似对象，可是对象的key值能够是任意类型的 Map:值-值，不一样于传统 Object:字符串-值
属性

属性
- size 成员总数
方法
- set()
- get()
- has()
- delete()
- clear()

WeakMap

和Map的结构相似

和Map的差别

只接收对象做为键名
WeakMap的键名所指向的对象，不计入垃圾回收机制

用途

在 DOM 对象上保存相关数据

数据缓存

const cache = new WeakMap();function countOwnKeys(obj) {    if (cache.has(obj)) {        console.log('Cached');        return cache.get(obj);    } else {        console.log('Computed');        const count = Object.keys(obj).length;        cache.set(obj, count);        return count;    }}

私有变量

ArrayBuffer

操做二进制数据的一个接口。早就存在，属于独立的规格（2011 年 2 月发布），ES6 将它们归入了 ECMAScript 规格，而且增长了新的方法。它们都是以数组的语法处理二进制数据，因此统称为 二进制数组

注意:二进制数组并非真正的数组，而是相似数组的对象。

与Array的区别

属性类型
- Array 能够是基础数据类型，也能够是复杂数据类型
- ArrayBuffer 只能是 0 和 1 组成的二进制数据
数据存放规则
- Array 复杂数据类型存放在堆中
- ArrayBuffer 存放在栈中,读取数据更快
规格定义区别
- Array 无需初始定义大小，而且在使用的时候能够缩放大小
- ArrayBuffer 初始化须要定义大小，并不能再次修改

ArrayBuffer 对象

存储二进制数据的一段内存，不能直接进行读写，须要经过视图进行操做

new ArrayBuffer(32) //分配一个32位字节的内存

属性

- byteLength 返回分配区域的字节长度

方法

- slice() 操做ArrayBuffer 对象 生成一个新的内存地址
- isView() bool值返回是不是TypedArray视图实例（是不是一个视图）

TypedArray 视图

构造方法

经过构造方法生成视图

注:存在溢出问题

TypedArray(buffer, byteOffset=0, length?)
TypedArray(length) // 直接分配内存
TypedArray(typedArray) // 直接复制一个视图的值，生成一个新的视图
TypedArray(arrayLikeObject) // 直接生成TypedArray实例

实例属性

- buffer // 返回 ArrayBuffer 对象
- byteLength // 占据内存长度（成员长度）
- byteOffset // 视图从ArrayBuffer中开始位置
- length // 字节长度

实例方法

- set（） // 复制数组
- subarray（） // 返回新的视图
- slice（） // 返回新的视图
- of（） // 用于将参数转为一个TypedArray实例
- from() // from接受一个可遍历的数据结构（好比数组）做为参数，返回一个基于这个结构的TypedArray实例。 可有两个参数，第二个参数是fun

DataView 视图

实例属性

- buffer // 返回 ArrayBuffer 对象
- byteLength // 占据内存长度（成员长度）
- byteOffset // 视图从ArrayBuffer中开始位置

应用场景

网络请求中 blob 数据类型
Canvas 读取二进制像素数据
WebSocket 传输二进制数据
File new FileReader() 读取 ArrayBuffer对象

Promise/async

Promise 异步编程的解决方案，社区的提案， async 结局了Promise的回调地狱

Promise

有 padding(进行中)、fulfilled(成功)、rejected(失败)三种状态，状态已经改变就并不会变更

回调

then() 返回结果
catch() 捕获异常
finally() 异步回调后都会执行，无论成功仍是失败

`方法`

all(<array>)
多个promise回调等待内部全部Promise都返回成功结果/凡是一个返回reject才执行then()，多异步方法同时执行，全部都回调了再执行then() 方法
race(<array>)
同all，区别在于,只返回最早返回结果的异步请求，无论成功仍是失败
any()
和recede 区别是一组Promise中只有全部都reject以后才会返回失败
allSettled()
不一样于all的点是无论成功仍是失败都须要等全部异步都返回接口才会返回，因此他的状态永远是fulfilled

注意：

在reject、resolve中使用return，避免后续代码执行问题
Promise.all 若是子Promise已经拥有了 catch() 则 all() 的 catch() 再也不触发

`Async`

async 只是对 promise 的写法上的一种语法糖

async: 函数返回一个Promise对象,return 返回Promise的结果

await: 后面默认是一个Promise对象

try catch(): 捕获错误

顶层await

解决异步模块加载的问题

class

将传统 实例对象经过构造方法生成的过程放到class的语法糖中, 以下例

// 传统方法
function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

// class 方法
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

差别点: 严格模式、不存在变量提高、this指向

取值函数（getter）和存值函数（setter）

与 ES5 同样，在“类”的内部可使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为

静态方法 Static

静态方法不会被继承

静态属性

//现有
class Foo {
}

Foo.prop = 1;
Foo.prop // 1

// 提案
Static prop = 1

`私有方法/私有属性`

私有方法只能经过命名规则或者Symbol数据类型定义，私有属性有个提案使用的是 #

Module

ES6 提出的 Moduel是前端发展过程当中演变从 CommonJs递进

Module 语法

静态化（编译时加载）
严格模式遵循ES5的严格模式
export 和 export default 暴露模块
import 引入模块
import() 解决了按需加载/条件加载/动态模块路径的问题
export * from <moduel> 实现模块的继承

Module 的加载实现

defer、async
defer是“渲染完再执行”，async是“下载完就执行”。另外，若是有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。
ES6 和 Commonjs 差别
CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
循环加载问题
1. Commonjs
  CommonJS 模块遇到循环加载时，返回的是当前已经执行的部分的值，而不是代码所有执行后的值，二者可能会有差别。因此，输入变量的时候，必须很是当心。
2. ES6使用函数提高的优点解决报错

阮一峰ES6全面回顾

关于JavaScript

发展史

ECMAScript简介

提案规则

Babel转码器

配置.babelrc/babel.config.js

@babel/register、babel-core/register

@babel/polyfill

@babel/core

ES6基础篇

let & const

let

const

块级做用域

解构赋值

数组的解构

对象的解构

数组对象的解构

函数参数的解构

用途优点

字符串

添加Iterator接口

模板字符串

模板编译

字符串方法

数值类型

二进制、八进制表示法

方法

拓展符号(右结合即右边先运算)

数组拓展

展开运算符

方法拓展

实例方法拓展

数组的空位

对象类型

简洁写法

属性名表达式

拓展操做符

拓展方法

可枚举性

遍历方法

Super 关键字

ES6进阶篇

Symbol类型

Set、Map数据结构

Set

WeakSet

Map

WeakMap

ArrayBuffer

与Array的区别

ArrayBuffer 对象

属性

方法

TypedArray 视图

构造方法

实例属性

实例方法

DataView 视图

实例属性

应用场景

Promise/async

Promise

回调

方法

Async

顶层await

class

取值函数（getter）和存值函数（setter）

静态方法 Static

静态属性

私有方法/私有属性

Module

Module 语法

Module 的加载实现

`用途优点`

拓展符号(`右结合即右边先运算`)

`方法`

`Async`

`私有方法/私有属性`