一份精心总结的3万字ES6实用指南（下）(1)

constructor(iterable) {

this.data = iterable

}

async *Symbol.asyncIterator {

let length = this.data.length,

index = 0;

while (index < length) {

yield this.data[index++]

}

}

}

async function asyncCount() {

let emitter = new Emitter([1, 2, 3])

const asyncIterable = emitterSymbol.asyncIterator

for await (const x of asyncIterable ) {

console.log(x)

}

}

asyncCount()

// 1 2 3

参考：

• Iteration_protocols

• for-await…of

s修饰符(dotAll模式)

正则表达式新增了一个 s 修饰符，使得 . 可以匹配任意单个字符：

/foo.bar/.test(‘foo\nbar’)   // false

/foo.bar/s.test(‘foo\nbar’)  // true

上面这又被称为 dotAll 模式，表示点（dot）代表一切字符。所以，正则表达式还引入了一个dotAll属性，返回一个布尔值，表示该正则表达式是否处在dotAll模式：

/foo.bar/s.dotAll  // true

具名组匹配

正则表达式可以使用捕获组来匹配字符串，但是想要获取某个组的结果只能通过对应的索引来获取：

let re = /(\d{4})-(\d{2})-(\d{2})/

let result = re.exec(‘2015-01-02’)

// result[0] === ‘2015-01-02’

// result[1] === ‘2015’

// result[2] === ‘01’

// result[3] === ‘02’

而现在我们可以通过给捕获组 (?<name>...) 加上名字 name ，通过名字来获取对应组的结果：

let re = /(?\d{4})-(?\d{2})-(?\d{2})/

let result = re.exec(‘2015-01-02’)

// result.groups.year === ‘2015’

// result.groups.month === ‘01’

// result.groups.day === ‘02’

配合解构赋值可以写出非常精简的代码：

let {groups: {year, month, day}} = /(?\d{4})-(?\d{2})-(?\d{2})/.exec(‘2015-01-02’)

console.log(year, month, day)  // 2015 01 02

具名组也可以通过传递给 String.prototype.replace 的替换值中进行引用。如果该值为字符串，则可以使用 $<name> 获取到对应组的结果：

let re = /(?\d{4})-(?\d{2})-(?\d{2})/

let result = ‘2015-01-02’.replace(re, ‘$<day>/$/$’)

// result === ‘02/01/2015’

参考：

• proposal-regexp-named-groups

后行断言

后行断言：(?<=y)x，x 只有在 y 后面才能匹配：

/(?<=$)\d+/.exec(‘I have $100.’)  // [‘100’]

后行否定断言：(?<!y)x，x 只有不在 y 后面才能匹配：

/(?<!$)\d+/.exec(‘I have $100.’)  // [‘00’]

Unicode属性转义

允许正则表达式匹配符合 Unicode 某种属性的所有字符，\p{...} 是匹配包含，\P{...} 是匹配不包含的字符，且必须搭配 /u 修饰符才会生效：

/\p{Emoji}+/u.exec(‘???笑死我了???不行了’)  // [‘???’]

/\P{Emoji}+/u.exec(‘???笑死我了???不行了’)  // [‘笑死我了’]

这里可以查询到更多的 Unicode 的属性 Full_Properties

对象扩展运算符

对象的扩展运算符可以用到解构赋值上，且只能应用到最后一个变量上：

let {x, …y} = {x: 1, a: 2, b: 3}

console.log(y)  // {a: 2, b: 3}

对象扩展运算符不能解构原型上的属性：

let obj = { x: 1 }

obj.proto = { y: 2 }

let {…a} = obj

console.log(a.y)  // undefined

应用一：可以实现浅拷贝，但是不会拷贝原始属性：

let person = Object.create({ name: ‘布兰’ })

person.age = 12

// 浅拷贝写法一

let { …pClone1 } = person

console.log(pClone1)  // { age: 12 }

console.log(pClone1.name)  // undefined

// 浅拷贝写法二

let pClone2 = {…person}

console.log(pClone2)  // { age: 12 }

console.log(pClone2.name)  // undefined

应用二：合并两个对象：

let ab = {…a, …b}

// 等同于

let ab = Object.assign({}, a, b);

应用三：重写对象属性

let aWithOverrides = { …a, x: 1, y: 2 };

应用四：给新对象设置默认值

let aWithDefaults = { x: 1, y: 2, …a };

应用五：利用扩展运算符的解构赋值可以扩展函数参数：

function baseFunction({ a, b }) {}

function wrapperFunction({ x, y, …restConfig }) {

// 使用 x 和 y 参数进行操作

// 其余参数传给原始函数

return baseFunction(restConfig)

}

参考：

• Object Spread Initializer

• Object Rest Destructuring

放松对标签模板里字符串转义的限制

参考：

