JavaScript 一度被称为“万物皆对象”的编程语言，因为它的一切都可以看作是对象，甚至基本数据类型如数字和字符串也可以通过包装对象来实现对象样式的操作。不过随着 JavaScript 的发展，这种观点已经不再成立了。本文将介绍 ES11 中的一些新特性，让我们告别“万物皆对象”的 JavaScript。
import() 语句
在 ES11 中，可以使用 import() 语句动态加载模块。这种语法类似于函数调用，可以在运行时根据需要动态加载模块，而不是在编译时将所有模块都加载进来。这可以减少启动时间并提高性能。
考虑下面的示例代码：
async function loadModule(moduleName) {
const module = await import(`./${moduleName}.js`);
return new module.default();
}
loadModule("myModule").then((moduleInstance) => {
console.log(moduleInstance.foo());
});在此示例中，我们定义了一个名为 loadModule 的异步函数，它接受一个字符串参数 moduleName 并使用 import() 加载对应的模块。这个函数返回一个 Promise，最终解析为包含模块实例的对象。我们可以像调用普通函数一样使用这个函数，并在解析后执行回调函数，以获得模块实例的方法 foo() 的输出结果。
空值合并运算符 ??
在 JavaScript 中，使用 || 运算符来提供默认值是一种常见的技巧。不过它有一个缺点，即在某些情况下，它可能会返回意外的值，如 0 或空字符串。在 ES11 中，可以使用空值合并运算符 ?? 来避免这个问题。
考虑下面的示例代码：
const username = user.name ?? "Unknown"; const followers = user.followers ?? [];
在此示例中，我们使用 ?? 运算符来提供默认值以避免 undefined 的问题。如果 user.name 为 null 或 undefined，则默认值 "Unknown" 将用于 username。如果 users.followers 不存在，则默认值 [] 将用于 followers。
需要注意的是，空值合并运算符与 || 运算符不同之处在于，它只会在左侧运算元素为 null 或 undefined 时使用默认值。如果左侧运算元素为任何其他假值（如 false、0 或空字符串），则仍然会返回该值。
可选链运算符 ?.
在 JavaScript 中，当我们想要访问对象的嵌套属性或方法时，需要通过多个层级的属性、方法调用，可能会遇到属性或方法不存在而出现运行时错误的问题。在 ES11 中，可以使用可选链运算符 ?. 来简化这个问题。
考虑下面的示例代码：
const city = user.address?.city; const result = user.foo?.();
在此示例中，如果 user.address 存在，则 city 将被设置为 user.address.city，否则 city 将为 undefined。如果 user.foo 存在，则 result 将是调用 user.foo() 的结果，否则 result 将为 undefined。
需要注意的是，可选链运算符只有在左侧运算元素为 null 或 undefined 时才会返回 undefined。如果左侧运算元素不为 null 或 undefined，则将继续执行右侧的属性或方法调用。
箭头函数的 this 绑定
在 JavaScript 中，函数执行时的 this 值取决于它是如何调用的。箭头函数与普通函数不同之处在于，它没有自己的 this 绑定，而是使用其定义时所在的词法作用域中的 this 值。在 ES11 中，可以通过 :: 运算符来绑定箭头函数的 this 值。
考虑下面的示例代码：
-- -------------------- ---- -------
----- --- - -
-- ---
------- -------- -- -
----- -- - --- -- -
------------------ - ---
--
---------------------
--
--
------------- -- -- --在此示例中，我们定义了一个名为 obj 的对象，该对象具有数字属性 x 和一个方法 method。在 method 方法内部，我们定义了一个箭头函数 fn，它使用词法作用域中的 this.x 和传递的参数 y 计算结果并输出。由于箭头函数没有自己的 this 绑定，因此我们使用 bind(this) 来指定 this 值，并使用 :: 运算符将其绑定到函数 fn 本身。最终，我们调用箭头函数并传递参数 5。
总结
ES11 中引入了一些新的特性，如 import() 语句、空值合并运算符 ??、可选链运算符 ?. 和箭头函数的 this 绑定等。这些特性为 JavaScript 提供了更多的功能和便利性，可以帮助我们更轻松地编写高效、可读性更高的代码。在实际项目中，我们应该根据自己的需求和代码风格使用这些特性，以使我们的代码更加清晰、简洁和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b0feac48841e9894d46afa