ES11 是 JavaScript 语言的最新版本,也称为 ECMAScript 2020,它引入了一些非常有用和有趣的新特性和更新。这些新特性和更新为前端开发者提供了更加强大和易用的工具和技术。在本文中,我们将深入探讨 ES11 的核心代码。
空值合并操作符
空值合并操作符(Nullish Coalescing Operator)是一个新的运算符 ??
,它用于处理变量为 null 或 undefined 时的默认值问题。以前,我们通常使用 ||
运算符来提供默认值。但 ||
运算符有一个缺点,就是当变量的值为 0 或空字符串 ""
时,也会被视为 false,导致默认值被错误赋值。
现在,我们可以使用 ??
运算符来解决这个问题,它只在变量为 null 或 undefined 时才提供默认值。下面是一个示例代码:
// javascriptcn.com 代码示例 // 使用 || 运算符 const name1 = null || "default"; console.log(name1); // "default" const name2 = "" || "default"; console.log(name2); // "default" // 使用 ?? 运算符 const name3 = null ?? "default"; console.log(name3); // "default" const name4 = "" ?? "default"; console.log(name4); // ""
可选链操作符
可选链操作符(Optional Chaining Operator)是一个新的运算符 ?.
,它用于安全地访问对象的嵌套属性和方法。以前,为了避免出现对象不存在的错误,我们必须使用复杂的 if 语句进行判断,或者使用一些库函数来处理。现在,使用可选链操作符可以 更加简洁和优雅地解决这个问题。
可选链操作符的语法非常简单,只需要在需要访问的属性或方法前加上 ?.
即可。如果对象不存在,则返回 undefined。下面是一个示例代码:
// javascriptcn.com 代码示例 const user = { name: "Alice", address: { street: "123 Main St.", city: "Los Angeles", state: "CA", }, }; const street = user?.address?.street; console.log(street); // "123 Main St." const zip = user?.address?.zip; console.log(zip); // undefined
Promise.allSettled
Promise.allSettled 方法是 Promise 类的一个新的静态方法,它用于并行地执行一组 Promise 对象,并返回它们的执行结果。与 Promise.all 方法不同的是,Promise.allSettled 方法会等待所有 Promise 对象都执行完毕,不管成功与否,都会返回一个结果数组。
结果数组中的每个元素都是一个对象,它包含了对应 Promise 对象的执行结果和状态。其中,fulfilled 对象表示 Promise 对象执行成功,rejected 对象表示 Promise 对象执行失败。下面是一个示例代码:
// javascriptcn.com 代码示例 const promise1 = Promise.resolve(1); const promise2 = Promise.reject("error"); const promise3 = new Promise((resolve) => setTimeout(resolve, 1000, "done")); Promise.allSettled([promise1, promise2, promise3]).then((results) => { console.log(results); }); // 输出结果: // [ // {status: "fulfilled", value: 1}, // {status: "rejected", reason: "error"}, // {status: "fulfilled", value: "done"}, // ]
总结
ES11 的新特性和更新为前端开发者提供了更加强大和易用的工具和技术。本文介绍了 ES11 的三个核心代码:空值合并操作符、可选链操作符和 Promise.allSettled 方法。它们都是非常实用和值得掌握的知识点。希望本文能够对您的学习和实践有所帮助。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/653f0ae57d4982a6eb88891e