• ECMAScript 6 入门

ES2019

---

允许省略catch里的参数

异常被捕获的时候如果不需要做操作，甚至可以省略 catch(err) 里的参数和圆括号：

try {

} catch {

}

JSON.stringify()变动

UTF-8 标准规定，0xD800 到 0xDFFF 之间的码点，不能单独使用，必须配对使用。所以 JSON.stringify() 对单个码点进行操作，如果码点符合 UTF-8 标准，则会返回对应的字符，否则会返回对应的码点：

JSON.stringify(‘\u{1f600}’)  // “”???“”

JSON.stringify(‘\u{D834}’)  // “”\ud834""

Symbol.prototype.description

Symbol 实例新增了一个描述属性 description：

let symbol = Symbol(‘foo’)

symbol.description  // ‘foo’

Function.prototype.toString()

函数的 toString() 会原样输出函数定义时候的样子，不会省略注释和空格。

Object.fromEntries()

Object.fromEntries() 方法是 Object.entries() 的逆操作，用于将一个键值对数组转为对象：

let person = { name: ‘布兰’, age: 12 }

let keyValueArr = Object.entries(person)   // [[‘name’, ‘布兰’], [‘age’, 12]]

let obj = Object.fromEntries(arr)  // { name: ‘布兰’, age: 12 }

常用可迭代数据结构之间的装换：

let person = { name: ‘布兰’, age: 12 }

// 对象 -> 键值对数组

let keyValueArr = Object.entries(person)  // [[‘name’, ‘布兰’], [‘age’, 12]]

// 键值对数组 -> Map

let map = new Map(keyValueArr)  // Map {“name”: “布兰”, “age”: 12}

// Map -> 键值对数组

let arr = Array.from(map)  // [[‘name’, ‘布兰’], [‘age’, 12]]

// 键值对数组 -> 对象

let obj = Array.from(arr).reduce((acc, [ key, val ]) => Object.assign(acc, { [key]: val }), {})  // { name: ‘布兰’, age: 12 }

参考：

• Object.fromEntries

字符串可直接输入行分隔符和段分隔符

JavaScript 规定有 5 个字符，不能在字符串里面直接使用，只能使用转义形式。

• U+005C：反斜杠（reverse solidus)

• U+000D：回车（carriage return）

• U+2028：行分隔符（line separator）

• U+2029：段分隔符（paragraph separator）

• U+000A：换行符（line feed）

但是由于 JSON 允许字符串里可以使用 U+2028 和 U+2029，所以使得 JSON.parse() 去解析字符串的时候可能会报错，所以 ES2019 允许模板字符串里可以直接这两个字符：

JSON.parse(‘“\u2028”’)  // “”

JSON.parse(‘“\u2029”’)  // “”

JSON.parse(‘“\u005C”’)  // SyntaxError

String.prototype.trimStart

消除字符串头部空格，返回一个新字符串；浏览器还额外增加了它的别名函数 trimLeft()：

let str = ’  hello world ’

let newStr = str.trimStart()

console.log(newStr, newStr === str)

// 'hello world ’  false

String.prototype.trimEnd

消除字符串尾部空格，返回一个新字符串；浏览器还额外增加了它的别名函数 trimRight()：

let str = ’  hello world ’

let newStr = str.trimEnd()

console.log(newStr, newStr === str)

// ’  hello world’  false

Array.prototype.flat()

arr.flat(depth) 按照 depth （不传值的话默认是 1）深度拍平一个数组，并且将结果以新数组形式返回：

// depth 默认是 1

const arr1 = [1, 2, [3, 4]]

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

// 使用 Infinity，可展开任意深度的嵌套数组；自动跳过空数组；

const arr2 = [1, , [2, [3, [4]]]]

console.log(arr2.flat(Infinity))

// [1, 2, 3, 4]

用 reduce 实现拍平一层数组：

const arr = [1, 2, [3, 4]]

// 方法一

let newStr = arr.reduce((acc, cur) => acc.concat(cur), [])

// 方法二

const flattened = arr => [].concat(…arr)

flattened(arr)

参考：

• flat

Array.prototype.flatMap()

flatMap(callback) 使用映射函数 callback 映射每个元素，callback 每次的返回值组成一个数组，并且将这个数组执行类似 arr.flat(1) 的操作进行拍平一层后最后返回结果：

const arr1 = [1, 2, 3, 4]

arr1.flatMap(x => [x * 2])

// 将 [[2], [4], [6], [8]] 数组拍平一层得到最终结果：[2, 4, 6, 8]

参考：

• flatMap

ES2020

---

String.prototype.matchAll()

String.prototype.matchAll() 方法，可以一次性取出所有匹配。不过，它返回的是一个 RegExpStringIterator 迭代器同是也是一个可迭代的数据结构，所以可以通过 for...of 进行迭代：

