JS 可选链与空值合并 – 简化多层对象属性访问的安全写法

可选链（?.）和空值合并（??）简化嵌套属性访问与默认值设置，避免 TypeError 并提升代码可读性，适用于处理可能为 null 或 undefined 的情况，需注意兼容性及合理使用场景。

JS 可选链与空值合并，简单说，就是让你在访问嵌套对象属性时，不用写一堆

&&

判断是否存在，以及优雅地处理

null

或

undefined

的默认值问题。

使用可选链（

?.

）和空值合并运算符（

??

）可以有效简化代码，提高代码的可读性和安全性，避免出现

TypeError: Cannot read properties of undefined

这样的错误。

解决方案：

1. 可选链（Optional Chaining）：

   ?.

   可选链允许你安全地访问嵌套对象的属性，即使中间的属性不存在，也不会报错，而是返回

   undefined

   。

   例如，假设你有这样一个对象：

   const user = {
   profile: {
   address: {
   city: 'Beijing'
   }
   }
   };

   如果直接访问

   user.profile.address.street

   ，当

   user.profile

   或

   user.profile.address

   不存在时，会报错。使用可选链：

   const street = user?.profile?.address?.street; // street 为 undefined，不会报错
   console.log(street);

   如果

   user

   为

   null

   或

   undefined

   ，整个表达式会立即返回

   undefined

   ，后面的属性不会再访问。

   在函数调用中使用可选链：

   const result = someObject?.someMethod?.(); // 如果 someObject 或 someMethod 不存在，result 为 undefined

2. 空值合并运算符（Nullish Coalescing Operator）：

   ??

   空值合并运算符

   ??

   只有当左侧的操作数为

   null

   或

   undefined

   时，才会返回右侧的操作数。它与

   ||

   运算符不同，

   ||

   会在左侧操作数为

   falsy

   值（如

   0

   、

   ''

   、

   false

   ）时返回右侧操作数。

   例如：

   

   Remove.bg

   AI在线抠图软件，图片去除背景

   59

   查看详情
   

   const name = localStorage.getItem('name') ?? 'Guest'; // 如果 localStorage 中没有 'name'，则 name 为 'Guest'
   const count = 0 ?? 10; // count 为 0，因为 0 不是 null 或 undefined
   const value = null ?? 'default'; // value 为 'default'

   使用场景：

   • 设置默认值，尤其是在

     0

     或

     ''

     是有效值的情况下。

   • 处理 API 返回的可能为

     null

     或

     undefined

     的数据。

3. 组合使用：

   可以将可选链和空值合并运算符组合使用，以更优雅地处理嵌套对象属性的访问和默认值设置。

   const city = user?.profile?.address?.city ?? 'Unknown'; // 如果 city 不存在，则 city 为 'Unknown'

为什么需要可选链和空值合并？它们解决了什么问题？

传统的 JavaScript 代码在访问深层嵌套对象属性时，需要进行大量的

&&

判断，以避免

TypeError

。

let city;
if (user && user.profile && user.profile.address) {
city = user.profile.address.city;
} else {
city = 'Unknown';
}

这样的代码冗长且难以阅读。可选链和空值合并运算符的出现，简化了代码，提高了可读性，同时也减少了出错的可能性。它们主要解决了以下问题：

• 避免

  TypeError

  ： 安全地访问可能不存在的属性。

• 简化代码： 减少

  if

  语句和

  &&

  运算符的使用。

• 提高可读性： 使代码更易于理解和维护。

可选链和空值合并的兼容性如何？旧浏览器能用吗？

可选链和空值合并运算符是 ES2020 引入的新特性。这意味着，在一些较旧的浏览器或 Node.js 环境中，可能无法直接使用。

兼容性解决方案：

• Babel 转换： 使用 Babel 等工具可以将 ES2020 代码转换为 ES5 或 ES6 代码，从而在旧浏览器中运行。需要在 Babel 配置文件中添加相应的插件，例如

  @babel/plugin-proposal-optional-chaining

  和

  @babel/plugin-proposal-nullish-coalescing-operator

  。

• Polyfill： 可以使用 polyfill 来模拟可选链和空值合并运算符的功能。但通常情况下，使用 Babel 转换是更好的选择。

示例 Babel 配置：

{
"plugins": [
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-nullish-coalescing-operator"
]
}

可选链和空值合并在实际项目中的最佳实践是什么？

• 谨慎使用可选链： 虽然可选链可以避免报错，但也可能隐藏一些潜在的问题。如果某个属性不应该不存在，那么使用可选链可能会掩盖错误。应该在预期属性可能不存在的情况下使用。
• 空值合并用于默认值： 空值合并运算符非常适合用于设置默认值，特别是当

  0

  或

  ''

  是有效值时。

• 结合 TypeScript 使用： TypeScript 可以更好地利用可选链和空值合并运算符，提供更强的类型检查。
• 代码审查： 在团队开发中，进行代码审查可以确保可选链和空值合并运算符的使用符合项目规范，避免滥用。

示例代码 (TypeScript):

interface User {
profile?: {
address?: {
city?: string;
};
};
}
const getUserCity = (user: User): string => {
return user?.profile?.address?.city ?? 'Unknown';
};
const myUser: User = {};
console.log(getUserCity(myUser)); // 输出 "Unknown"
const myUser2: User = { profile: { address: { city: 'Shanghai' } } };
console.log(getUserCity(myUser2)); // 输出 "Shanghai"

总之，可选链和空值合并运算符是 JavaScript 中非常有用的特性，可以提高代码的可读性、安全性和简洁性。但需要注意兼容性问题，并根据实际情况谨慎使用。