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

javascript函数参数解构设默认值需配合解构赋值与参数默认值语法，仅undefined触发默认值；对象解构须加{}兜底防错，数组和嵌套对象同理。

javascript 怎么在函数参数解构时设置默认值

JavaScript 中在函数参数解构时设置默认值，核心是把“解构赋值的默认值语法”和“函数参数默认值语法”配合使用。关键点在于：只有 undefined 会触发解构默认值，null、0、false、'' 等 falsy 值都不会。

对象参数解构 + 属性默认值

这是最常用场景：函数接收一个配置对象，你想为其中某些属性设默认值。

写法是直接在解构模式里给每个属性赋默认值，并为整个参数提供一个空对象默认值（防止传入 undefined 或 null 导致解构报错）：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

✅ 正确写法（推荐）：
function logUser({ name = 'Guest', age = 18 } = {}) { console.log(name, age); }
调用效果：
logUser(); // Guest 18
logUser({ name: 'Alice' }); // Alice 18
logUser({ name: 'Bob', age: 25 }); // Bob 25
logUser({ name: null, age: 0 }); // null 0（注意：null 和 0 不触发默认值）

数组参数解构 + 元素默认值

适用于按位置传参但允许省略后几项的情况，比如坐标、颜色通道等。

✅ 正确写法：
function drawPoint([x = 0, y = 0, z = 0] = []) { console.log(x, y, z); }
调用效果：
drawPoint(); // 0 0 0
drawPoint([10]); // 10 0 0
drawPoint([10, 20]); // 10 20 0
drawPoint([10, 20, 30]); // 10 20 30

嵌套对象解构设默认值

当配置结构较深（如 options.api.timeout），可逐层解构并设默认值，避免重复判断。

✅ 示例：
function fetchWithConfig({ api: { url = '/api', timeout = 5000 } = {} } = {}) { console.log(url, timeout); }
说明：外层 = {} 防止 options 为 undefined；内层 = {} 防止 api 为 undefined；再往里 url = '/api' 才真正设属性默认值。

为什么不能只写 `{ x = 1, y = 2 }` 而不加 `= {}`？

因为如果调用时完全没传参（fn()），解构目标就是 undefined，而对 undefined 解构会抛出 TypeError: Cannot destructure property 'x' of 'undefined'。加上 = {} 就相当于兜底成空对象，让解构安全执行。