JS 可选链与空值合并 - 简化多层对象属性访问的安全写法-js教程-PHP中文网

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

幻影之瞳

发布： 2025-09-16 22:40:01

原创

486人浏览过

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

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

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

&&

登录后复制

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

null

登录后复制

或

undefined

登录后复制

的默认值问题。

使用可选链（

?.

登录后复制

）和空值合并运算符（

??

登录后复制

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

TypeError: Cannot read properties of undefined

登录后复制

这样的错误。

解决方案：

可选链（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
```
登录后复制
空值合并运算符（Nullish Coalescing Operator）：
```
??
```
登录后复制
空值合并运算符
```
??
```
登录后复制
只有当左侧的操作数为
```
null
```
登录后复制
或
```
undefined
```
登录后复制
时，才会返回右侧的操作数。它与
```
||
```
登录后复制
运算符不同，
```
||
```
登录后复制
会在左侧操作数为
```
falsy
```
登录后复制
值（如
```
0
```
登录后复制
、
```
''
```
登录后复制
、
```
false
```
登录后复制
）时返回右侧操作数。

例如：

法语写作助手
法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

31

查看详情
```
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
```
  登录后复制
  的数据。
组合使用：

可以将可选链和空值合并运算符组合使用，以更优雅地处理嵌套对象属性的访问和默认值设置。
```
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 中非常有用的特性，可以提高代码的可读性、安全性和简洁性。但需要注意兼容性问题，并根据实际情况谨慎使用。

以上就是JS 可选链与空值合并 - 简化多层对象属性访问的安全写法的详细内容，更多请关注php中文网其它相关文章！