细解JavaScript ES7 ES8 ES9 新特性

时间  2019-11-07
标签 javascript es7 es8 es9 特性 栏目 JavaScript 繁體版
原文   原文链接

导言：ECMAScript的演化不会中止，可是咱们彻底不必惧怕。除了ES6这个前所未有的版本带来了海量的信息和知识点之外，以后每一年一发的版本都仅仅带有少许的增量更新，一年更新的东西花半个小时就能搞懂了，彻底不必畏惧。本文将带您花大约一个小时左右的时间，迅速过一遍ES7,ES8,ES9的新特性。javascript

想追求更好的阅读体验，请移步原文地址java

题记：本文提供了一个在线PPT版本，方便您浏览 细解JAVASCRIPT ES7 ES8 ES9 新特性 在线PPT vergit

本文的大部份内容译自做者Axel Rauschmayer博士的网站，想了解更多关于做者的信息，能够浏览Exploring JS: JavaScript books for programmersgithub

那些与ECMAScript有关的事情

谁在设计ECMAScript?

TC39 (Technical Committee 39)。正则表达式

TC39 是推动 JavaScript 发展的委员会。其会员都是公司（其中主要是浏览器厂商）。TC39 按期召开会议，会议由会员公司的表明与特邀专家出席。会议纪录均可在网上查看，可让你对 TC39 如何工做有一个清晰的概念。express

颇有意思的是，TC39 实行的是协商一致的原则：经过一项决议必须获得每一位会员（公司表明）的同意。json

ECMAScript的发布周期

在2015年发布的 ECMAScript（ES6）新增内容不少，在 ES5 发布近 6 年（2009-11 至 2015-6）以后才将其标准化。两个发布版本之间时间跨度如此之大主要有两大缘由：api

  • 比新版率先完成的特性，必须等待新版的完成才能发布。
  • 那些须要花长时间完成的特性，也顶着很大的压力被归入这一版本，由于若是推迟到下一版本发布意味着又要等好久，这种特性也会推迟新的发布版本。

所以，从 ECMAScript 2016（ES7）开始，版本发布变得更加频繁，每一年发布一个新版本，这么一来新增内容也会更小。新版本将会包含每一年截止时间以前完成的全部特性。数组

ECMAScript的发布流程

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

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

当前的stage 0列表能够查看这里 --> Stage 0 Proposals

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

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

  2. stage-2 - Draft: initial spec.

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

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

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

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

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

已经准备就绪，该特性会出如今下个版本的ECMAScript规范之中。

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

已经正式发布的特性索引

Proposal Author Champion(s) TC39 meeting notes Expected Publication Year
Array.prototype.includes Domenic Denicola Domenic Denicola
Rick Waldron		 November 2015 2016
Exponentiation operator Rick Waldron Rick Waldron January 2016 2016
Object.values/Object.entries Jordan Harband Jordan Harband March 2016 2017
String padding Jordan Harband Jordan Harband
Rick Waldron		 May 2016 2017
Object.getOwnPropertyDescriptors Jordan Harband
Andrea Giammarchi		 Jordan Harband
Andrea Giammarchi		 May 2016 2017
Trailing commas in function parameter lists and calls Jeff Morrison Jeff Morrison July 2016 2017
Async functions Brian Terlson Brian Terlson July 2016 2017
Shared memory and atomics Lars T Hansen Lars T Hansen January 2017 2017
Lifting template literal restriction Tim Disney Tim Disney March 2017 2018
s (dotAll) flag for regular expressions Mathias Bynens Brian Terlson
Mathias Bynens		 November 2017 2018
RegExp named capture groups Gorkem Yakin
Daniel Ehrenberg		 Daniel Ehrenberg
Brian Terlson
Mathias Bynens		 November 2017 2018
Rest/Spread Properties Sebastian Markbåge Sebastian Markbåge January 2018 2018
RegExp Lookbehind Assertions Gorkem Yakin
Nozomu Katō
Daniel Ehrenberg		 Daniel Ehrenberg
Mathias Bynens		 January 2018 2018
RegExp Unicode Property Escapes Mathias Bynens Brian Terlson
Daniel Ehrenberg
Mathias Bynens		 January 2018 2018
Promise.prototype.finally Jordan Harband Jordan Harband January 2018 2018
Asynchronous Iteration Domenic Denicola Domenic Denicola January 2018 2018
Optional catch binding Michael Ficarra Michael Ficarra May 2018 2019
JSON superset Richard Gibson Mark Miller
Mathias Bynens		 May 2018 2019

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）

