一文带你了解 ES11 的新特性

ES11，也称为 ECMAScript 2020，是 JavaScript 语言的最新版本。在这个版本中，新增了许多新特性，包括可选链操作符、Nullish 合并操作符、动态 import 等。这些新特性为前端开发带来了更加便利和高效的编程体验。

可选链操作符

在 JavaScript 中，当我们需要访问一个对象的属性时，如果该对象为 null 或 undefined，就会抛出 TypeError 异常。在 ES11 中，新增了可选链操作符 ?.，可以很好地解决这个问题。该操作符可以在对象的属性访问过程中，如果遇到 null 或 undefined，就直接返回 undefined，而不会抛出异常。

示例代码：

// javascriptcn.com 代码示例
const user = {
  name: 'Tom',
  address: {
    city: 'Beijing'
  }
};

console.log(user.address?.city); // 'Beijing'
console.log(user.address?.province?.name); // undefined

在上面的代码中，user.address?.city 可以直接返回 Beijing，而 user.address?.province?.name 则返回 undefined，而不会抛出异常。

Nullish 合并操作符

在 JavaScript 中，当我们需要判断一个值是否为 null 或 undefined 时，通常会使用 || 运算符。但是，该运算符存在一个问题：当值为 false、0、空字符串等 falsy 值时，也会被认为是 null 或 undefined。在 ES11 中，新增了 Nullish 合并操作符 ??，可以很好地解决这个问题。该操作符只有在左侧的值为 null 或 undefined 时，才会返回右侧的值，否则返回左侧的值。

示例代码：

const a = null;
const b = 0;
const c = '';

console.log(a ?? 'default'); // 'default'
console.log(b ?? 'default'); // 0
console.log(c ?? 'default'); // ''

在上面的代码中，a ?? 'default' 可以返回 default，而 b ?? 'default' 则返回 0，而不是 'default'。

动态 import

在 ES11 中，新增了动态 import，可以在运行时根据需要动态加载模块。该特性可以提高应用程序的性能和可维护性，特别是在使用大型框架和库时。

示例代码：

async function loadModule() {
  const module = await import('./module.js');
  module.sayHello();
}

loadModule();

在上面的代码中，import('./module.js') 可以在运行时动态加载 module.js 模块，然后执行其中的 sayHello 函数。

总结

ES11 的新特性为前端开发带来了更加便利和高效的编程体验。可选链操作符、Nullish 合并操作符和动态 import 等特性，不仅可以提高代码的可读性和可维护性，还可以优化应用程序的性能。在实际开发中，我们应该充分利用这些特性，提高代码的质量和效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650f397e95b1f8cacd8146a8