解构给默认值_解构赋值默认值误区

问题还原

这是最近 CR 的时候在业务代码中发现了一个问题，先来看一下问题代码：

// data 为接口返回的数据

const { bizObject = {}, total = 0 } = data.result || {};

const list = bizObject.list || [];

// 其他逻辑，比如把 list 更新到 state 中，等等

A 接口正常的情况：data 中有 result 属性，且 result 对象中 bizObject 返回了一个数—— ✅

B 接口异常：data 对象中没有 result 属性 —— ✅

C 接口异常：data 中有 result 属性，result 对象中也有 bizObject 属性，但是，bizObject 属性的值是 null，然后呢？

从上下文来看，这位同学应该是期望解构赋值按以下方式执行：

const result = data.result || {};

const bizObject = result.bizObject || {};

// ...

但是，C 情形抛异常了：

Uncaught TypeError: Cannot read property 'list' of null

也就是 bizObject 的值是 null 而不是期望的 {}。为什么呢？

解构赋值中的默认值

A variable can be assigned a default, in the case that the value un