解构赋值中的默认值坑点记录解构赋值中的默认值坑点记录最近在使用 ES6 的解构赋值时踩了个坑。其实是因为自己对语法理解

解构赋值中的默认值坑点记录

最近在使用 ES6 的解构赋值时踩了个坑。其实是因为自己对语法理解不够全面，结果导致线上出现 bug。所以写下这篇文章记录一下，也给大家提个醒。

1. 官方文档链接

先贴上 MDN 的官方文档，推荐大家在写 ES6 语法时，最好对照文档确认下细节：

2. 基础示例

我们都知道，在解构时可以为属性设置默认值，比如：

const { foo = 'default' } = {};
console.log(foo); // "default"

但实际使用时，**默认值的触发条件并不是“值为假值”时生效**，而是**当解构的属性严格等于 `undefined` 时才生效**。

来看几个对比案例：
// 情况一：值为 undefined，会触发默认值
const { name_1 = '大长腿' } = { name_1: undefined, age: 18 };
console.log("name_1:", name_1); // "大长腿"

// 情况二：值为 null，不会触发默认值
const { name_2 = '大长腿' } = { name_2: null, age: 18 };
console.log("name_2:", name_2); // null

// 情况三：值为空字符串，不会触发默认值
const { name_3 = '大长腿' } = { name_3: '', age: 18 };
console.log("name_3:", name_3); // ""

输出结果：
name_1: 大长腿
name_2: null
name_3:

⚠️ 注意：只有属性值为 undefined 时才会触发默认值，null、0、'' 等 不会触发

3. 实际踩坑案例

我在项目里想给 res.data[0].author 设置一个兜底值：

const { author = 'JUNMO' } = res.data[0];

本意是：

如果接口的 author字段为null，就用 'JUNMO'。

但实际遇到的问题是：

接口返回 author: null 时，解构不会触发默认值，而是得到 null。
之后在代码里调用时：

 getAuthInfo() {
  return this.authorList[this.author][this.$i18n.locale] 
    || authInfo.JUNMO[this.$i18n.locale];
}

结果 this.author 变成了 null，访问 this.authorList[null] 导致 undefined，整段逻辑报错。

这就属于 把“null”当成“缺省值”处理，结果却踩坑了。

4. 为什么会这样？

根据 MDN 文档的说明：

在对象解构赋值中，只有当被解构的值严格等于 undefined 时，默认值才会生效。

也就是说：

undefined ⇒ 触发默认值
null ⇒ 不触发默认值（因为这是一个“有值”的情况，只是值为空）

这是 ES6 设计时的明确规范。

5. 正确处理方式

如果你的业务里需要把 null 或者空字符串也兜底，就不能单纯依赖解构的默认值

const { author } = res.data[0];
const safeAuthor = author ?? 'JUNMO';  // Nullish 合并运算符

这里 ?? 只会在 author === null 或 author === undefined 时兜底。
如果你连空字符串也想兜底，可以改成： const safeAuthor = author || 'JUNMO';

6. 常见误区 vs 正确写法

属性值	解构写法 `const { a = 'X' } = { a: ... }`	结果
`undefined`	`a = 'X'`	`'X'`
`null`	`a = 'X'`	`null`
`''` (空字符串)	`a = 'X'`	`''`
`0`	`a = 'X'`	`0`
`false`	`a = 'X'`	`false`

7. 总结

解构赋值的默认值 只会在属性值为 undefined 时生效。
如果接口返回 null 或空字符串，默认值不会触发。
业务中常见的兜底需求，应该配合 ??（nullish 合并运算符） 或 ||（逻辑或） 来实现。