次要新功能：

  • Object.values / Object.entries（Jordan Harband）
  • String padding（Jordan Harband，Rick Waldron）
  • Object.getOwnPropertyDescriptors() （Jordan Harband，Andrea Giammarchi）
  • 函数参数列表和调用中的尾逗号（Jeff Morrison）

Async Functions

Async Functions也就是咱们常说的Async/Await，相信你们对于这个概念都已经不陌生了。Async/Await是一种用于处理JS异步操做的语法糖，能够帮助咱们摆脱回调地狱，编写更加优雅的代码。

通俗的理解，async关键字的做用是告诉编译器对于标定的函数要区别对待。当编译器遇到标定的函数中的await关键字时，要暂时中止运行，带到await标定的函数处理完毕后，再进行相应操做。若是该函数fulfiled了，则返回值是fulfillment value，不然获得的就是reject value。

下面经过拿普通的promise写法来对比，就很好理解了：

async function asyncFunc() {
    const result = await otherAsyncFunc();
    console.log(result);
}

// Equivalent to:
function asyncFunc() {
    return otherAsyncFunc()
    .then(result => {
        console.log(result);
    });
}
复制代码

按顺序处理多个异步函数的时候优点更为明显：

async function asyncFunc() {
    const result1 = await otherAsyncFunc1();
    console.log(result1);
    const result2 = await otherAsyncFunc2();
    console.log(result2);
}

// Equivalent to:
function asyncFunc() {
    return otherAsyncFunc1()
    .then(result1 => {
        console.log(result1);
        return otherAsyncFunc2();
    })
    .then(result2 => {
        console.log(result2);
    });
}
复制代码

并行处理多个异步函数：

async function asyncFunc() {
    const [result1, result2] = await Promise.all([
        otherAsyncFunc1(),
        otherAsyncFunc2(),
    ]);
    console.log(result1, result2);
}

// Equivalent to:
function asyncFunc() {
    return Promise.all([
        otherAsyncFunc1(),
        otherAsyncFunc2(),
    ])
    .then([result1, result2] => {
        console.log(result1, result2);
    });
}
复制代码

处理错误：

async function asyncFunc() {
    try {
        await otherAsyncFunc();
    } catch (err) {
        console.error(err);
    }
}

// Equivalent to:
function asyncFunc() {
    return otherAsyncFunc()
    .catch(err => {
        console.error(err);
    });
}
复制代码

Async Functions如果要展开去讲，能够占用很大段的篇幅。鉴于本文是一篇介绍性文章，再次再也不进行深刻。

SharedArrayBuffer和Atomics

注，若是以前您没有接触过ArrayBuffer相关知识的话，建议您从内存管理速成教程系列漫画解说入门，强推： A crash course in memory management A cartoon intro to ArrayBuffers and SharedArrayBuffers Avoiding race conditions in SharedArrayBuffers with Atomics

ECMAScript 2017 特性 SharedArrayBuffer 和 atomics”，由Lars T. Hansen设计。它引入了一个新的构造函数 SharedArrayBuffer 和 具备辅助函数的命名空间对象 Atomics。

在咱们开始以前，让咱们澄清两个类似但大相径庭的术语：并行(Parallelism) 和 并发(Concurrency) 。他们存在许多定义，我使用的定义以下

  • 并行(Parallelism) (parallel 并行 vs. serial 串行)：同时执行多个任务；
  • 并发(Concurrency) (concurrent 并发 vs. sequential 连续)：在重叠的时间段内（而不是一个接一个）执行几个任务。

JS并行的历史

  • JavaScript 在单线程中执行。某些任务能够异步执行：浏览器一般会在单线程中运行这些任务，而后经过回调将结果从新加入到单线程中。
  • Web workers 将任务并行引入了 JavaScript ：这些是相对重量级的进程。每一个 workers 都有本身的全局环境。默认状况下，不共享任何内容。 workers 之间的通讯（或在 workers 和主线程之间的通讯）发展：
    • 起初，你只能发送和接收字符串。
    • 而后，引入结构化克隆：能够发送和接收数据副本。结构化克隆适用于大多数数据（JSON 数据，TypedArray，正则表达式，Blob对象，ImageData对象等）。它甚至能够正确处理对象之间的循环引用。可是，不能克隆 error 对象，function 对象和 DOM 节点。
    • 可在 workers 之间的转移数据:当接收方得到数据时，发送方失去访问权限。
  • 经过 WebGL 使用 GPU 计算(它倾向于数据并行处理)

