随着前端技术的发展，JavaScript 成为前端开发必须掌握的语言。而在 JavaScript 中，ECMAScript 是一种标准化的规范，它规定了 JavaScript 语言的核心语法和特性。目前最新的 ECMAScript 版本是 ES11，本文将深度解析 ES11 带来的新增与变更内容，以及为前端开发者提供学习和指导意义。
新增的特性
添加 BigInt 数据类型
ES11 引入了新的 BigInt 数据类型，用于支持超出 Number 类型表示范围的整数运算。传统的 Number 类型只能表示 -2^53 到 2^53 之间的整数，而 BigInt 类型可以表示任意大的整数。
BigInt 数据类型需要加上后缀 n，例如 10n。
console.log(9007199254740992n + 1n); // 9007199254740993n
添加可选链操作符 ?.
ES11 中引入了可选链操作符 ?.，可以简化处理深层嵌套属性或方法时的代码。它的作用是判断对象或数组的属性或方法是否存在，如果不存在则返回 undefined。
let obj = {
a: {
b: 1
}
}
console.log(obj?.a?.b); // 1
console.log(obj?.a?.c); // undefined添加环境记录 top-level await
ES11 引入了环境记录 top-level await，可以在模块的顶层作用域中使用 await。以前只能在 async function 中使用 await，现在可以在模块中的任意位置使用。
// module.js
const res = await fetch('https://example.com/data.json');
const data = await res.json();
console.log(data);for-in、for-of 循环的遍历顺序被修改
在 ES11 之前，for-in 和 for-of 循环的遍历顺序是未定义的。ES11 规定了这两个循环的遍历顺序，for-in 循环的遍历顺序是按对象属性插入的顺序进行，而 for-of 循环的遍历顺序是按迭代器 Iterator 返回的顺序进行。
let arr = [1, 2, 3];
arr.foo = 'bar';
for (let key in arr) {
console.log(key); // 0, 1, 2, foo
}
for (let item of arr) {
console.log(item); // 1, 2, 3
}修改的特性
globalThis 替代 window 和 global
ES11 规定了 globalThis 关键字，可以用来在多个环境中获取全局对象。在浏览器中可以使用 window，在 Node.js 中可以使用 global，而使用 globalThis 则可以兼容各种环境，避免因为环境不同导致代码出错。
console.log(globalThis.setTimeout === window.setTimeout); // true console.log(globalThis.setTimeout === global.setTimeout); // true
import() 支持动态导入模块
ES11 修改了模块化语法 import，支持动态导入模块。这意味着可以在程序运行时根据条件导入模块，而不是在编译时确定导入哪些模块。
if (condition) {
const module = await import('./module1.js');
} else {
const module = await import('./module2.js');
}总结
本文深度解析了 ES11 带来的新增与变更内容，包括 BigInt 数据类型、可选链操作符 ?.、环境记录 top-level await、修改 for-in、for-of 循环的遍历顺序、globalThis 关键字和动态导入模块支持。这些特性的引入可以提高开发者的开发效率，同时也需要开发者积极学习并运用到实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6457817e968c7c53b0a2f892