ES11 (也称为 ECMAScript 2020) 是 JavaScript 的最新版本,于 2020 年正式发布。它引入了许多新特性和升级,这些新增的功能涵盖了各种不同的应用场景,在前端开发中非常有用。在这篇文章中,我们将探讨 ES11 的一些最重要的更新。
1. Promise.allSettled
Promise.all 是实现并行异步操作的非常流行的方法之一。不过,如果其中的任何许多 Promise 对象状态失败,它将停止执行并抛出错误。但是,有些情况下,我们不希望 Promise.all 的执行在失败的 Promise 对象上停止。这就是 Promise.allSettled 发挥作用的时候!
Promise.allSettled 支持一组 Promise 对象,并在它们所有的状态都发生变化之后返回一个 Promise 数组。与 Promise.all 不同的是,它将处理 Promise 对象集合中的所有 Promise 对象(即使其中的某些 Promise 对象失败),并返回所有 Promise 对象结果的结果列表。
下面是 Promise.allSettled 的使用示例:
const promises = [Promise.reject(Error('fail')), Promise.resolve(123)]; const results = await Promise.allSettled(promises); console.log(results[0].status); // "rejected" console.log(results[0].reason.message); // "fail" console.log(results[1].status); // "fulfilled" console.log(results[1].value); // "123"
2. Nullish 合并运算符(??)
在 JavaScript 中,如果值为 false、null 或 undefined 时,运算符 || 和 && 将返回特殊的 falsy 值。这常常会引起混淆,并且会使代码变得不够清晰。ES11 引入了一个新的 Nullish 合并运算符(??),用于解决这个问题。
它的工作方式如下:
result = a ?? b;
如果 a 的值是 null 或 undefined,则返回 b。否则,返回 a 的值。
下面是 Nullish 合并运算符的使用示例:
const a = undefined; const b = 'default'; // 等同于 // const result = (a !== null && a !== undefined) ? a : b; const result = a ?? b; console.log(result); // 'default'
3. 可选链操作符(?)
在某些情况下,我们需要使用深层次的对象属性,例如 myObj.a.b[3].c。如果这个对象属性链中的任何一个节点未找到,则将抛出异常。在 ES11 中,我们可以使用 ? 运算符来避免这个问题。
使用 ? 运算符时,只有在属性存在时,才会继续访问该属性。下面是示例代码:
const myObj = { a: { b: [undefined, null, { c: 'hello' }], }, }; // 在 myObj.b[3].c 存在时,输出 'hello',否则输出 undefined console.log(myObj?.a?.b?.[3]?.c);
4. Promise.allSettled
Promise.all 是一种流行的方式来执行并行的异步操作,但只要其中的任何一个Promise失败的话,它就会停止执行并返回一个错误。这在某些情况下很不方便,因此在 ES11 中添加了 Promise.allSettled。
Promise.allSettled 与 Promise.all 非常相似,只不过它会在Promise的任何状态下返回所有结果。下面是使用示例:
const promises = [Promise.reject(Error('fail')), Promise.resolve(123)]; const results = await Promise.allSettled(promises); console.log(results[0].status); // "rejected" console.log(results[0].reason.message); // "fail" console.log(results[1].status); // "fulfilled" console.log(results[1].value); // "123"
结论
ES11 引入的这些新功能为 JavaScript 的开发人员提供了更多的工具,能够处理各种不同类型的问题。通过学习这些新功能并在代码中应用它们,开发人员可以更加高效地创建优秀的应用程序和网站。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/676edd62e9a7045d0d6e59bd