• 手机版

    扫码体验手机版

  • 微信公众号

    扫码关注公众号

游客您好
第三方账号登陆
  • 点击联系客服

    在线时间:8:00-16:00

    客服电话

    400-123-4567

    电子邮件

    1691000615@qq.com
  • 星点互联APP

    随时掌握企业动态

  • 扫描二维码

    关注星点微信公众号

细解JavaScript ES7 ES8 ES9 新特性

刘宗泽-本文作者
135 0 2019-1-11 17:08
摘要

谁在设计ECMAScript?TC39 (Technical Committee 39)。TC39 是推进 JavaScript 发展的委员会。其会员都是公司(其中主要是浏览器厂商)。TC39 定期召开会议,会议由会员公司的代表与特邀专家出席。会议纪录都可在网上 ...

谁在设计ECMAScript?

TC39 (Technical Committee 39)。

TC39 是推进 JavaScript 发展的委员会。其会员都是公司(其中主要是浏览器厂商)。TC39 定期召开会议,会议由会员公司的代表与特邀专家出席。会议纪录都可在网上查看,可以让你对 TC39 如何工作有一个清晰的概念。

很有意思的是,TC39 实行的是协商一致的原则:通过一项决议必须得到每一位会员(公司代表)的赞成。

ECMAScript的发布周期

在2015年发布的 ECMAScript(ES6)新增内容很多,在 ES5 发布近 6 年(2009-11 至 2015-6)之后才将其标准化。两个发布版本之间时间跨度如此之大主要有两大原因:

  • 比新版率先完成的特性,必须等待新版的完成才能发布。
  • 那些需要花长时间完成的特性,也顶着很大的压力被纳入这一版本,因为如果推迟到下一版本发布意味着又要等很久,这种特性也会推迟新的发布版本。

因此,从 ECMAScript 2016(ES7)开始,版本发布变得更加频繁,每年发布一个新版本,这么一来新增内容也会更小。新版本将会包含每年截止时间之前完成的所有特性。

ECMAScript的发布流程

每个 ECMAScript 特性的建议将会从阶段 0 开始, 然后经过下列几个成熟阶段。其中从一个阶段到下一个阶段必须经过 TC39 的批准。

  1. stage-0 - Strawman: just an idea, possible Babel plugin.
    任何讨论、想法、改变或者还没加到提案的特性都在这个阶段。只有TC39成员可以提交。

    当前的stage 0列表可以查看这里 --> Stage 0 Proposals

  2. stage-1 - Proposal: this is worth working on.

    什么是 Proposal?一份新特性的正式建议文档。提案必须指明此建议的潜在问题,例如与其他特性之间的关联,实现难点等。

  3. stage-2 - Draft: initial spec.

    什么是 Draft?草案是规范的第一个版本。其与最终标准中包含的特性不会有太大差别。

    草案之后,原则上只接受增量修改。这个阶段开始实验如何实现,实现形式包括polyfill, 实现引擎(提供草案执行本地支持),或者编译转换(例如babel)

  4. stage-3 - Candidate: complete spec and initial browser implementations.

    候选阶段,获得具体实现和用户的反馈。此后,只有在实现和使用过程中出现了重大问题才会修改。至少要在一个浏览器中实现,提供polyfill或者babel插件。

  5. stage-4 - Finished: will be added to the next yearly release.

    已经准备就绪,该特性会出现在下个版本的ECMAScript规范之中。

    当前的stage 1-3列表可以查看这里 --> ECMAScript proposals

已经正式发布的特性索引