共享数组缓冲区（Shared Array Buffers）

共享阵列缓冲区是更高并发抽象的基本构建块。它们容许您在多个 workers 和主线程之间共享 SharedArrayBuffer 对象的字节(该缓冲区是共享的，用于访问字节，将其封装在一个 TypedArray 中)这种共享有两个好处：

你能够更快地在 workers 之间共享数据。 workers 之间的协调变得更简单和更快（与 postMessage() 相比）。

// main.js
const worker = new Worker('worker.js');

// 要分享的buffer
const sharedBuffer = new SharedArrayBuffer( // (A)
    10 * Int32Array.BYTES_PER_ELEMENT); // 10 elements

// 使用Worker共用sharedBuffer
worker.postMessage({sharedBuffer}); // clone

// 仅限本地使用
const sharedArray = new Int32Array(sharedBuffer); // (B)
复制代码

建立一个共享数组缓冲区（Shared Array Buffers）的方法与建立普通的数组缓冲区(Array Buffer)相似：经过调用构造函数，并以字节的形式指定缓冲区的大小(行A)。你与 workers 共享的是 缓冲区（buffer） 。对于你本身的本地使用，你一般将共享数组缓冲区封装在 TypedArray 中(行B)。

workers的实现以下所列。

// worker.js
self.addEventListener('message', function (event) {
    const {sharedBuffer} = event.data;
    const sharedArray = new Int32Array(sharedBuffer); // (A)
    // ···
});
复制代码

sharedArrayBuffer 的 API

构造函数：

  • new SharedArrayBuffer(length) 建立一个 length 字节的 buffer(缓冲区)。

静态属性：

  • get SharedArrayBuffer[Symbol.species] 默认状况下返回 this。 覆盖以控制 slice() 的返回。

实例属性：

  • get SharedArrayBuffer.prototype.byteLength() 返回 buffer(缓冲区) 的字节长度。

  • SharedArrayBuffer.prototype.slice(start, end) 建立一个新的 this.constructor[Symbol.species] 实例，并用字节填充从（包括）开始到（不包括）结束的索引。

Atomics: 安全访问共享数据

举一个例子

// main.js
sharedArray[1] = 11;
sharedArray[2] = 22;
复制代码

在单线程中，您能够从新排列这些写入操做，由于在中间没有读到任何内容。 对于多线程，当你指望以特定顺序执行写入操做时，就会遇到麻烦：

// worker.js
while (sharedArray[2] !== 22) ;
console.log(sharedArray[1]); // 0 or 11
复制代码

Atomics 方法能够用来与其余 workers 进行同步。例如，如下两个操做可让你读取和写入数据，而且不会被编译器从新排列：

  • Atomics.load(ta : TypedArray, index)
  • Atomics.store(ta : TypedArray, index, value : T)

这个想法是使用常规操做读取和写入大多数数据，而 Atomics 操做（load ，store 和其余操做）可确保读取和写入安全。一般，您将使用自定义同步机制，例如锁，其实现基于Atomics。

这是一个很是简单的例子，它老是有效的：

// main.js
console.log('notifying...');
Atomics.store(sharedArray, 0, 123);

// worker.js
while (Atomics.load(sharedArray, 0) !== 123) ;
console.log('notified');
复制代码

Atomics 的 API

Atomic 函数的主要操做数必须是 Int8Array ，Uint8Array ，Int16Array ，Uint16Array ，Int32Array 或 Uint32Array 的一个实例。它必须包裹一个 SharedArrayBuffer 。

全部函数都以 atomically 方式进行操做。存储操做的顺序是固定的而且不能由编译器或 CPU 从新排序。

