你可能错过的现代 JavaScript 特性 [每日前端夜话0xE0]
尽管我在过去 7 年中几乎每天都在写 JavaScript 代码,但不得不承认,我实际上并不是很注意 ES 语言的发布声明。async/await 和 Proxies 之类的主要特性是一回事,但是每年都有稳定的小规模、渐进式的改进在不断涌现,因为总有一些东西需要学习。
所以在本文中,我收集了一些现代 JavaScript 特性,这些特性在首次发布时并没有带来太多的关注。其中一些只是编码质量的提高,而另外一些确实很方便,可以减少很多代码量。以下是你可能会错过的一些信息:
ES2015
二进制和八进制
在 JavaScript 中,二进制操作并不常见,但有时也会遇到,否则无法切实解决你的问题。你可能正在为低功耗设备编写高性能代码,将位压缩到本地存储中,在浏览器中进行像素 RGB 操作,或者必须处理紧密打包的二进制数据格式。
这可能意味着有很多工作需要对二进制数字进行处理,我一直觉得用十进制也能做这些事。好吧,ES6 为此添加了一个二进制数字格式:0b
1const binaryZero = 0b0; 2const binaryOne = 0b1; 3const binary255 = 0b11111111; 4const binaryLong = 0b111101011101101;
这使得处理二进制标志非常容易:
1// Pizza toppings 2const olives = 0b0001; 3const ham = 0b0010; 4const pineapple = 0b0100; 5const artechoke = 0b1000; 6 7const pizza_ham_pineapple = pineapple | ham; 8const pizza_four_seasons = olives | ham | artechoke;
对于八进制数也是如此。在 JS 世界中,这些领域有点小众,但在网络和某些文件格式中却很常见。现在你可以用语法 0o 处理八进制。
Number.isNaN()
不要与 window.isNaN() 混淆,这是一种有着更直观行为的新方法。
你会发现,经典的 isNaN 有一些有趣的怪癖:
1isNaN(NaN) === true 2isNaN(null) === false 3isNaN(undefined) === true 4isNaN({}) === true 5isNaN('0/0') === true 6isNaN('hello') === true
是什么导致了这种结果?首先,这些参数实际上都不是 NaN。与以往一样,问题出在大家“最喜欢的” JavaScript 特性上:类型强制。通过 Number 函数将 window.isNaN 的参数强制为数字。
好吧,新的 Number.isNaN() 静态方法解决了所有问题。它会一劳永逸地返回你提供的自变量与 NaN 的相等性。这是绝对明确的:
1Number.isNaN(NaN) === true 2Number.isNaN(null) === false 3Number.isNaN(undefined) === false 4Number.isNaN({}) === false 5Number.isNaN('0/0') === false 6Number.isNaN('hello') === false
函数签名: Number.isNaN : (value: any) => boolean
ES2016
指数(幂)运算符
很高兴有一个字面量的语法来表示幂:
12**2 === 4 23**2 === 9 33**3 === 27
(这很奇怪,因为我确信 JavaScript 已经有了这个 —— 我可能一直在考虑 Python)
Array.prototype.includes()
这个功能值得关注,如果你过去几年一直在写 array.indexOf(x)!== -1 这样的代码,那么现在可以用新的 includes 方法:
1[1, 2, 3].includes(2) === true 2[1, 2, 3].includes(true) === false
includes 用 Same Value Zero Algorithm(几乎与严格等式 === 相同)进行检查,但它可以处理 NaN 值。像相等检查一样,它将通过引用而不是内容来比较对象:
1const object1 = {}; 2const object2 = {}; 3 4const array = [object1, 78, NaN]; 5 6array.includes(object1) === true 7array.includes(object2) === false 8array.includes(NaN) === true
includes 可以通过第二个参数 fromIndex 让你提供一个偏移量:
1// positions 0 1 2 3 4 2const array = [1, 1, 1, 2, 2]; 3 4array.includes(1, 2) === true 5array.includes(1, 3) === false
太顺手了。
函数签名: Array.prototype.includes : (match: any, offset?: Int) => boolean
ES2017
共享数组缓冲区和原子操作
这是一对很棒的功能,如果你要与 web workers 一起做大量的工作,那么这些特性将被证明是无价的。它们使你可以直接在进程之间共享内存,并通过设置锁来避免资源争抢的情况。
它们都是相当复杂的 API 功能,因此这里不回对其进行概述,但是可以通过 Sitepen 的文章了解更多信息。目前有一些浏览器还不支持,但有望在未来几年内得到改善。
ES2018
强大的正则表达式
ES2018引入了一整套正则表达式特性:
Lookbehind 匹配项(前向匹配)
在支持它的运行时中,你现在可以用正则表达式来进行前向匹配。例如要查找所有以美元开头的数字:
1const regex = /(?<=\$)\d+/; 2const text = 'This cost $400'; 3text.match(regex) === ['400']
关键是新的 lookbehind 搜索组与lookahead 搜索组是一对邪恶的双胞胎:
1Look ahead: (?=abc) 2Look behind: (?<=abc) 3 4Look ahead negative: (?!abc) 5Look behind negative: (?<!abc) 6
不幸的是,目前还没有什么方法可以为较旧的浏览器支持新的后向语法,所以你目前只能在 Node 上用它。
你可以命名捕获组
正则表达式真正强大的功能是能够挑选出子匹配项,并用它们进行一些简单的解析。但是直到不久前,我们只能通过数字来引用子匹配项,例如:
1const getNameParts = /(\w+)\s+(\w+)/g; 2const name = "Weyland Smithers"; 3const subMatches = getNameParts.exec(name); 4 5subMatches[1] === 'Weyland' 6subMatches[2] === 'Smithers'
现在有了一种语法,可以通过在要命名的每个组的括号的开头放置 ? 来分配这些子匹配项(或捕获组)的名称:
1const getNameParts = /(?<first>\w+)\s(?<last>\w+)/g; 2const name = "Weyland Smithers"; 3const subMatches = getNameParts.exec(name); 4 5const {first, last} = subMatches.groups 6first === 'Weyland' 7last === 'Smithers'
不幸的是,目前暂时只有 Chrome 和 Node 支持。
现在可以用点匹配新行
你只需要提供 /s 标志,例如 /someRegex./s、`/anotherRegex./sg。
ES2019
Array.prototype.flat() & flatMap()
我很高兴在 MDN 上看到这些内容。
简单地说,flat() 将多维数组按指定的最大 depth 展平:
1const multiDimensional = [ 2 [1, 2, 3], 3 [4, 5, 6], 4 [7,[8,9]] 5]; 6 7multiDimensional.flat(2) === [1, 2, 3, 4, 5, 6, 7, 8, 9]
flatMap 本质上是一个 map,也是深度为 1 的 flat。当从映射函数返回一个数组,但你不希望结果为嵌套数据结构时,用它很方便:
1const texts = ["Hello,", "today I", "will", "use FlatMap"]; 2 3// with a plain map 4const mapped = texts.map(text => text.split(' ')); 5mapped === ['Hello', ['today', 'I'], 'will', ['use', 'FlatMap']]; 6 7// with flatmap 8const flatMapped = texts.flatMap(text => text.split(' ')); 9flatMapped === ['Hello', 'today', 'I', 'will', 'use', 'FlatMap'];
未绑定的捕获
现在你可以编写 try/catch 语句,而不必绑定抛出的错误:
1try { 2 // something throws 3} catch { 4 // don't have to do catch(e) 5}
顺便说一句,对你不关心的 e 的值的捕获行为,有时称为 Pokémon 异常处理。‘因为你要捕获所有的’!
字符串修剪方法
很小但是很好用:
1const padded = ' Hello world '; 2padded.trimStart() === 'Hello world '; 3padded.trimEnd() === ' Hello world';
原文:http://www.breck-mckye.com/blog/2019/10/modern-javascript-features-you-may-have-missed/
- 在现代 JavaScript 中编写异步任务[每日前端夜话0xDD]
- 深入理解 JavaScript 回调函数 [每日前端夜话0xDF]
- 7个常见的 JavaScript 测验及解答[每日前端夜话0xDE]
- 我们应该为 JavaScript 重新命名吗?[每日前端夜话0xDA]
- 15款不容错过的前端开发Javascript和css类库 - 2017版本~
- 在 Node.js 上运行 Flutter Web 应用和 API[每日前端夜话0xDC]
- 前端入门21-JavaScript的ES6新特性
- 这三个新特性可能改变JavaScript未来
- 怎样创建你的第一个React Native App[每日前端夜话0xD8]
- 你可能从未使用过的11+个JavaScript特性(小结)
- web前端不可错过的开发工具–Adobe Brackets(开源、简洁强大的HTML、CSS和JavaScript集成开发环境)
- web前端不可错过的开发工具–Adobe Brackets(开源、简洁强大的HTML、CSS和JavaScript集成开发环境)
- 怎样在前端Javascript中调用C#方法(3)使用特性Attribute
- 阿里云前端周刊 - 第 28 期_现代 JavaScript 语法清单_React 16 Fiber源码速览
- 前端JavaScript面试技巧-某课网价值149元实战教程
- WEB前端 -- Javascript中的this
- 不可错过的javascript迷你库
- 前端JavaScript笔记
- 假如铁扇公主穿越,在现代她的第一份工作可能是除雾霾!
- 前端之王能否续写辉煌 JavaScript服务器端开发现状