ES2016~ES2020 各个版本的新特性总结

2,358 阅读3分钟

ES 2016

Array.prototype.includes()

TypedArray.prototype.includes()

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

```
    const array1 = [1, 2, 3];
    console.log(array1.includes(2));
```

String 也有 includes() 方法,只不过在ES 2015中就已实现,这里做以区分

幂运算符

幂运算符返回第一个操作数做底数,第二个操作数做指数的乘方。即, var1^var2 ,其中 var1 和 var2 是其两个操作数。幂运算符是右结合的。a ** b ** c 等同于 a ** (b ** c)。

```
    var1 ** var2
```

ES 2017

String.prototype.padStart() & String.prototype.padEnd()

padStart()/padEnd() 方法用另一个字符串填充当前字符串(重复,如果需要的话),以便产生的字符串达到给定的长度。填充从当前字符串的开始(左侧)/末尾(右侧)应用的。 str.padStart(targetLength [, padString]) str.padEnd(targetLength [, padString])

async/await

async function 用来定义一个返回 AsyncFunction 对象的异步函数。异步函数是指通过事件循环异步执行的函数,它会通过一个隐式的 Promise 返回其结果

```
function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}
async function asyncCall() {
  console.log('calling');
  var result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: 'resolved'
}
asyncCall();
```

object.entries()

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环还会枚举原型链中的属性)。

```
const object1 = {
  a: 'somestring',
  b: 42
};
for (let [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}
```

object.values()

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

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

object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符。

支持函数参数中的尾后逗号(trailing commas)

Atomics 对象 和 SharedArrayBuffer 对象

不是很常用,贴出MDN连接

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Atomics

ES 2018

异步迭代

改进正则表达式

剩余参数与展开语法

与解构数组类似;在ES 2018中为对象引入了相同的功能

Promise.prototype.finally()

finally() 方法返回一个Promise。在promise结束时,无论结果是fulfilled或者是rejected,都会执行指定的回调函数。这为在Promise是否成功完成后都需要执行的代码提供了一种方式。 这避免了同样的语句需要在then()和catch()中各写一次的情况。

ES 2019

Array.prototype.flat()

flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity,可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Array.prototype.flatMap()

flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。

var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// only one level is flattened
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

Object.fromEntries()

Object.fromEntries() 方法把键值对列表转换为一个对象。

const entries = new Map([
  ['foo', 'bar'],
  ['baz', 42]
]);

const obj = Object.fromEntries(entries);

console.log(obj);
// expected output: Object { foo: "bar", baz: 42 }

String.prototype.trimStart() & String.prototype.trimEnd()

trimStart() 方法从字符串的开头删除空格。trimLeft()是此方法的别名。

trimEnd() 方法从一个字符串的末端移除空白字符。trimRight() 是这个方法的别名。

Optional Catch Binding(可选的catch绑定)

try {
  //...
} catch {
  //handle error
}

Function.prototype.toString()

toString() 方法返回一个表示当前函数源代码的字符串。 function sum(a, b) { return a + b; }

console.log(sum.toString());
// expected output: "function sum(a, b) {
//                     return a + b;
//                   }"

console.log(Math.abs.toString());
// expected output: "function abs() { [native code] }"

Symbol.prototype.description

Well Formed Json.Stringify()

Array.Sort Stability

Json ⊂ ECMAScript (JSON Superset)

ES 2020

Promise.allSettled

BigInt

Optional chaining

Nullish coalescing Operator

dynamic import

global this

String.prototype.matchAll