加载和存储

  • Atomics.load(ta : TypedArray, index) : T 读取和返回 ta[index] 上的元素，返回数组指定位置上的值。
  • Atomics.store(ta : TypedArray, index, value : T) : T 在 ta[index] 上写入 value，而且返回 value。
  • Atomics.exchange(ta : TypedArray, index, value : T) : T 将 ta[index] 上的元素设置为 value ，而且返回索引 index 原先的值。
  • Atomics.compareExchange(ta : TypedArray, index, expectedValue, replacementValue) : T 若是 ta[index] 上的当前元素为 expectedValue , 那么使用 replacementValue 替换。而且返回索引 index 原先（或者未改变）的值。

简单修改 TypeArray 元素

如下每一个函数都会在给定索引处更改 TypeArray 元素：它将一个操做符应用于元素和参数，并将结果写回元素。它返回元素的原始值。

  • Atomics.add(ta : TypedArray, index, value) : T 执行 ta[index] += value 并返回 ta[index] 的原始值。
  • Atomics.sub(ta : TypedArray, index, value) : T 执行 ta[index] -= value 并返回 ta[index] 的原始值。
  • Atomics.and(ta : TypedArray, index, value) : T 执行 ta[index] &= value 并返回 ta[index] 的原始值。
  • Atomics.or(ta : TypedArray, index, value) : T 执行 ta[index] |= value 并返回 ta[index] 的原始值。
  • Atomics.xor(ta : TypedArray, index, value) : T 执行 ta[index] ^= value 并返回 ta[index] 的原始值。

等待和唤醒

  • Atomics.wait(ta: Int32Array, index, value, timeout=Number.POSITIVE_INFINITY) : ('not-equal' | 'ok' | 'timed-out') 若是 ta[index] 的当前值不是 value ，则返回 'not-equal'。不然继续等待，直到咱们经过 Atomics.wake() 唤醒或直到等待超时。 在前一种状况下，返回 'ok'。在后一种状况下，返回'timed-out'。timeout 以毫秒为单位。记住此函数执行的操做：“若是 ta[index] 为 value，那么继续等待” 。
  • Atomics.wake(ta : Int32Array, index, count) 唤醒等待在 ta[index] 上的 count workers。

Object.values and Object.entries

Object.values() 方法返回一个给定对象本身的全部可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同 ( 区别在于for-in循环枚举原型链中的属性 )。

obj参数是须要待操做的对象。能够是一个对象，或者一个数组（是一个带有数字下标的对象，[10,20,30] -> {0: 10,1: 20,2: 30})。

const obj = { x: 'xxx', y: 1 };
Object.values(obj); // ['xxx', 1]

const obj = ['e', 's', '8']; // 至关于 { 0: 'e', 1: 's', 2: '8' };
Object.values(obj); // ['e', 's', '8']

// 当咱们使用数字键值时，返回的是数字排序
// 根据键值排序
const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.values(obj); // ['yyy', 'zzz', 'xxx']

Object.values('es8'); // ['e', 's', '8']
复制代码

Object.entries 方法返回一个给定对象自身可遍历属性 [key, value] 的数组， 排序规则和 Object.values 同样。这个方法的声明比较琐碎:

const obj = { x: 'xxx', y: 1 };
Object.entries(obj); // [['x', 'xxx'], ['y', 1]]

const obj = ['e', 's', '8'];
Object.entries(obj); // [['0', 'e'], ['1', 's'], ['2', '8']]

const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.entries(obj); // [['1', 'yyy'], ['3', 'zzz'], ['10': 'xxx']]

Object.entries('es8'); // [['0', 'e'], ['1', 's'], ['2', '8']]
复制代码

String padding

为 String 对象增长了 2 个函数：padStart 和 padEnd。

像它们名字那样，这几个函数的主要目的就是填补字符串的首部和尾部，为了使获得的结果字符串的长度能达到给定的长度。你能够经过特定的字符，或者字符串，或者默认的空格填充它。下面是函数的声明：

str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])
复制代码

这些函数的第一个参数是 targetLength（目标长度），这个是结果字符串的长度。第二个参数是可选的 padString（填充字符），一个用于填充到源字符串的字符串。默认值是空格。

'es8'.padStart(2);          // 'es8'
'es8'.padStart(5);          // ' es8'
'es8'.padStart(6, 'woof');  // 'wooes8'
'es8'.padStart(14, 'wow');  // 'wowwowwowwoes8'
'es8'.padStart(7, '0');     // '0000es8'

