随着JavaScript的发展，它不断地扩展和改进。ES11（也称作ES2020）是最新的JavaScript版本，也带来了一些有用的新功能和改进。在这篇文章中，我们将研究ES11中的一些特性，并了解它们的深度和指导意义。
1. 可选链
当我们访问一个深层次的对象属性时，有可能会遇到一个问题：如果它的某些层级不存在，会导致Typerror。以前的解决方案是使用&&运算符或者try-catch块，但这并不方便。
现在，ES11的可选链特性解决了这个问题。我们只需要在属性名称后面加上?.就可以了。如果其前面的成员为空或者undefined，那它就会自动返回undefined而不是遇到Typerror。
示例代码：
-- -------------------- ---- -------
--- --- - -
------ -
------ -
------ ------ -------
-
-
-
-- -----
---------------------------------- -- ------ -------
---------------------------------- -- ------ ------ ---- -------- ------- -- ---------
-- ----
------------------------------------- -- ------ -------
------------------------------------- -- ---------2. 空值合并运算符
在我们处理数据的时候，我们经常会遇到“如果该值为null或undefined，我们就赋一个默认值”的情况。以前我们可能会写这样的代码：
let text = '';
if (value !== null && value !== undefined) {
text = value;
} else {
text = 'default value';
}在ES11中，我们可以使用空值合并运算符，用更简洁的方式实现相同的效果：
let text = value ?? 'default value';
这会先判断value的值是否为空或者undefined，如果是则赋予默认值。
3. Promise.allSettled
Promise.all()可以将多个Promise对象打包成一个新的Promise对象，当全部Promise对象成功执行，返回各Promise对象的返回值构成的一个数组，其中只有一个Promise对象执行失败，就会返回那个失败的Promise对象的Error。如果我们不需要返回值，或者只关注它们是否成功执行，Promise.allSettled()就会更有用。
Promise.allSettled()返回的结果是所有Promise对象的列表，即使其中有一些Promise对象失败了，也会返回它们的结果。结果数组包含每个Promise对象的状态（fulfilled或rejected）和它们的值（如果无效则undefined）。
示例代码：
-- -------------------- ---- ------- --- -------- - ------------------- --- -------- - ------------------------ --- -------- - ------------------- ----------------------------- --------- ---------------------- -- --------------------- -- --- -- - -- - ------- ------------ ------ - -- -- - ------- ----------- ------- ------- -- -- - ------- ------------ ------ - - -- -
4. 动态Import
在ES11之前，当我们需要在代码中动态加载一个JS资源时，需要使用require()或者import()，但是这两种方式有一些不便之处。
ES11引入了动态import语法，可以更方便地加载和使用依赖项。在这种情况下，你可以使用import()，而不用提供静态文件路径。这也意味着它可以被用于代码拆分和懒加载功能。
示例代码：
async function main(moduleName) {
const module = await import(moduleName);
module.default();
}
main('./module.js');以上代码将使用异步import()加载module.js模块，然后在加载成功后调用它的默认导出。
需要注意的是，虽然动态import已经在最新版本的Chrome和Firefox中得到了完整的支持，但在其他旧版浏览器中，如果没有使用Polyfill，则会遇到问题。
结论
ES11增加了许多新特性和改进，这些特性和改进将帮助我们编写更加简洁和易于维护的JavaScript代码。其中，可选链和空值合并运算符的引入可以更加方便地处理值为undefined和null的情况；Promise.allSettled则更好地支持Promise对象的处理；动态import则为代码拆分和懒加载功能提供了强有力的支持。以上这些特性和改进，可以使我们的前端开发更加高效、智能和可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66eec1096fbf9601972934cf