前端必备 | ECMAScript 2020 新特性 ES11 整理-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 是 JavaScript 的标准化组织，每年都会发布新的版本。2020 年发布的 ECMAScript 11，也称为 ES2020，增加了一些新特性，包含了 JavaScript 语言的几个重要方面。

本文将为您整理 ECMAScript 2020 的新特性，内容详细，深度学习，有指导意义，带有示例代码。

空位合并运算符（Nullish Coalescing Operator）

在 JavaScript 中，空字符串、0、null、undefined 和 false 均会被视为假值，开发者通常使用或运算符（||）来处理变量为假值的情况。

然而，|| 可能会出现潜在错误。当变量为 0 或空字符串的时候，|| 运算符会将其视为假值。而空位合并运算符（??）只在变量为 null 或 undefined 时才会返回后面的值。

// javascriptcn.com 代码示例
const a = null;
const b = 'hello';
const result1 = a || b;     // result1 = 'hello'
const result2 = a ?? b;    // result2 = 'hello'

const c = 0;
const d = 'world';
const result3 = c || d;     // result3 = 'world'
const result4 = c ?? d;    // result4 = 0

可选链操作符（Optional Chaining）

在 JavaScript 中访问嵌套对象属性时，如果其中一个属性不存在，会导致代码报错。可选链操作符（?.）允许我们访问深层次嵌套的属性时，如果对象不存在某个属性则不会报错并直接返回 undefined。

// javascriptcn.com 代码示例
const obj = {
  prop1: {
    prop2: {
      prop3: 'hello'
    }
  }
};

const result1 = obj.prop1.prop2.prop3;      // result1 = 'hello'
const result2 = obj.prop1.prop2.prop4;      // TypeError: Cannot read property 'prop4' of undefined

const result3 = obj?.prop1?.prop2?.prop3;   // result3 = 'hello'
const result4 = obj?.prop1?.prop2?.prop4;   // result4 = undefined

可选链操作符与空位合并运算符可以进行组合使用，使代码更加简洁。

// javascriptcn.com 代码示例
const obj = {
  prop1: {
    prop2: {
      prop3: null
    }
  }
};

const result1 = obj?.prop1?.prop2?.prop3 ?? 'default';     // result1 = 'default'

需要注意的是，可选链操作符只在严格相等（===）比较 undefined 时才会返回 undefined。

匹配全部（MatchAll）

在 ES2020 中，正则表达式新增了 matchAll 方法，用来匹配全部匹配项，返回一个迭代器，可以将所有结果遍历出来。

// javascriptcn.com 代码示例
const str = 'Hello World. This is JavaScript.';
const regex = /is\s/g;
const matches = str.matchAll(regex);

for(let match of matches) {
  console.log(match);
}

// Output:
// ['is ', index: 14, input: 'Hello World. This is JavaScript.']

数字分隔符（Numeric Separators）

在 ES2020 中，你可以在数字中使用下划线（_）来分隔大小写，使数字更加易读。

const billion = 1_000_000_000;
const decimals = 1_000.000_001;

Promise.allSettled

Promise.all 会在所有 Promise 完成或至少一个 Promise 拒绝后返回。Promise.allSettled 返回一个 Promise 数组，该数组包含每个 Promise 的解决结果或拒绝原因，无论它是否被解决。

// javascriptcn.com 代码示例
// Promise.all
const promise1 = Promise.resolve('hello');
const promise2 = Promise.resolve('world');
const promise3 = Promise.reject('error');

Promise.all([promise1, promise2, promise3])
  .then(results => console.log(results))
  .catch(error => console.log(error));

// Output:
// 'error'

// Promise.allSettled
Promise.allSettled([promise1, promise2, promise3])
  .then(results => console.log(results));

// Output:
// [
//   { status: 'fulfilled', value: 'hello' },
//   { status: 'fulfilled', value: 'world' },
//   { status: 'rejected', reason: 'error' }
// ]

总结

以上就是 ECMAScript 2020 的新特性，每个特性都有其独特的优势和应用场景，为我们的工作带来了很大的便利。当然这些还远远不是全部的新特性，希望能够给大家带来一些启发，并且帮助学习和应用。

所有示例代码都可以在此 GitHub 仓库中查看和下载。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653e22d97d4982a6eb7b5a5b