编程技术文章分享与教程

网站首页 > 技术文章 正文

ES6 四大新功能速成攻略 es6基础入门

hmc789 2024-11-14 16:31:27 技术文章 2 ℃

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

举一反一,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() 不能说是毫无关系,只能说是截然相反。

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

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

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

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

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

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

WeakMap支持Symbol键

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

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

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

这里我们重点科普键的合法类型。一般而言,我们会说,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 提案,在数组原型上增量更新了四种变更数组的实例方法:

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

这四种方法与原有的 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 去年增量更新了四大功能:

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

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

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

Tags:

标签列表
最新留言