ES6 四大新功能速成攻略

大家好，这里是大家的林语冰。持续关注，坚持阅读，每天一次，进步一点。

地球人知道，"宪法"乃具备最高法律效力的规范性文件，任何花里胡哨的律令，违宪即达咩。

举一反一，JS 也有其"宪法" ------ 即 ES 语言说明书（ECMAScript Language Specification），更准确地说，该说明书可视为 ES 方言现行标准的"至高法"，规定了包括但不限于 JS 和 TS 等 ES 方言（几乎）所有的功能和行为。

ES 语言说明书每年或多或少都会增量更新，一道回头率超高的前端面试题是 ------ 请您简单讲讲任意 3 种广义 ES6（ES6+ 版本）近几年推出的新功能或新提案。

所以本期我们共享的是 ES 语言说明书 2023 载入史册的四大新功能：

数组反向查找
WeakMap 支持 Symbol 键
通过拷贝变更数组
Hashbang 语法

数组反向查找

数组反向查找源自 proposal-array-find-from-last 提案，顾名思义，即关于 Array/TypedArray 反向查找的提案，这在它们的原型上增量更新了两个实例方法：

[].findLast()
[].findLastIndex()

这两个方法和 find/findIndex() 不能说是毫无关系，只能说是截然相反。

举个栗子，我们来一组反向求偶的对照实验：

js 复制代码

// 反向求偶
const isEven = x => n % 2 === 0
const cats = [9, 9, 6]

// 对照组：今年之前
[...cats].reverse().find(isEven)// 6

// 实验组：去年之后
cats.findLast(isEven)// 6

如你所见，过往为了鲁棒地反向求偶，我们需要先拷贝、再反转、最后查找的"一键三连"，现在我们可以直接一步到位。

粉丝请注意，这只是一个简单的科普，目前关于这两个方法的第一印象，可能只是一个鸡肋的"语法糖"，但其实该方法幕后的设计动机更加复杂，我们日后再说，敬请期待。

`WeakMap` 支持 `Symbol` 键

另一道回头率超高的前端面试题是 ------ 请您简单讲讲 Map 和 WeakMap 的异同点。

满分答案的得分点包括但不限于：

支持的键的合法类型
GC（垃圾回收）的底层机制
其他加分项

这里我们重点科普键的合法类型。一般而言，我们会说，Map 支持所有 JS 类型的键，而 WeakMap 能且仅能支持对象类型的键，无法支持非对象类型（或者说原始类型）的键。

此答案在今年之前问题大不大，但在去年之后该答案就不再 100% 正确（或者说不够完备），因为细节上存在知识盲区。

具体而言，WeakMap 去年开始支持 Symbol 类型的键，此功能源自 proposal-symbols-as-weakmap-keys 提案。

举个栗子，我们来一组 WeakMap 的对照实验。

js 复制代码

const wm = new WeakMap()

wm.set(Symbol('cat'), '人猫神话') // 合法
wm.set(Symbol.for('cat'), '地球猫猫教') // 报错

如你所见，这里还有另一个坑，靠北！

B 站方言，WeakMap 支持 Symbol 键，但没有完全支持。这就有点猪头了。

严格而言，Symbol 也有若干种广义的分类，WeakMap 禁用 Symbol.for() 全局注册的键，因为全局注册会和 GC 产生冲突，无法顺利垃圾回收。

粉丝请注意，在面试时这一点最好也补充说明，因为运气水逆的话，邂逅鸡蛋里挑蛋黄的面试官，忘记补充某些细节可能会丧失心理优势。

另外，有时候可能遭遇 HR 和面试官的"武魂融合技"（尤其是应届和实习的场合），HR 出于职业病可能怂恿面试官"降本增笑"，面试官为了防止自己被"开猿节流"，也不得不鸡蛋里挑蛋黄。

还有第三层，就是群面时，越晚发言的倒霉蛋越没东东忽悠，这也是一种以备不时之需的知识储备。

通过拷贝变更数组

数组是一种回头率超高且人气爆棚的数据结构。通过拷贝变更数组源自 proposal-change-array-by-copy 提案，在数组原型上增量更新了四种变更数组的实例方法：

[].toReversed()
[].toSorted()
[].toSpliced()
[].with()

这四种方法与原有的 reverse/sort/splice 数组方法功能等价，区别在于它们没有"副作用"，这是通过返回一个新数组、而不是就地更新原数组来实现的。

换而言之，按照函数式编程的调调，新增的四种方法都是"纯函数"，主打的就是"无副作用"。

举个栗子，我们来一组数组反转的对照实验。

js 复制代码

const cats = ['薛定谔', '龙猫', '柴郡猫']
const reversed1 = cats.reverse()
const reversed2 = cats.toReversed()

console.log(cats == reversed1) // true
console.log(cats == reversed2) // false

如你所见，新方法会返回一个变更完毕的新数组，而旧方法会就地更新原数组，以前我们需要通过先拷贝、再变更的方式来实现等价的功能，如今诉诸新方法我们可以直接一步到位。

Hashbang 语法

Hashbang 语法源自 proposal-hashbang 提案，又名 Shebangs，因为 ES6 中的 Hashbang 语法类似于 Unix 中的 shebang。

MDN 电子书如是说，Hashbang 是一种奇葩的注释语法，其行为与 // 单行注释大抵相同，只是以 #! 开头。

就我个人而言，我目前只在 Node 的某些构建流程中看到其现实应用场景。事实上，该语法也是因为在 Node 中已经"生米煮成熟饭"了，才从"临床实验"进化为现行事实标准。但 Hashbang 语法本身并不受限于 Node 环境，这就是它能够入驻 ES 语言说明书的原因。

举个栗子，大家可以瞄一下有没有 Hashbang 语法的"既视感"，某些道友估计似曾相识。

js 复制代码

#!/usr/bin/env node
// 上面就是 Hashbang 语法
// 明示宿主环境是 node
console.log('Hello cat')

粉丝请注意，#! 标志之前不允许有任何空白字符，所以我只能把注释写下它下面。换而言之，当且仅当位于脚本或模块的最顶部时，Hashbang 才能奏效。

高潮总结

面试官问：请您简单讲讲任意 3 种广义 ES6 近几年推出的新功能或新提案。

ES 语言说明书如是说，ES6 去年增量更新了四大功能：

数组反向查找（不只是语法糖）
WeakMap 支持 Symbol 键（有坑）
通过拷贝变更数组（纯函数）
Hashbang 语法（佛系）

粉丝请注意，面试不是说得越多越好，而是说得越清晰、越专业越好。一般而言，除了个别必知必背的面试题（比如 ES6 的数据类型），在举栗子的时候，个人建议遵循"事不过三"的原则。

因为人脑的瞬时内存大约是 7±2 比特，这就是本人记不住女粉微信号的原因。考虑到面试官未必机智如我，先举 3 个栗子，如果它有展开说说的欲望，我们再继续举 3 个栗子，以此类推。

《前端 9 点半》每日更新，持续关注，坚持阅读，每天一次，进步一点。

谢谢大家的点赞，掰掰~

ES6 四大新功能速成攻略

数组反向查找

WeakMap 支持 Symbol 键

通过拷贝变更数组

Hashbang 语法

高潮总结

`WeakMap` 支持 `Symbol` 键