关闭

你可能错过的现代 JavaScript 特性

时间: 2019-10-05阅读: 547标签: 特性

尽管我在过去 7 年中几乎每天都在写 JavaScript 代码,但不得不承认,我实际上并不是很注意 ES 语言的发布声明。 async/await 和 Proxies 之类的主要特性是一回事,但是每年都有稳定的小规模、渐进式的改进在不断涌现,因为总有一些东西需要学习。

所以在本文中,我收集了一些现代 JavaScript 特性,这些特性在首次发布时并没有带来太多的关注。其中一些只是编码质量的提高,而另外一些确实很方便,可以减少很多代码量。以下是你可能会错过的一些信息:


ES2015

二进制和八进制

在 JavaScript 中,二进制操作并不常见,但有时也会遇到,否则无法切实解决你的问题。你可能正在为低功耗设备编写高性能代码,将位压缩到本地存储中,在浏览器中进行像素 RGB 操作,或者必须处理紧密打包的二进制数据格式。

这可能意味着有很多工作需要对二进制数字进行处理,我一直觉得用十进制也能做这些事。好吧,ES6 为此添加了一个二进制数字格式:0b

const binaryZero = 0b0;
const binaryOne  = 0b1;
const binary255  = 0b11111111;
const binaryLong = 0b111101011101101;

这使得处理二进制标志非常容易:

// Pizza toppings
const olives    = 0b0001;
const ham       = 0b0010;
const pineapple = 0b0100;
const artechoke = 0b1000;

const pizza_ham_pineapple = pineapple | ham;
const pizza_four_seasons  = olives | ham | artechoke;

对于八进制数也是如此。在 js 世界中,这些领域有点小众,但在网络和某些文件格式中却很常见。现在你可以用语法 0o 处理八进制。


Number.isNaN()

不要与 window.isNaN() 混淆,这是一种有着更直观行为的新方法。

你会发现,经典的 isNaN 有一些有趣的怪癖:

isNaN(NaN)              === true
isNaN(null)             === false
isNaN(undefined)        === true
isNaN({})               === true
isNaN('0/0')            === true
isNaN('hello')          === true

是什么导致了这种结果?首先,这些参数实际上都不是 NaN。与以往一样,问题出在大家“最喜欢的” JavaScript 特性上:类型强制。通过 Number 函数将 window.isNaN 的参数强制为数字。

好吧,新的 Number.isNaN() 静态方法解决了所有问题。它会一劳永逸地返回你提供的自变量与 NaN 的相等性。这是绝对明确的:

Number.isNaN(NaN)       === true
Number.isNaN(null)      === false
Number.isNaN(undefined) === false
Number.isNaN({})        === false
Number.isNaN('0/0')     === false
Number.isNaN('hello')   === false

函数签名: Number.isNaN : (value: any) => boolean


ES2016

指数(幂)运算符

很高兴有一个字面量的语法来表示幂:

2**2 === 4
3**2 === 9
3**3 === 27

(这很奇怪,因为我确信 JavaScript 已经有了这个 —— 我可能一直在考虑 Python)


Array.prototype.includes()

这个功能值得关注,如果你过去几年一直在写 array.indexOf(x)!== -1 这样的代码,那么现在可以用新的 includes 方法:

[1, 2, 3].includes(2)    === true
[1, 2, 3].includes(true) === false

includes 用 Same Value Zero Algorithm(几乎与严格等式 === 相同)进行检查,但它可以处理 NaN 值。像相等检查一样,它将通过引用而不是内容来比较对象:

const object1 = {};
const object2 = {};

const array = [object1, 78, NaN];

array.includes(object1) === true
array.includes(object2) === false
array.includes(NaN)     === true

includes 可以通过第二个参数 fromIndex 让你提供一个偏移量:

// positions   0  1  2  3  4
const array = [1, 1, 1, 2, 2];

array.includes(1, 2) === true
array.includes(1, 3) === false

太顺手了。

函数签名: Array.prototype.includes : (match: any, offset?: Int) => boolean


ES2017

共享数组缓冲区和原子操作

这是一对很棒的功能,如果你要与 web workers 一起做大量的工作,那么这些特性将被证明是无价的。它们使你可以直接在进程之间共享内存,并通过设置锁来避免资源争抢的情况。

它们都是相当复杂的 API 功能,因此这里不回对其进行概述,但是可以通过 Sitepen 的文章了解更多信息。目前有一些浏览器还不支持,但有望在未来几年内得到改善。


ES2018

强大的正则表达式

ES2018引入了一整套正则表达式特性:

Lookbehind 匹配项(前向匹配)

在支持它的运行时中,你现在可以用正则表达式来进行前向匹配。例如要查找所有以美元开头的数字:

const regex = /(?<=\$)\d+/;
const text  = 'This cost $400';
text.match(regex) === ['400']

关键是新的 lookbehind 搜索组与lookahead 搜索组是一对邪恶的双胞胎:

Look ahead:  (?=abc)
Look behind: (?<=abc)

Look ahead negative:  (?!abc)
Look behind negative: (?<!abc)

不幸的是,目前还没有什么方法可以为较旧的浏览器支持新的后向语法,所以你目前只能在 Node 上用它。

