JavaScript 中变量解构怎么在函数参数传参时设置默认值-js教程-PHP中文网

JavaStoryDevelop

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

下载

javascript函数参数解构默认值的核心是结合解构语法与默认参数：对象/数组解构内部可设属性默认值，外层需加= {}或= []防undefined/null报错；默认值仅对undefined生效，null等假值不触发。

javascript 中变量解构怎么在函数参数传参时设置默认值

JavaScript 中在函数参数里用解构赋值设置默认值，核心是把解构语法和默认参数语法结合起来——对象或数组解构本身支持 = 指定默认值，而整个解构模式还可以再配一个外层默认值（比如 = {} 或 = []），避免传入 undefined 导致报错。

对象解构 + 默认值（最常用）

当函数期望接收一个配置对象时，直接在形参位置写解构，并为每个属性设默认值：

示例：

const logUser = ({ name = 'Anonymous', age = 18, role = 'user' } = {}) => {<br>  console.log(`${name} (${age}), role: ${role}`);<br>};

调用 logUser() → 使用全部默认值
调用 logUser({ name: 'Tom' }) → age 和 role 自动补默认
调用 logUser(null) 不会报错，因为外层 = {} 拦住了 null

数组解构 + 默认值

适合处理固定顺序的多个值，比如坐标、颜色分量等：

示例：

const drawRect = ([x = 0, y = 0, width = 100, height = 50] = []) => {<br>  console.log(`rect at (${x},${y}), size ${width}×${height}`);<br>};

调用 drawRect([10, 20]) → width 和 height 取默认
调用 drawRect() → 整个数组为 []，解构后各变量取默认值
注意：undefined 会触发默认值，但 null 不会（需靠外层 = [] 防御）

嵌套解构也能设默认值

深层结构可逐层设默认，提升配置灵活性：

示例：

const initApp = ({<br>  theme = 'light',<br>  api: { baseUrl = 'https://api.example.com', timeout = 5000 } = {}<br>} = {}) => {<br>  console.log(theme, baseUrl, timeout);<br>};

即使只传 { theme: 'dark' }，api 对象及其子属性仍能回退到默认值
每一层解构都可加 = {} 或 = [] 防空，避免 Cannot destructure property 'xxx' of undefined