ES6 四大新功能速成攻略

ES6 四大新功能速成攻略

首页冒险解谜秃头进化更新时间:2024-04-21

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

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

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

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

数组反向查找

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

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

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

// 反向求偶 const isEven = x => n % 2 === 0 const cats = [9, 9, 6] // 对照组:今年之前 [...cats].reverse().find(isEven)// 6 // 实验组:去年之后 cats.findLast(isEven)// 6

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

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

WeakMap支持Symbol键

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

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

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

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

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

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

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 提案,在数组原型上增量更新了四种变更数组的实例方法:

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

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

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

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 语法的“既视感”,某些道友估计似曾相识。

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

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

高潮总结

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

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

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

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

,
大家还看了
也许喜欢
更多游戏

Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved