当前位置：首页 > news >正文

给函数参数设置默认值的方式

news 来源：原创 2025/4/28 12:29:32

在 JavaScript 中，给函数参数设置默认值主要有以下几种方式：

1. 函数体内手动检查赋值（ES5 及以前）

在函数内部检查参数是否为 undefined，然后手动赋值默认值。

function greet(name, age) {name = name !== undefined ? name : 'Guest';age = age !== undefined ? age : 18;return `Hello, ${name}! You are ${age} years old.`;
}console.log(greet()); // "Hello, Guest! You are 18 years old."
console.log(greet("Alice", 30)); // "Hello, Alice! You are 30 years old."

2. 短路运算符（||）

使用逻辑或运算符（||）为参数提供默认值，但这种方式会将所有假值（如 0、false、''）都替换为默认值，可能导致意外结果

function greet(name, age) {name = name || 'Guest';age = age || 18;return `Hello, ${name}! You are ${age} years old.`;
}console.log(greet()); // "Hello, Guest! You are 18 years old."
console.log(greet("", 0)); // "Hello, Guest! You are 18 years old." ❌ 不符合预期

3. ES6 箭头函数 + 解构赋值

结合箭头函数和解构赋值，为参数对象的属性设置默认值

const greet = ({ name = 'Guest', age = 18 } = {}) => {return `Hello, ${name}! You are ${age} years old.`;
};console.log(greet()); // "Hello, Guest! You are 18 years old."
console.log(greet({ name: "Alice" })); // "Hello, Alice! You are 18 years old."

4. ES6 参数默认值（最推荐）

直接在函数参数列表中为参数赋值默认值，这是 ES6 引入的标准语法，简洁且语义明确

function greet(name = 'Guest', age = 18) {return `Hello, ${name}! You are ${age} years old.`;
}console.log(greet()); // "Hello, Guest! You are 18 years old."
console.log(greet("Alice")); // "Hello, Alice! You are 18 years old."

特点

只有当参数为 undefined 时才会触发默认值（传递 null 不会触发）。

可以使用前面已定义的参数计算后续参数的默认值：

javascript

function calculate(total = 100, discount = total * 0.1) {return total - discount;
}
console.log(calculate()); // 90

5. 对象解构 + 默认值

当函数接受一个对象参数时，通过解构赋值为对象属性设置默认值。

function greet(options) {const { name = 'Guest', age = 18 } = options;return `Hello, ${name}! You are ${age} years old.`;
}console.log(greet({ name: "Alice" })); // "Hello, Alice! You are 18 years old."
console.log(greet()); // ❌ 报错：Cannot destructure property 'name' of 'options' as it is undefined.

改进： 为整个参数设置空对象默认值，避免不传参时的错误：

function greet({ name = 'Guest', age = 18 } = {}) {// ...
}
console.log(greet()); // "Hello, Guest! You are 18 years old."

6. 函数调用时动态计算默认值

将默认值设置为一个函数调用，每次调用原函数时动态生成默认值。

function getDefaultAge() {return new Date().getFullYear() - 2000;
}function greet(name = 'Guest', age = getDefaultAge()) {return `Hello, ${name}! You are ${age} years old.`;
}console.log(greet()); // "Hello, Guest! You are 25 years old." (假设当前年份是 2025)

总结对比

方式	优点	缺点
ES6 参数默认值	简洁、语义明确、标准语法	仅支持 `undefined` 触发
对象解构	适合复杂参数结构	需要额外处理不传参的情况
短路运算符	简单易用	会误判所有假值（如 `0`、`''`）
函数体内赋值	兼容性好（ES5 及以前）	代码冗余