'es8'.padEnd(2);            // 'es8'
'es8'.padEnd(5);            // 'es8 '
'es8'.padEnd(6, 'woof');    // 'es8woo'
'es8'.padEnd(14, 'wow');    // 'es8wowwowwowwo'
'es8'.padEnd(7, '6');       // 'es86666'
复制代码

Object.getOwnPropertyDescriptors

getOwnPropertyDescriptors 方法返回指定对象全部自身属性的描述对象。属性描述对象是直接在对象上定义的，而不是继承于对象的原型。ES2017加入这个函数的主要动机在于方便将一个对象深度拷贝给另外一个对象，同时能够将getter/setter拷贝。声明以下：

Object.getOwnPropertyDescriptors(obj)
复制代码

obj 是待操做对象。返回的描述对象键值有：configurable, enumerable, writable, get, set and value。

const obj = { 
  get es7() { return 777; },
  get es8() { return 888; }
};
Object.getOwnPropertyDescriptor(obj);
// {
// es7: {
// configurable: true,
// enumerable: true,
// get: function es7(){}, //the getter function
// set: undefined
// },
// es8: {
// configurable: true,
// enumerable: true,
// get: function es8(){}, //the getter function
// set: undefined
// }
// }
复制代码

结尾逗号

结尾逗号用代码展现很是明了：

// 参数定义时
function foo( param1, param2, ) {}

// 函数调用时
foo(
    'abc',
    'def',
);

// 对象中
let obj = {
    first: 'Jane',
    last: 'Doe',
};

// 数组中
let arr = [
    'red',
    'green',
    'blue',
];
复制代码

这个改动有什么好处呢？

  • 首先，从新排列项目更简单，由于若是最后一项更改其位置，则没必要添加和删除逗号。
  • 其次，它能够帮助版本控制系统跟踪实际发生的变化。例如，从：
[
    'foo'
]
复制代码

修改成

[
    'foo',
    'bar'
]
复制代码

致使线条'foo'和线条'bar'被标记为已更改，即便惟一真正的变化是后一条线被添加。

ES9新特性（ECMAScript 2018）

ECMAScript 2018

ES9的新特性索引以下：

主要新功能：

  • 异步迭代（Domenic Denicola，Kevin Smith）
  • Rest/Spread 属性（SebastianMarkbåge）

新的正则表达式功能：

  • RegExp named capture groups（Gorkem Yakin，Daniel Ehrenberg）
  • RegExp Unicode Property Escapes（Mathias Bynens）
  • RegExp Lookbehind Assertions（Gorkem Yakin，NozomuKatō，Daniel Ehrenberg）
  • s (dotAll) flag for regular expressions（Mathias Bynens）

其余新功能：

  • Promise.prototype.finally() （Jordan Harband）
  • 模板字符串修改（Tim Disney）

异步迭代

首先来回顾一下同步迭代器：

ES6引入了同步迭代器，其工做原理以下：

  • Iterable：一个对象，表示能够经过Symbol.iterator方法进行迭代。
  • Iterator：经过调用iterable [Symbol.iterator] ()返回的对象。它将每一个迭代元素包装在一个对象中，并经过其next()方法一次返回一个。
  • IteratorResult：返回的对象next()。属性value包含一个迭代的元素，属性done是true 后最后一个元素。

示例：

const iterable = ['a', 'b'];
const iterator = iterable[Symbol.iterator]();
iterator.next()
// { value: 'a', done: false }
iterator.next()
// { value: 'b', done: false }
iterator.next()
// { value: undefined, done: true }
复制代码

异步迭代器

先前的迭代方式是同步的，并不适用于异步数据源。例如，在如下代码中，readLinesFromFile()没法经过同步迭代传递其异步数据：

for (const line of readLinesFromFile(fileName)) {
    console.log(line);
}
复制代码

异步迭代器和常规迭代器的工做方式很是类似，可是异步迭代器涉及promise:

