在前端开发中，JavaScript 是不可或缺的一部分。而随着 JavaScript 的不断发展，新的语法和特性也不断涌现。ES11（也称为 ECMAScript 2020）是 JavaScript 的最新版本，它引入了一些新的功能和语法，让开发者能够更加方便地编写代码。
本文将为大家详细介绍 ES11 的一些新特性，包括可选链操作符、nullish 合并操作符、动态 import 和 BigInt 等。同时，我们也将通过示例代码来演示这些新特性的使用方法，帮助大家更好地理解和掌握它们。
可选链操作符
在 JavaScript 中，我们经常需要访问对象的属性或方法。但是，如果这个对象不存在，我们就会遇到一个 TypeError 错误。为了解决这个问题，ES11 引入了可选链操作符（?.），它可以让我们更加方便地访问对象的属性或方法。
例如，我们要获取一个对象的 name 属性，可以这样写：
const name = person && person.name;
但是，如果 person 对象不存在，我们就需要加上一个判断：
const name = person && person.name ? person.name : '';
使用可选链操作符，我们可以这样写：
const name = person?.name ?? '';
其中，?. 表示如果 person 存在，则获取它的 name 属性，否则返回 undefined；?? 表示如果 name 为 null 或 undefined，则返回空字符串。
nullish 合并操作符
在 JavaScript 中，我们经常需要判断一个变量是否为 null 或 undefined，如果是，就给它一个默认值。通常情况下，我们可以使用逻辑或运算符（||）来完成这个操作。
例如，我们要获取一个变量的值，如果它为 null 或 undefined，则赋值为 0，可以这样写：
const value = someValue || 0;
但是，逻辑或运算符存在一些问题。如果 someValue 的值为 0 或 false，它也会被认为是 null 或 undefined，从而触发默认值的赋值。为了解决这个问题，ES11 引入了 nullish 合并操作符（??）。
使用 nullish 合并操作符，我们可以这样写：
const value = someValue ?? 0;
其中，?? 表示如果 someValue 的值为 null 或 undefined，则返回默认值 0，否则返回 someValue 的值。
动态 import
在以前的 JavaScript 版本中，我们只能使用静态导入来引入模块。这意味着我们必须在编译时确定要导入的模块，而不能在运行时动态地加载模块。为了解决这个问题，ES11 引入了动态 import。
使用动态 import，我们可以这样写：
const module = await import('./module.js');其中，import() 方法返回一个 Promise，它会异步地加载指定的模块。一旦加载完成，我们就可以使用它提供的方法和变量。
BigInt
在 JavaScript 中，Number 类型的值有一个最大值，它约为 2 的 53 次方。如果我们需要处理更大的数字，就需要使用 BigInt 类型。ES11 引入了 BigInt 类型，它可以表示任意大的整数。
使用 BigInt，我们可以这样写：
const bigIntValue = 9007199254740991n;
其中，n 表示这是一个 BigInt 类型的值。我们可以对 BigInt 类型的值进行加、减、乘、除和取模等运算，但是不能与 Number 类型的值混合使用。
总结
ES11 引入了许多新特性，包括可选链操作符、nullish 合并操作符、动态 import 和 BigInt 等。这些新特性可以让我们更加方便地编写代码，提高开发效率和代码质量。希望本文能够帮助大家更好地理解和掌握 ES11 的新特性，从而写出更加优秀的前端代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66076faad10417a2225f899f