let str = ‘test1test2’

let regexp = /t(e)(st(\d?))/g

let iterable = str.matchAll(regexp)

for (const x of iterable) {

console.log(x)

}

// [‘test1’, ‘e’, ‘st1’, ‘1’, index: 0, input: ‘test1test1’, groups: undefined]

// [‘test2’, ‘e’, ‘st2’, ‘2’, index: 5, input: ‘test1test2’, groups: undefined]

❝

注意当使用 matchAll(regexp) 的时候，正则表达式必须加上 /g 修饰符。

❞

也可以将这个可迭代数据转成数组形式：

// 方法一

[…str.matchAll(regexp)]

// 方法二

Array.from(str.matchAll(regexp))

动态import()

标准用法的 import 导入的模块是静态的，会使所有被导入的模块，在加载时就被编译（无法做到按需编译，降低首页加载速度）。有些场景中，你可能希望根据条件导入模块或者按需导入模块，这时你可以使用动态导入代替静态导入。

比如按需加载一个模块可以这样：

if (xxx) {

import(‘./module.js’)

}

import() 是异步导入的，结果会返回一个 Promise：

import(‘/module.js’)

.then((module) => {

// Do something with the module.

})

动态 import() 的应用场景挺多的，比如 Vue 中的路由懒加载就是使用的动态导入组件。另外由于动态性不便于静态分析工具和 tree-shaking 工作，所以不能滥用。

BigInt

BigInt 是一种内置对象，它提供了一种方法来表示大于 - 1 的整数。这原本是 Javascript 中可以用 Number 表示的最大数字。BigInt 可以表示任意大的整数。

为了区分 Number，定义一个 BigInt 需要在整数后面加上一个 n，或者用函数直接定义：

const num1 = 10n

const num2 = BigInt(20)

Number 和 BigInt 之间能进行比较，但他们之间是宽松相等；且由于他们表示的是不同类型的数字，所以不能直接进行四则运算：

10n == 10         // true

10n === 10        // false

10n > 8           // true

10 + Number(10n)  // 20

10 + 10n          // TypeError

Promise.allSettled

Promise.allSettled(iterable) 当所有的实例都已经 settled，即状态变化过了，那么将返回一个新实例，该新实例的内部值是由所有实例的值和状态组合成的数组，数组的每项是由每个实例的状态和内部值组成的对象。

function init(){

return 3

}

let p1 = Promise.allSettled([

new Promise((resolve, reject) => {

resolve(9)

}).then(res => {}),

new Promise((resolve, reject) => {

reject(6)

}),

init()

])

let p2 = p1.then(res => {

console.log(res)

}, err => {

console.log(err)

})

// [

//      {status: “fulfilled”, value: undefined},

//      {status: “rejected”, reason: 6},

//      {status: “fulfilled”, value: 3}

// ]

只要所有实例中包含一个 pending 状态的实例，那么 Promise.allSettled() 的结果为返回一个这样 Promise {<pending>} 的实例。

globalThis

在以前，从不同的 JavaScript 环境中获取全局对象需要不同的语句。在 Web 中，可以通过 window、self 或者 frames 取到全局对象，但是在 Web Workers 中，只有 self 可以。在 Node.js 中，它们都无法获取，必须使用 global。

而现在只需要使用 globalThis 即可获取到顶层对象，而不用担心环境问题。

// 在浏览器中

globalThis === window  // true

import.meta

import.meta 是一个给 JavaScript 模块暴露特定上下文的元数据属性的对象。它包含了这个模块的信息，比如说这个模块的 URL，import.meta 必须在一个模块里使用：

// 没有声明 type=“module”，就使用 import.meta 会报错

// 在module.js里

console.log(import.meta)

// {url: “http://localhost/3ag/js/module.js”}

如果需要在配置了 Webpack 的项目，比如 Vue 里使用 import.meta 需要加一个包且配置一下参数，否则项目编译阶段会报错。

包配置详情参考：

• @open-wc/webpack-import-meta-loader

比如我用的是 4.x 版本的 vue-cli，那我需要在 vue.config.js 里配置：

module.exports = {

chainWebpack: config => {

config.module

.rule(‘js’)

.test(/.js$/)

.use(‘@open-wc/webpack-import-meta-loader’)

.loader(‘@open-wc/webpack-import-meta-loader’)

.end()

}

}

可选链操作符（?.）

通常我们获取一个深层对象的属性会需要写很多判断或者使用逻辑与 && 操作符，因为对象的某个属性如果为 null 或者 undefined 就有可能报错：

let obj = {

first: {

second: ‘布兰’

}

}

// 写法一

let name1 = ‘’

if (obj) {

if (obj.first) {

name1 = obj.first.second

}

}

// 写法二