你可以命名捕获组

正则表达式真正强大的功能是能够挑选出子匹配项,并用它们进行一些简单的解析。但是直到不久前,我们只能通过数字来引用子匹配项,例如:

const getNameParts  = /(\w+)\s+(\w+)/g;
const name          = "Weyland Smithers";
const subMatches    = getNameParts.exec(name);

subMatches[1]     === 'Weyland'
subMatches[2]     === 'Smithers'

现在有了一种语法,可以通过在要命名的每个组的括号的开头放置 ? 来分配这些子匹配项(或捕获组)的名称:

const getNameParts  = /(?<first>\w+)\s(?<last>\w+)/g;
const name          = "Weyland Smithers";
const subMatches    = getNameParts.exec(name);

const {first, last} = subMatches.groups
first             === 'Weyland'
last              === 'Smithers'

不幸的是,目前暂时只有 Chrome 和 Node 支持。

现在可以用点匹配新行

你只需要提供 /s 标志,例如 /someRegex./s、`/anotherRegex./sg。


ES2019

Array.prototype.flat() & flatMap()

我很高兴在 MDN 上看到这些内容。

简单地说,flat() 将多维数组按指定的最大 depth 展平:

const multiDimensional = [
    [1, 2, 3],
    [4, 5, 6],
    [7,[8,9]]
];

multiDimensional.flat(2) === [1, 2, 3, 4, 5, 6, 7, 8, 9]

flatMap 本质上是一个 map,也是深度为 1 的 flat。当从映射函数返回一个数组,但你不希望结果为嵌套数据结构时,用它很方便:

const texts = ["Hello,", "today I", "will", "use FlatMap"];

// with a plain map
const mapped = texts.map(text => text.split(' '));
mapped === ['Hello', ['today', 'I'], 'will', ['use', 'FlatMap']];

// with flatmap
const flatMapped = texts.flatMap(text => text.split(' '));
flatMapped === ['Hello', 'today', 'I', 'will', 'use', 'FlatMap'];

未绑定的捕获

现在你可以编写 try/catch 语句,而不必绑定抛出的错误:

try {
  // something throws
} catch {
  // don't have to do catch(e)
}

顺便说一句,对你不关心的 e 的值的捕获行为,有时称为 Pokémon 异常处理。 ‘因为你要捕获所有的’!

字符串修剪方法

很小但是很好用:

const padded         = '          Hello world   ';
padded.trimStart() === 'Hello world   ';
padded.trimEnd()   === '          Hello world';
作者:Jimmy Breck-McKye
翻译:疯狂的技术
原文:http://www.breck-mckye.com/bl...


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/6274

关闭

你可能不知道的JS特性:可选链

今天我们来介绍一个你可能没见过的 JS 新特性,目前处于 Stage 3 阶段,它叫作 可选链(optional chaining),它可能解决很多人都面对过的痛点,让我们来了解这下~

使用 React 要懂的 Js特性

与我使用的其他框架相比,我最喜欢 React 的原因之一就是它对 JavaScript 的暴露程度。没有模板DSL( JSX 编译为合理的 JavaScript),组件 API 只是通过添加 React Hooks 变得更简单,并且该框架为解决的核心 UI 问题提供非常少的抽象概念

神奇的javascript

虽然js是弱类型语言,声明变量时也不需要显式指定类型。但是,数据本身依旧还是有类型的,比如数字和字符串就是以不同形式存在的数据。在js中,所有数字的类型都为number。其中,一个特殊的数字就是NaN(Not a number)

typescript 3.7中值得注意的3个新特性

距 typescript 3.7 正式发布已经有一段时间了,这段时间正在对手上的项目进行 typescript 的迁移工作,所以会特别留意每一次的 release。对于 3.7 中包含的新特性,其实相比较之前几次 release 来说

ES2019 新特性汇总

最近 ECMAScript2019,最新提案完成:tc39 Finished Proposals,我这里也是按照官方介绍的顺序进行整理,如有疑问,可以查看官方介绍啦~另外之前也整理了 《ES6/ES7/ES8/ES9系列》,可以一起看哈。

Js对象属性的特性 和defineProperty方法

对象是无序属性的集合,而这些属性在创建是都带有一些特征值(可以理解为属性的属性,天生自带的),这些特征值是为了实现JavaScript引擎用的,因此JavaScript不能直接访问

CSS新特性contain,控制页面的重绘与重排

contain 属性允许我们指定特定的 DOM 元素和它的子元素,让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排,而不必每次都针对整个页面。

Html5、Css3、ES6的新特性

Html5的新特性语义化标签:有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重。表单新特性,多媒体视频(video)和音频(audio)

h5和css3的新特性有哪些?

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准。CSS3是CSS(层叠样式表)技术的升级版本。下面我们来看一下HTML5余css3的新特性有哪些。

CSS 的特性值

在介绍 CSS 的特性和值的时候,特地的提到了浏览器应该怎样处理错误的值 -- 应该将包含错误值,不符合句法的值的声明直接忽略。然而有些浏览器却按照自己的方式做了某些纠正,也就是浏览器容错

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!