HYOKAY恒云网络
VISUALIZE YOUR MIND !高端互联网技术服务品牌

恒云网络互联网技术设计中心是一家以创新为核心的网络品牌设计公司

非凡的网站需要精心设计的面孔。HYOKAY为您提供专业网站制作服务
您可以从我们广泛合作客户中观看到我们的专业品质

20分钟清晰捋完 ECMAScript 2016/2017/2018 新特性

原文:https://github.com/amandakelake/blog/issues/45

概览如图(保留一大串英文,是为了鼓励大家好好学英语????
image

下面会尽量保持精简,能用图和代码的地方,就尽量不写文字,保留最直观的感受,简单的API会直接给官方文档

一、ECMAScript 2016

1、Array.prototype.includes

Array.prototype.includes() - JavaScript | MDN

const arr = [1, 2, 3, NaN];if (arr.indexOf(3) >= 0) {  console.log(true)
}// trueif (arr.includes(3)) {  console.log(true)
}// truearr.indexOf(NaN)// -1  无法识别NaNarr.includes(NaN);// true   可以识别NaN

2、指数(幂)运算符 **

Math.pow(2, 3)// 82 ** 3// 8

二、ECMAScript 2017

1、Object.values()

Object.values() - JavaScript | MDN

const obj = { foo: "bar", baz: 42 };console.log(Object.values(obj)); // ['bar', 42]

2、Object.entries()

Object.entries() - JavaScript | MDN

const obj = { foo: 'bar', baz: 42 };console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]// array like objectconst obj = { 0: 'a', 1: 'b', 2: 'c' };console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

3、字符串填充 String padding

String.prototype.padStart() - JavaScript | MDN
String.prototype.padEnd() - JavaScript | MDN

'abc'.padStart(10);         // "       abc"'abc'.padStart(10, "foo");  // "foofoofabc"'abc'.padStart(6,"123465"); // "123abc"'abc'.padStart(8, "0");     // "00000abc"'abc'.padStart(1);          // "abc"'abc'.padEnd(10);          // "abc       "'abc'.padEnd(10, "foo");   // "abcfoofoof"'abc'.padEnd(6, "123456"); // "abc123"'abc'.padEnd(1);           // "abc"

注意,Emojis和双字节字符会占据两位

'heart'.padStart(10, "❤️"); // prints.. '❤️❤️❤heart'

4、Object.getOwnPropertyDescriptors

Object.getOwnPropertyDescriptor() - JavaScript | MDN

Object.getOwnPropertyDescriptor(obj, prop)

Object.getOwnPropertyDescriptor()方法返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)

5、函数参数结尾逗号

function fn(a, b,) {}// 注意,参数b后面多了个逗号,不会报语法错误

6、Async/Await

async function - JavaScript | MDN

三、ECMAScript 2018

1、共享内存与原子操作

个人认为所有更新里这是最爆炸,最强的新特性

即使有event loop的”伪多线程“和Service Worker的强力增援,但依然掩盖不了JS是单线程的事实。

共享内存与原子操作,给JS带来了多线程的功能,允许开发人员自行管理内存来开发高性能高并发的程序。

核心是SharedArrayBuffer对象
SharedArrayBuffer - JavaScript | MDN

The SharedArrayBuffer object is used to represent a generic, fixed-length raw binary data buffer, similar to the ArrayBuffer object, but in a way that they can be used to create views on shared memory. Unlike an ArrayBuffer, a SharedArrayBuffer cannot become detached.

关键词:shared memory

直到目前为止,我们只能通过postMessage在JS主线程和web worker之间通信,传输数据。

SharedArrayBuffer允许共享内存,必然会带来竞态关系,后端语言会通过锁解决这个问题,这里引入了Atomics全局对象

Atomics - JavaScript | MDN

The Atomics object provides atomic operations as static methods. They are used with SharedArrayBuffer objects.

Atomics对象提供了一些方法来处理这种关系,包括读取与更新

感兴趣的可以参与以下资料(全英文,为部分同学感到蛋蛋的忧伤)
A cartoon intro to SharedArrayBuffers – Mozilla Hacks – the Web developer blog
ES proposal: Shared memory and atomics

2、非转义序列的模板字符串

本部分可直接查看下面链接
非转义序列的模板字符串 | esnext | es6 es7 es2017 es2018 es2019

3、对象展开运算符

let { firstName, age, ...rest } = {
  firstName: 'a',
  age: 18,
  a: 1,
  b: 2};

firstName; // 'a',age; // 18rest;// 重点看这里 { a: 1, b: 2 }

4、Promise.prototype.finally()

一个新的API而已,promise相信大家都会用了
Promise.prototype.finally() - JavaScript | MDN

5、异步迭代器

提供了for-await-of,异步迭代,等待每个promise被resolve再执行下一个

const promises = [  new Promise(resolve => resolve(1)),  new Promise(resolve => resolve(2)),  new Promise(resolve => resolve(3))
];
// oldasync function test1() {  for (const obj of promises) {    console.log(obj);
  }
}test1(); // // Promise {<resolved>: 1}// Promise {<resolved>: 2}// Promise {<resolved>: 3}
// newasync function test2() {  for await (const obj of promises) {    console.log(obj);
  }
}test2();// 1, 2, 3

6、正则表达式相关

本部分内容,同学们可自行查阅

  • dotAll 模式,使 . 可以匹配任意字符
  • 命名捕获组,可以理解为增加一个引用
const regex = /(\d{4})-(\d{2})-(\d{2})/;const matchers = regex.exec('2015-01-02');
matchers[0];    // 2015-01-02matchers[1];    // 2015matchers[2];    // 01matchers[3];    // 02
  • 反向断言 Lookbehind Assertions
  • Unicode转义 Unicode Property Escapes