在 ES10 中使用 optional chaining 处理 “undefined” 和 “null” 值
随着前端技术的快速发展，JavaScript 作为前端开发的核心语言在不断升级。ES10 中引入了新的语法 optional chaining，能够更加优雅地处理 undefined 和 null 值，在代码编写的时候能够减少很多重复的代码，提高代码的可读性和可维护性。本文将详细介绍使用 optional chaining 处理 undefined 和 null 值，并提供示例代码和指导意义。
1.optional chaining 是什么？
optional chaining 是一种非常有意思而又实用的语法糖，它可以减少很多代码，解决了很多问题。例如，当一个对象的属性是 null 或者 undefined 时，如果直接访问其属性将会导致代码执行失败，并返回异常。optional chaining 就是为了解决这个问题而引入的该语法。
2.optional chaining 的语法
optional chaining 的语法非常简单。在需要访问属性的位置加上 ?. 即可对 null 或 undefined 作出适当的响应。
例如：
-- -------------------- ---- -------
----- ------ - -
----- --------
---- ---
-------- -
----- -----------
-------- -------
-
--
--------------------------
----------------------------------在上面的例子中，第一行代码 person.name 将会返回 “Wendy”，而第二行代码 person.gender.name 则会返回 undefined 而不是报错，这极大的方便了代码的编写。
3.optional chaining 的使用场景
optional chaining 可以应用于对象、数组、函数等多种场景。
3.1 对象
在对象中使用 optional chaining，可以简化对象的访问操作，减少了代码的重复。例如：
-- -------------------- ---- -------
----- ------ - -
----- --------
---- ---
-------- -
----- -----------
-------- -------
-
--
----------------------------------- -- ----------3.2 数组
在数组中使用 optional chaining，可以简化对元素的访问操作。例如：
const person = {
name: 'Wendy',
age: 23,
hobbies: ['reading', 'writing']
};
console.log(person?.hobbies?.[1]); // 'writing'3.3 函数
在函数中使用 optional chaining，可以简化函数调用的过程。例如：
async function getData() {
const response = await fetch('https://.../data.json');
const result = await response?.json();
console.log(result);
}4.optional chaining 的注意事项
虽然 optional chaining 看起来很简单，但是在使用的时候我们还是需要注意一些问题。
4.1 链式调用
在 optional chaining 的时候不能构造链式调用。例如：
const person = {
name: 'Wendy',
age: 23,
address: null
};
console.log(person?.address.city);person 对象的 address 键值为 null，在访问 city 属性的时候将会报错。
4.2 函数调用
在使用 optional chaining 的时候，对于函数的调用我们也需要注意。例如：
const person = {
name: 'Wendy',
age: 23,
sayHi() {
console.log(`Hi, I am ${this.name}`);
}
};
console.log(person?.sayHi());person 对象的 sayHi 方法被成功调用，打印了正确的输出结果。
5.optional chaining 的兼容性
在使用 optional chaining 之前，我们需要注意其在一些浏览器中的兼容性。目前大部分的浏览器都是支持的，包括 Chrome、Firefox、Safari 等，但是 IE 不支持该语法。如果你的项目需要支持 IE，那么可以使用 babel 转译或者手动编写兼容性代码。
6.示例代码
为了更好地理解 optional chaining 的用法，这里提供一些示例代码。
6.1 示例代码 1
-- -------------------- ---- -------
----- ------ - -
----- --------
---- ---
-------- -
----- -----------
-------- -------
-
--
----------------------------------- -- ----------
----------------------------------------- -- ---------在这个示例代码中，我们使用了 optional chaining 的语法访问了 person 对象的属性。第二行代码中，当我们尝试访问 person.address 值的 area 属性时，因为 area 属性不存在，所以返回了 undefined。
6.2 示例代码 2
async function getData() {
const response = await fetch('data.json');
const result = await response?.json();
console.log(result);
}
getData();在这个示例代码中，我们使用了 optional chaining 的语法获取了从远程服务端获取的数据。当没有获取到数据时，系统默认返回 undefined。
7.总结
optional chaining 是一种非常实用的语法糖，能够帮助我们更加轻松地处理 null 和 undefined 的情况。在代码的编写过程中，使用 optional chaining 能够提高代码的可读性和可维护性。但是在使用之前，我们还是需要注意其一些注意事项，尤其是在浏览器的兼容性方面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64575e57968c7c53b0a197ea