let name2 = obj && obj.first && obj.first.second

?. 操作符允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。如果某个属性为 null 或者 undefined 则结果直接为 undefined。有了可选链操作符就可以使得表达式更加简明了，对于上面例子用可选链操作符可以这么写：

let name3 = obj?.first?.second

空值合并操作符（??）

对于逻辑或 || 运算符，当对运算符左侧的操作数进行装换为 Boolean 值的时候，如果为 true，则取左边的操作数为结果，否则取右边的操作数为结果：

let name = ‘’ || ‘布兰’

console.log(name)  // ‘布兰’

我们都知道 ''、0、null、undefined、false、NaN 等转成 Boolean 值的时候都是 false，所以都会取右边的操作数。这个时候如果要给变量设置默认值，如果遇到本身值就可能是 '' 或 0 的情况那就会出错了，会被错误的设置为默认值了。

而 ?? 操作符就是为了解决这个问题而出现的，x ?? y 只有左侧的操作数为 null 或 undefined 的时候才取右侧操作数，否则取左侧操作数：

let num = 0 ?? 1

console.log(num)  // 0

ES2021

---

如下这几个提案已经确定了会在 2021 年发布，所以把他们归到 ES2021 中。

String.prototype.replaceAll

之前需要替换一个字符串里的全部匹配字符可以这样做：

const queryString = ‘q=query+string+parameters’

// 方法一

const withSpaces1 = queryString.replace(/+/g, ’ ')

// 方法二

const withSpaces2 = queryString.split(‘+’).join(’ ')

而现在只需要这么做：

const withSpace3 = queryString.replaceAll(‘+’, ’ ')

❝

replaceAll 的第一个参数可以是字符串也可以是正则表达式，当是正则表达式的时候，必须加上全局修饰符 /g，否则报错。

❞

参考：

• string-replaceall

Promise.any()

Promsie.any() 和 Promise.all() 一样接受一个可迭代的对象，然后依据不同的入参会返回不同的新实例：

• 传一个空的可迭代对象或者可迭代对象所有 Promise 都是 rejected 状态的，则会抛出一个 AggregateError 类型的错误，同时返回一个 rejected 状态的新实例：

let p1 = Promise.any([])

let p2.catch(err => {})

setTimeout(console.log, 0, p1)

// Promise {: AggregateError: All promises were rejected}

• 只要可迭代对象里包含任何一个 fulfilled 状态的 Promise，则会返回第一个 fulfilled 的实例，并且以它的值作为新实例的值：

let p = Promise.any([

1,

Promise.reject(2),

new Promise((resolve, reject) => {}),

Promise.resolve(3),

])

setTimeout(console.log, 0, p)

// Promise {: 1}

• 其他情况下，都会返回一个 pending 状态的实例：

let p = Promise.any([

Promise.reject(2),

Promise.reject(3),

new Promise((resolve, reject) => {}),

])

setTimeout(console.log, 0, p)

// Promise {: undefined}

WeakRef

我们知道一个普通的引用（默认是强引用）会将与之对应的对象保存在内存中。只有当该对象没有任何的强引用时，JavaScript 引擎 GC 才会销毁该对象并且回收该对象所占的内存空间。

WeakRef 对象允许你保留对另一个对象的弱引用，而不会阻止被弱引用的对象被 GC 回收。WeakRef 的实例方法 deref() 可以返回当前实例的 WeakRef 对象所绑定的 target 对象，如果该 target 对象已被 GC 回收则返回 undefined：

let person = { name: ‘布兰’, age: 12 }

let wr = new WeakRef(person)

console.log(wr.deref())

// { name: ‘布兰’, age: 12 }

❝

正确使用 WeakRef 对象需要仔细的考虑，最好尽量避免使用。这里面有诸多原因，比如：GC 在一个 JavaScript 引擎中的行为有可能在另一个 JavaScript 引擎中的行为大相径庭，或者甚至在同一类引擎，不同版本中 GC 的行为都有可能有较大的差距。GC 目前还是 JavaScript 引擎实现者不断改进和改进解决方案的一个难题。

❞

参考：

• WeakRef

• 内存管理

逻辑赋值符

逻辑赋值符包含 3 个：

• x &&= y：逻辑与赋值符，相当于 x && (x = y)

• x ||= y：逻辑或赋值符，相当于 x || (x = y)

• x ??= y：逻辑空赋值符，相当于 x ?? (x = y)

看如下示例，加深理解：

let x = 0

x &&= 1  // x: 0

x ||= 1  // x: 1

x ??= 2  // x: 1

let y = 1

y &&= 0     // y: 0

y ||= null  // y: null

y ??= 2     // y: 2

数值分隔符（_）

对于下面一串数字，你一眼看上去不确定它到底是多少吧？

const num = 1000000000

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】