ProposalAuthorChampion(s)TC39 meeting notesExpected Publication Year
Array.prototype.includesDomenic DenicolaDomenic Denicola
Rick Waldron
November 20152016
Exponentiation operatorRick WaldronRick WaldronJanuary 20162016
Object.values/Object.entriesJordan HarbandJordan HarbandMarch 20162017
String paddingJordan HarbandJordan Harband
Rick Waldron
May 20162017
Object.getOwnPropertyDescriptorsJordan Harband
Andrea Giammarchi
Jordan Harband
Andrea Giammarchi
May 20162017
Trailing commas in function parameter lists and callsJeff MorrisonJeff MorrisonJuly 20162017
Async functionsBrian TerlsonBrian TerlsonJuly 20162017
Shared memory and atomicsLars T HansenLars T HansenJanuary 20172017
Lifting template literal restrictionTim DisneyTim DisneyMarch 20172018
s (dotAll) flag for regular expressionsMathias BynensBrian Terlson
Mathias Bynens
November 20172018
RegExp named capture groupsGorkem Yakin
Daniel Ehrenberg
Daniel Ehrenberg
Brian Terlson
Mathias Bynens
November 20172018
Rest/Spread PropertiesSebastian MarkbågeSebastian MarkbågeJanuary 20182018
RegExp Lookbehind AssertionsGorkem Yakin
Nozomu Katō
Daniel Ehrenberg
Daniel Ehrenberg
Mathias Bynens
January 20182018
RegExp Unicode Property EscapesMathias BynensBrian Terlson
Daniel Ehrenberg
Mathias Bynens
January 20182018
Promise.prototype.finallyJordan HarbandJordan HarbandJanuary 20182018
Asynchronous IterationDomenic DenicolaDomenic DenicolaJanuary 20182018
Optional catch bindingMichael FicarraMichael FicarraMay 20182019
JSON supersetRichard GibsonMark Miller
Mathias Bynens
May 20182019

ES7新特性(ECMAScript 2016)

ECMAScript 2016

ES7在ES6的基础上主要添加了两项内容:

  • Array.prototype.includes()方法
  • 求幂运算符(**)

Array.prototype.includes()方法

includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。

var array = [1, 2, 3];

console.log(array.includes(2));
// expected output: true

var pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

Array.prototype.includes()方法接收两个参数:

  • 要搜索的值
  • 搜索的开始索引。

当第二个参数被传入时,该方法会从索引处开始往后搜索(默认索引值为0)。若搜索值在数组中存在则返回true,否则返回false。 且看下面示例:

['a', 'b', 'c', 'd'].includes('b')         // true
['a', 'b', 'c', 'd'].includes('b', 1)      // true
['a', 'b', 'c', 'd'].includes('b', 2)      // false

乍一看,includes的作用跟数组的indexOf重叠,为什么要特意增加这么一个api呢?主要区别有以下几点:

  • 返回值。看一个函数,先看他们的返回值。indexOf的返回数是值型的,includes的返回值是布尔型,所以在if条件判断的时候includes要简单得多,而indexOf 需要多写一个条件进行判断。
var ary = [1];
if (ary.indexOf(1) !== -1) {
    console.log("数组存在1")
}
if (ary.includes(1)) {
    console.log("数组存在1")
}
  • NaN的判断。如果数组中有NaN,你又正好需要判断数组是否有存在NaN,这时你使用indexOf是无法判断的,你必须使用includes这个方法。
var ary1 = [NaN];
console.log(ary1.indexOf(NaN))//-1
console.log(ary1.includes(NaN))//true
  • 当数组的有空的值的时候,includes会认为空的值是undefined,而indexOf不会。
var ary1 = new Array(3);
console.log(ary1.indexOf(undefined));//-1
console.log(ary1.includes(undefined))//true

求幂运算符(**)

加/减法我们通常都是用其中缀形式,直观易懂。在ECMAScript2016中,我们可以使用**来替代Math.pow。

4 ** 3 // 64

效果等同于

Math.pow(4,3)

值得一提的是,作为中缀运算符,**还支持以下操作

let n = 4;
n **= 3;
// 64

ES8新特性(ECMAScript 2017)

ECMAScript 2017

在2017年1月的TC39会议上,ECMAScript 2017的最后一个功能“Shared memory and atomics”推进到第4阶段。这意味着它的功能集现已完成。

ECMAScript 2017特性一览

主要新功能:

  • 异步函数 Async Functions(Brian Terlson)
  • 共享内存和Atomics(Lars T. Hansen)

次要新功能: