javaScript ES7 ES8 ES9 ES10新特性

参考文献： https://tuobaye.com/2018/11/27/%E7%BB%86%E8%A7%A3JavaScript-ES7-ES8-ES9-%E6%96%B0%E7%89%B9%E6%80%A7/

http://www.imooc.com/article/291875

https://hijiangtao.github.io/2019/07/05/Diff-ECMAScript-2019/

ES7

1. Array.prototype.includes()方法

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

var ary1 = [NaN];
console.log(ary1.indexOf(NaN))//-1
console.log(ary1.includes(NaN))//true

2. 求幂运算符（**）

用**来替代Math.pow。

4 ** 3

等价于

Math.pow(4,3)

let n = 4;
n **= 3;

ES8

1. Async Functions

Async Functions也就是我们常说的Async/Await。Async/Await是一种用于处理JS异步操作的语法糖，可以帮助我们摆脱回调地狱，编写更加优雅的代码。

通俗的理解，async关键字的作用是告诉编译器对于标定的函数要区别对待。当编译器遇到标定的函数中的await关键字时，要暂时停止运行，带到await标定的函数处理完毕后，再进行相应操作。如果该函数fulfilled了，则返回值是resolve 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, 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);
    });
}

2. SharedArrayBuffer和Atomics

SharedArrayBuffer允许在多个 workers 和主线程之间共享 SharedArrayBuffer 对象的字节。这种共享有两个好处：

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

API：

　　构造函数： new SharedArrayBuffer(length)

　　静态属性： SharedArrayBuffer[Symbol.species]

　　实例属性： SharedArrayBuffer.prototype.byteLength()

SharedArrayBuffer.prototype.slice(start, end)

Atomics 方法可以用来与其他 workers 进行同步。以下两个操作可以让你读取和写入数据，并且不会被编译器重新排列：

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

这个想法是使用常规操作读取和写入大多数数据，而 Atomics 操作（load ，store 和其他操作）可确保读取和写入安全。通常，要使用自定义同步机制（例如）可以基于Atomics实现。

API：

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

• 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 原先（或者未改变）的值。

• 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’。否则（等于value时）继续等待，直到我们通过 Atomics.wake() 唤醒或直到等待超时。 在前一种情况下，返回 ‘ok’。在后一种情况下，返回’timed-out’。timeout 以毫秒为单位。记住此函数执行的操作：“如果 ta[index] 为 value，那么继续等待” 。
• Atomics.wake(ta : Int32Array, index, count)
  唤醒等待在 ta[index] 上的 count workers。

3. Object.values and Object.entries

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

Object.values('es8'); // ['e', 's', '8']

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']]

4. String padding

为 String 对象增加了 2 个函数：padStart 和 padEnd。填补字符串的首部和尾部，为了使得到的结果字符串的长度能达到给定的长度（targetLength）。你可以通过特定的字符，或者字符串，或者默认的空格填充它。

str.padStart(targetLength [, padString])

str.padEnd(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'

5. Object.getOwnPropertyDescriptors

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
//   }
// }

6. 结尾逗号

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

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

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

// 数组中
let arr = [
    'red',
    'green',
    'blue',
];

ES9新特性

1.异步迭代器：异步迭代器对象的next()方法返回了一个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}
}

2.  Rest/Spread 属性

rest参数和展开运算符，这项特性在ES6中已经引入，但是ES6中仅限于数组。在ES9中，为对象提供了像数组一样的rest参数和扩展运算符。

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

function foo({a, ...param}) {
  console.log(a);    //
  console.log(param) //{b: 2, c: 3}
}

3.  Promise.prototype.finally()

finally的回调总会被执行。

promise
  .then(result => {···})
  .catch(error => {···})
  .finally(() => {···});

4. 命名捕获组

ES9中可以通过名称来识别捕获组：

(?<year>[0-9]{4})

before:

const RE_DATE = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;

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

after:

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

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

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

ES10新特性

1. 选择性的catch绑定

在使用try catch错误异常处理时，可以选择性的给catch传入参数（可以不给catch传参）

正常使用try catch:

try {
    // do something
} catch (err) {
    // console.log('err', err);
}

在es10中使用时，可以：

try {
    // do something
} catch {
    // do something

}

2. JSON.superset

背景： JSON内容可以正常包含 行分隔符（\u2028）和 段落分隔符（\u2029）而ECMAScript却不行。

在ES10中，可以直接使用

eval('\u2029');

而不会在提示错误。

3. Symbol.prototype.description

为Symbol类型增加Symbol.prototype.description的一个访问器属性，用来获取Symbol类型数据的描述信息。

console.log(Symbol('test').description);
// 'test'

console.log(Symbol.for('test').description);
// 'test'

console.log(Symbol.iterator.description);
// 'Symbol.iterator'

4. Function.prototype.toString

在ES10之后，函数调用toString()方法，将准确返回原有信息，包括空格和注释等。

let funcToString = function () {
    //do something
    console.log('test');
}
/**
"function () {
    //do something
    console.log('test');
}"
*/

5. Object.fromEntries()

Object.fromEntries()是Object.entries()的反转。

const obj = { foo: 'bar', baz: 42}
let res1 = Object.entries(obj);
console.log(res1);
// [['foo', 'bar'], ['baz', 42]]
let obj1= Object.fromEntries(res1);
console.log(obj1);
// {foo: 'bar', baz: 42}

map转换为object

let map = new Map([['name','alex'], ['age', 18]]);
const obj2 = Object.fromEntries(map);
console.log(obj2);
// object {name: 'alex', age: 18}

6. 更友好的JSON.stringify

正常字符的表示不变：

JSON.stringify('