ECMAScript 2020（也称为 ES11）是 JavaScript 编程语言的最新版本，其中包含了许多强大的新特性。本文将介绍其中的十个常用新特性，并提供示例代码，以帮助前端开发人员快速上手。
1. 可选链操作符
可选链操作符是一个新的 JavaScript 运算符，可以帮助开发人员在访问可能不存在的对象属性或方法时避免出错。如果存在该属性或方法，则返回其值，否则返回 undefined。
-- -------------------- ---- -------
----- ---- - -
----- -------
-------- -
------- ---- ---- -----
----- ----------
------ ----
-
--
----- ------- - ----------------------------
--------------------- -- ---------在上面的代码中，country 的值为 undefined，因为 user.address?.country?.name 中的 country 在 user.address 中不存在。
2. 空位合并操作符
空位合并操作符是另一个新的 JavaScript 运算符，可以帮助开发人员为可能为 null 或 undefined 的值设置默认值。此运算符只有在左侧的值为 null 或 undefined 时才会返回右侧的值。
const firstName = null; const lastName = 'Doe'; const name = firstName ?? lastName; console.log(name); // 'Doe'
在上面的代码中，name 的值为 'Doe'，因为 firstName 的值为 null。如果 firstName 的值为非空字符串，则 name 的值将为 firstName 的值。
3. 动态导入
动态导入是一种新的导入语法，可以在运行时动态地导入模块。使用动态导入可以帮助减少应用程序的启动时间，因为只有在需要时才会加载必要的依赖项。
async function getModule(path) {
const { default: module } = await import(path);
return module;
}
const module = await getModule('./module.js');在上面的代码中，getModule 函数使用动态导入从指定路径加载模块。
4. 数组平铺
数组平铺是一种新的数组操作，可以将多维数组转换为单维数组。
const arr = [1, [2, [3, 4]]]; const flattenedArr = arr.flat(Infinity); console.log(flattenedArr); // [1, 2, 3, 4]
在上面的代码中，flattenedArr 的值为 [1, 2, 3, 4]，因为 arr 包含一个多维数组。
5. 字符串匹配
字符串匹配是一个新的字符串操作，可以用于确定一个字符串是否包含另一个字符串。
const str = 'This is a string';
console.log(str.startsWith('This')); // true
console.log(str.endsWith('string')); // true
console.log(str.includes('is')); // true在上面的代码中，startsWith、endsWith 和 includes 方法用于检查 str 是否以指定的字符串开头、结尾或包含在字符串中。
6. for-in 循环
for-in 循环是 JavaScript 中的一种迭代语句，可以用于枚举对象的属性名称。ES11 为 for-in 循环添加了对跳过指定属性的支持。
const obj = { a: 1, b: 2 };
for (const key in obj) {
if (key === 'a') continue;
console.log(`${key}: ${obj[key]}`);
}在上面的代码中，continue 语句用于跳过 key 为 'a' 的属性。
7. 全局对象属性
ES11 引入了新的全局对象属性 globalThis，用于在不同的执行上下文中访问全局对象。无论是在浏览器环境还是 Node.js 环境中，都可以使用 globalThis 访问全局对象。
console.log(globalThis);
在上面的代码中，globalThis 将输出全局对象，无论脚本在哪个环境中运行。
8. Promise.allSettled
Promise.allSettled 是一个新的 Promise 方法，用于执行多个 Promise 对象，并在它们全部被 settled（即 resolved 或 rejected）后返回所有 Promise 的状态。
const promises = [
Promise.resolve('Success!'),
Promise.reject('Error!')
];
Promise.allSettled(promises)
.then(results => console.log(results));在上面的代码中，Promise.allSettled 将执行两个 Promise 对象，并在它们都 settled 后返回它们的状态。在本例中，results 的值将为 [{ status: 'fulfilled', value: 'Success!' }, { status: 'rejected', reason: 'Error!' } ]。
9. BigInt
BigInt 是 JavaScript 中的一种新的数据类型，用于表示任意精度的整数。它可以通过在数字后面附加 n 或调用全局函数 BigInt 来创建。
const bigInt1 = 9007199254740991n;
const bigInt2 = BigInt('9007199254740991');在上面的代码中，bigInt1 和 bigInt2 均为 BigInt 类型的整数。
10. Math 方法改进
ES11 改进了数学方法，使它们可以处理 BigInt 和浮点数。此外，ES11 引入了新的数学方法，如 Math.clamp，Math.scale 和 Math.signbit。
const bigInt = 9007199254740991n; console.log(Math.imul(bigInt, bigInt)); // 1n console.log(Math.clamp(3, 1, 2)); // 2
在上面的代码中，Math.imul 和 Math.clamp 方法分别用于处理 BigInt 和浮点数。
结论
ES11 带来了许多强大的新特性，并将 JavaScript 作为一种现代编程语言推向了前沿。使用这些新特性，开发人员可以更容易地编写健壮的应用程序，并尽可能地减少复杂性和错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672186f52e7021665e07d3f7