async function example() {
  // 普通迭代器:
  const iterator = createNumberIterator();
  iterator.next(); // Object {value: 1, done: false}
  iterator.next(); // Object {value: 2, done: false}
  iterator.next(); // Object {value: 3, done: false}
  iterator.next(); // Object {value: undefined, done: true}

  // 异步迭代器:
  const asyncIterator = createAsyncNumberIterator();
  const p = asyncIterator.next(); // Promise
  await p;// Object {value: 1, done: false}
  await asyncIterator.next(); // Object {value: 2, done: false}
  await asyncIterator.next(); // Object {value: 3, done: false}
  await asyncIterator.next(); // Object {value: undefined, done: true}
}
复制代码

异步迭代器对象的next()方法返回了一个Promise，解析后的值跟普通的迭代器相似。 用法：iterator.next().then(({ value, done })=> {//{value: ‘some val’, done: false}}

const promises = [
    new Promise(resolve => resolve(1)),
    new Promise(resolve => resolve(2)),
    new Promise(resolve => resolve(3)),
];

async function test() {
    for await (const p of promises) {
        console.log(p);
    }
}
test(); //1 ,2 3
复制代码

Rest/Spread 属性

这个就是咱们一般所说的rest参数和扩展运算符，这项特性在ES6中已经引入，可是ES6中的做用对象仅限于数组：

restParam(1, 2, 3, 4, 5);

function restParam(p1, p2, ...p3) {
  // p1 = 1
  // p2 = 2
  // p3 = [3, 4, 5]
}

const values = [99, 100, -1, 48, 16];
console.log( Math.max(...values) ); // 100
复制代码

在ES9中，为对象提供了像数组同样的rest参数和扩展运算符：

const obj = {
  a: 1,
  b: 2,
  c: 3
}
const { a, ...param } = obj;
  console.log(a)     //1
  console.log(param) //{b: 2, c: 3}

function foo({a, ...param}) {
  console.log(a);    //1
  console.log(param) //{b: 2, c: 3}
}
复制代码

正则表达式命名捕获组

编号的捕获组

//正则表达式命名捕获组
const RE_DATE = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj[1]; // 1999
const month = matchObj[2]; // 12
const day = matchObj[3]; // 31
复制代码

经过数字引用捕获组有几个缺点：

  • 找到捕获组的数量是一件麻烦事：必须使用括号。
  • 若是要了解组的用途，则须要查看正则表达式。
  • 若是更改捕获组的顺序，则还必须更改匹配代码。

命名的捕获组

ES9中能够经过名称来识别捕获组：(?<year>[0-9]{4})

在这里，咱们用名称标记了前一个捕获组year。该名称必须是合法的JavaScript标识符（认为变量名称或属性名称）。匹配后，您能够经过访问捕获的字符串matchObj.groups.year来访问。

让咱们重写前面的代码：

const RE_DATE = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj.groups.year; // 1999
const month = matchObj.groups.month; // 12
const day = matchObj.groups.day; // 31

// 使用解构语法更为简便
const {groups: {day, year}} = RE_DATE.exec('1999-12-31');
console.log(year); // 1999
console.log(day); // 31
复制代码

能够发现，命名捕获组有如下优势：

  • 找到捕获组的“ID”更容易。
  • 匹配代码变为自描述性的，由于捕获组的ID描述了正在捕获的内容。
  • 若是更改捕获组的顺序，则无需更改匹配代码。
  • 捕获组的名称也使正则表达式更容易理解，由于您能够直接看到每一个组的用途。

正则表达式 Unicode 转义

该特性容许您使用\p{}经过说起大括号内的Unicode字符属性来匹配字符,在正则表达式中使用标记 u (unicode) 设置。

/^\p{White_Space}+$/u.test('\t \n\r')
// true
/^\p{Script=Greek}+$/u.test('μετά')
// true
复制代码

新方法匹配中文字符

因为在Unicode里面，中文字符对应的Unicode Script是Han，因而咱们就能够用这个reg来匹配中文：

/\p{Script=Han}/u

这样咱们就能够不用记忆繁琐又很差记的/[\u4e00-\u9fa5]/了，何况这个表达式已经有些年头了，说实话，后来又新增的属性为Han的字符并不在这个范围内，所以这个有年头reg并不必定好使。

我随便从网上找了一个Unicode8.0添加的中文字符“𬬭”,我测了一下两种reg的兼容性：

oldReg=/[\u4e00-\u9fa5]/
newReg=/\p{Script=Han}/u

oldReg.test('abc')
// false
newReg.test('abc')
// false

oldReg.test('地平线')
// true
newReg.test('地平线')
// true

oldReg.test('𬬭')
// false
newReg.test('𬬭')
// true
复制代码

http://www.unicode.org/charts/PDF/U4E00.pdf

能够参考一下这个PDF，是Unicode的汉字全集，从524页9FA6至526页（最后一页）用旧匹配方式都没法生效。

Unicode

一些对于Unicode的科普

  • Name：惟一名称，由大写字母，数字，连字符和空格组成。例如：

    • A： Name = LATIN CAPITAL LETTER A
    • 😀： Name = GRINNING FACE

  • General_Category：对字符进行分类。例如：

    • X： General_Category = Lowercase_Letter
    • $： General_Category = Currency_Symbol

  • White_Space：用于标记不可见的间距字符，例如空格，制表符和换行符。例如：

    • \ T： White_Space = True
    • π： White_Space = False

  • Age：引入字符的Unicode标准版本。例如：欧元符号€在Unicode标准的2.1版中添加。

    • €： Age = 2.1

  • Script：是一个或多个书写系统使用的字符集合。

    • 有些脚本支持多种写入系统。例如，拉丁文脚本支持英语，法语，德语，拉丁语等书写系统。
    • 某些语言能够用多个脚本支持的多个备用写入系统编写。例如，土耳其语在20世纪初转换为拉丁文字以前使用了阿拉伯文字。
    • 例子：
      • α： Script = Greek
      • Д： Script = Cyrillic

正则表达式的Unicode属性转义

  • 匹配其属性prop具备值的全部字符value：

    \p{prop=value}

  • 匹配全部没有属性prop值的字符value：

    \P{prop=value}

  • 匹配二进制属性bin_prop为True的全部字符：

    \p{bin_prop}

  • 匹配二进制属性bin_prop为False的全部字符：

    \P{bin_prop}

  • 匹配空格：

/^\p{White_Space}+$/u.test('\t \n\r')
//true
复制代码

匹配字母：

/^\p{Letter}+$/u.test('πüé')
//true
复制代码

匹配希腊字母：

/^\p{Script=Greek}+$/u.test('μετά')
//true
复制代码

匹配拉丁字母：

/^\p{Script=Latin}+$/u.test('Grüße')
//true
复制代码

正则表达式反向断言

先来看下正则表达式先行断言是什么：

如获取货币的符号

const noReLookahead = /\D(\d+)/,
      reLookahead = /\D(?=\d+)/,
      match1 = noReLookahead.exec('$123.45'),
      match2 = reLookahead.exec('$123.45');
console.log(match1[0]); // $123 
console.log(match2[0]); // $
复制代码

在ES9中能够容许反向断言：

const reLookahead = /(?<=\D)[\d\.]+/;
      match = reLookahead.exec('$123.45');
console.log(match[0]); // 123.45
复制代码

使用?<=进行反向断言，可使用反向断言获取货币的价格，而忽略货币符号。

正则表达式dotAll模式

正则表达式中点.匹配除回车外的任何单字符，标记s改变这种行为，容许行终止符的出现，例如：

/hello.world/.test('hello\nworld');  // false
/hello.world/s.test('hello\nworld'); // true
复制代码

Promise.prototype.finally()

这个基本没什么好讲的，看名字就能看懂了。其用法以下：

promise
  .then(result => {···})
  .catch(error => {···})
  .finally(() => {···});
复制代码

finally的回调总会被执行。

模板字符串修改

ES2018 移除对 ECMAScript 在带标签的模版字符串中转义序列的语法限制。 以前，\u开始一个 unicode 转义，\x开始一个十六进制转义，\后跟一个数字开始一个八进制转义。这使得建立特定的字符串变得不可能，例如Windows文件路径 C:\uuu\xxx\111。

要取消转义序列的语法限制，可在模板字符串以前使用标记函数String.raw:

`\u{54}`
// "T"
String.raw`\u{54}`
// "\u{54}"
复制代码

尾声

ECMAScript的演化不会中止，可是咱们彻底不必惧怕。除了ES6这个前所未有的版本带来了海量的信息和知识点之外，以后每一年一发的版本都仅仅带有少许的增量更新，一年更新的东西花半个小时就能搞懂了，彻底不必畏惧。

Stay hungry. Stay foolish.

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程