JavaScript 中解构赋值怎么给变量设置默认初始值-js教程-PHP中文网

javascript解构赋值默认值仅在对应属性为undefined时生效，null、0、''等假值不触发；支持对象/数组/函数参数中使用，可嵌套且默认值表达式惰性求值。

javascript 中解构赋值怎么给变量设置默认初始值

JavaScript 中解构赋值时，可以直接在模式中为变量指定默认值，语法简洁且直观。默认值只在被解构的属性为 undefined 时生效，null、false、0、'' 等“假值”不会触发默认值。

对象解构中的默认值

在对象解构中，把默认值写在变量名后，用 = 连接即可：

例如：

const obj = { name: 'Alice', age: 0 };
const { name, age = 25, city = 'Beijing' } = obj;
console.log(name); // 'Alice'
console.log(age);  // 0（不是 undefined，所以不使用默认值 25）
console.log(city); // 'Beijing'（obj 没有 city 属性，取默认值）

注意：默认值支持表达式，甚至函数调用，且只在需要时执行：

const { x = Math.random() } = {}; —— 只有解构到 undefined 时才计算随机数
可嵌套设置默认值：{ user: { name = 'Anonymous' } = {} } = data;（注意内层也要给 user 设默认空对象，否则解构 user.name 会报错）

数组解构中的默认值

数组解构同样支持默认值，按位置依次匹配，缺失或为 undefined 的项触发默认值：

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

例如：

const arr = ['a', , 'c']; // 第二项是 empty slot，解构为 undefined
const [x, y = 'b', z] = arr;
console.log(x); // 'a'
console.log(y); // 'b'（因为 arr[1] 是 undefined）
console.log(z); // 'c'

跳过某位可用逗号占位：const [,,third] = arr;
剩余元素用扩展运算符 ...，它本身也支持默认值：const [a, ...rest = ['default']] = [1]; → rest 是 [ ]，但若右边是 [1]，rest 就是空数组；要让它有默认值，得确保左侧 ... 对应的是 undefined，通常需配合函数参数或明确赋值场景

函数参数中的解构默认值

函数形参支持直接解构并设默认值，非常实用：

function greet({ name = 'Guest', level = 'user' } = {}) {
  console.log(`Hello ${name}, you are a ${level}`);
}
greet();                    // Hello Guest, you are a user
greet({ name: 'Tom' });     // Hello Tom, you are a user
greet({ name: 'Jerry', level: 'admin' }); // Hello Jerry, you are a admin

注意开头的 = {}：它给整个参数对象设了默认空对象，防止传入 undefined 导致解构失败。

默认值与解构失败的区别

默认值不能“兜底”所有错误。比如：

const { foo: { bar } = {} } = {}; ✅ 合法：先给 foo 设默认空对象，再从中解构 bar
const { foo.bar } = {}; ❌ 报错：试图从 undefined 解构 bar，需先确保 foo 存在
安全写法：const { foo = {} } = {}; const { bar } = foo; 或一步写成 const { foo: { bar } = {} } = {};

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南