在 JavaScript 开发中，经常会面临操作 null 或 undefined 的情况。以往我们需要使用条件判断来判断某个属性是否存在，但这样的代码存在嵌套过深、代码冗长等问题，ES10中新增的可选链和 nullish 合并操作符为我们解决了这个问题，下面我们来详细了解一下。
可选链操作符
可选链操作符（?.）是一个相对简单的操作符，它可以帮助我们避免针对 null 或 undefined 进行操作时产生的 TypeError 错误。它可以在不存在属性的情况下不会抛出异常并返回 undefined，例如：
const user = {
name: '张三',
age: 18
}
console.log(user.address.street) // 报错：Cannot read properties of undefined (reading 'street')
console.log(user.address?.street) // undefined上面示例中，user 对象中并不存在 address 属性，但使用可选链操作符，我们可以避免出现异常。
在使用可选链操作符时，我们可以连续使用多个操作符进行链式访问，例如：
-- -------------------- ---- -------
----- ---- - -
----- -----
---- ---
-------- -
----- -----
------- -----
-
-
------------------------------- -- --
------------------------------------------- -- ---------nullish 合并操作符
我们在操作 JavaScript 中的空值时，通常用 || 运算符来快速检测某个值是否为 null 或 undefined。但这种方式会忽略一些可能存在的 false、0 或空字符串等真实值。ES10 中新增的 nullish 合并操作符（??）不仅可以判断 false、0、空字符串等情况，还可以判断 null 或 undefined，例如：
const foo = null; const bar = 'hello'; console.log(foo || bar) // 'hello' console.log(foo ?? bar) // null
可以看到，|| 运算符会将 null 值转换成 false，因此返回了 bar 的值，而 ?? 运算符判断了 foo 的值为 null，因此返回了 null。
在实际开发中，我们可以利用可选链和 nullish 合并操作符组合使用，将代码写的更加灵活和简洁。例如，我们需要从后端接口获取某个用户的年龄，但有可能未获取到数据，我们可以采用如下方式：
-- -------------------- ---- -------
----- ---- - -
----- -----
-------- -
------- ---
-
-
----- --- - ----------------- -- ----
---------------- -- --可以发现，如果我们没有获取到 user.profile.age 的值，age 会自动赋值为“未知”。
总结
可选链和 nullish 合并操作符是 ES10 中新增的两个功能，他们可以帮助我们更加灵活地操作 JavaScript 中的空值，避免代码冗长的问题。在实际开发中，我们可以通过组合使用这两个操作符来编写更加优雅和简洁的代码。
欢迎大家继续关注我的博客，我们下期见！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649bc65e48841e9894887a2d