JavaScript 可选链怎么用

如果你平时写代码时，总遇到“因为对象中间某一层不存在，导致整个程序直接报错”的情况，那你一定懂这种无奈。比如你想获取用户的“收货地址里的街道”，但有的用户没填收货地址，有的用户只填了地址没填街道，这时候如果直接写 user.address.street，就会因为 address 不存在直接卡住。

这种场景在日常开发里太常见了，以前大家只能靠嵌套判断来解决，现在有了更简单的方法——JavaScript可选链。

什么是JavaScript可选链

简单说，可选链就是帮你“安全地访问对象属性”的小工具，它的核心是用 ?. 代替普通的 .，告诉JS引擎：“如果前面的部分不存在，就别再往下找了，直接返回undefined，别报错！”

还是用刚才的用户例子，以前你得这么写：

`javascript

// 老方法：多层判断，怕漏写就加了一堆if

let street;

if (user && user.address) {

street = user.address.street;

} else {

street = undefined;

}

`

逻辑绕，还容易写错。用可选链的话，一行就搞定：

`javascript

// 新方法：可选链直接解决

const street = user?.address?.street;

`

就这么简单，不用加任何判断，user不存在、address不存在，都不会报错，street会自动变成undefined，完全不影响其他代码运行。

可选链的几种常用用法

可选链不止能用来访问对象属性，还有几个日常开发里常用的场景，记这几个就够了。

访问对象的方法

如果要调用一个对象的方法，之前也得先判断方法存在，不然调用不存在的方法会报错。比如调用用户的“修改地址”方法，以前是：

`javascript

// 老方法：判断方法存在

if (user && user.updateAddress) {

user.updateAddress();

}

`

用可选链的话，直接写user?.updateAddress?.()，就可以安全调用——不管user或者updateAddress不存在，都不会报错，直接跳过调用。

访问数组的元素

数组也能用可选链，比如你要取用户列表里第一个用户的名字，以前得这么写：

`javascript

const firstUserName = users && users[0] && users[0].name;

`

用可选链的话，users?.[0]?.name就可以，不管users是空数组或者没定义，都不会报错。

配合空值合并运算符使用

有时候你不想返回undefined，想给个默认值，这时候可以和空值合并运算符??搭配。比如如果用户没填街道，默认返回“未知街道”，就可以写：

`javascript

const street = user?.address?.street ?? '未知街道';

`

如果street是undefined，??就会返回后面的默认值，比||更严谨，因为''或者0这些空值不会被替换。

可选链的注意事项

虽然可选链好用，但有两个情况不能用，不然会出问题。第一，可选链只能用于属性访问、方法调用、数组索引，不能用在普通的变量赋值，比如user?.address = '北京'是错误的，因为前面不存在的话，没法赋值。第二，它不会屏蔽语法错误，比如你写错变量名use?.address?.street，还是会直接报错，因为JS根本不认识use这个变量。

总结一下，可选链就是让你少写判断、少踩报错的坑，日常写代码时遇到多层属性访问、方法调用的场景，用?.代替.，就能让代码更简洁、更稳。