ES11 新特性一览-JavaScript中文网-JavaScript教程资源分享门户

ES11（也称为 ECMAScript 2020）是 JavaScript 的最新版本，于 2020 年 6 月发布。在这个版本中，增加了几个非常有用的新特性。本文将逐一介绍这些新特性，包括其用法、示例代码以及一些注意事项。

新型操作符（Nullish coalescing operator 和 Optional chaining operator）

Nullish coalescing operator 和 Optional chaining operator 是 ES11 中的两个新操作符。这些操作符可以使代码更加简洁易懂，并减少代码中的 null 或 undefined 引用错误。

Nullish coalescing operator (??) - 用于检查变量是否为 null 或 undefined。如果变量为 null 或 undefined，则返回一个默认值；否则返回变量本身。

示例代码：

const foo = null ?? 'default';
console.log(foo); // 'default'
const bar = 'existing value' ?? 'default';
console.log(bar); // 'existing value'

Optional chaining operator (?.) - 可以访问可能为 null 或 undefined 的变量的属性或方法，而无需在代码中显式检查变量是否为 null 或 undefined。

示例代码：

// javascriptcn.com 代码示例
const person = {
  name: 'John',
  address: null,
  phone: {
    home: '1234567890',
    work: null
  }
};

console.log(person.address?.street); // undefined
console.log(person.phone?.home); // '1234567890'
console.log(person.phone?.work?.extension); // undefined

需要注意的是，这些新操作符还不被所有浏览器支持，使用时需要进行兼容性处理。

Promise.allSettled()

Promise.allSettled() 是一个新的 Promise 静态方法，可以接受一个 Promise 数组作为参数并返回一个 Promise，该 Promise 在所有 Promise 都完成或被拒绝后解析。返回的 Promise 解析后将包含一个数组，其中包含每个 Promise 的解决值或拒绝原因。

示例代码：

// javascriptcn.com 代码示例
const promises = [
  Promise.resolve('fulfilled'),
  Promise.reject('rejected'),
  Promise.resolve('fulfilled')
];

Promise.allSettled(promises)
  .then(results => console.log(results));
/* 
输出：
[
  { status: 'fulfilled', value: 'fulfilled' },
  { status: 'rejected', reason: 'rejected' },
  { status: 'fulfilled', value: 'fulfilled' }
]
*/

与 Promise.all() 不同的是，Promise.allSettled() 不会因为其中一个 Promise 被拒绝就中断执行，而是会等待所有 Promise 完成后返回结果。

import()

import() 是一个动态导入语法，可以在运行时动态加载模块（以前必须在编译时静态导入）。这个新特性可以帮助我们按需加载模块，从而提高应用性能。

示例代码：

async function fetchData() {
  const myModule = await import('./myModule.js');
  console.log(myModule.myFunction());
}

fetchData();

需要注意的是，由于 import() 还不被所有浏览器支持，所以在使用时需要进行兼容性处理。

其他改进

除以上三个重要的新特性外，ES11 还包含了其他一些小改进，例如 String.prototype.matchAll()、globalThis 等。这些改进可以优化我们的代码，使其更加简洁易懂。

总结

ES11 中的新特性为我们提供了更多的工具和语言功能，可以帮助我们更有效地开发现代 Web 应用。虽然并不是所有浏览器都支持这些新特性，但是我们可以使用 polyfill 或其他工具来进行兼容性处理。通过学习这些新特性，我们可以更好地理解 JavaScript，提高我们的工作效率。

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