网站首页 > 技术文章 正文
地球人知道,“宪法”乃具备最高法律效力的规范性文件,任何花里胡哨的律令,违宪即达咩。
举一反一,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键
另一道回头率超高的前端面试题是 —— 请您简单讲讲 Map 和 WeakMap 的异同点。
满分答案的得分点包括但不限于:
- 支持的键的合法类型
- 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 个栗子,以此类推。
猜你喜欢
- 2024-11-14 Vue3.0 响应式数据原理:ES6 Proxy
- 2024-11-14 腾讯面试四问,Are you OK? 腾讯hr面试问题
- 2024-11-14 高频JavaScript手写面试题及答案 前端面试笔试题手写代码
- 2024-11-14 四大问题之腾讯面试 腾讯公司面试问题
- 2024-11-14 通俗易懂的Vue响应式原理以及依赖收集
- 2024-11-14 45道JS能力测评经典题总结 js基础题及答案解析
- 2024-11-14 看了vue的源码,我用proxy实现了更强大的storage
- 2024-11-14 JavaScript知识整理 js知识点总结
- 2024-11-14 JavaScript基础之对象与内置对象总结
- 2024-11-14 原生JS灵魂之问(中),看看你是否熟悉JavaScript?
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-