JavaScript 默认参数怎么用

在日常写代码的过程中，我们经常会遇到需要给函数设置“备选值”的场景——比如写一个计算奶茶总价的函数，默认要算常温糖度三分糖的价格，但如果用户特别说明要热饮或全糖，就按用户要求来。以前没有 JavaScript 默认参数功能时，我们得靠各种判断来处理这种情况，现在有了默认参数，这事就简单多了。

什么是 JavaScript 默认参数？

简单说，就是给函数的参数提前设置一个默认值，当调用函数时，如果没传这个参数，或者只传了 undefined，函数就会自动用我们设好的默认值；如果传了其他有效值，就用传进来的内容。

举个生活化的例子：你点外卖备注“不要餐具”，商家默认是给餐具的，只有当你明确说“不要餐具”（即传对应的值），才会按你的要求来。默认参数就像商家提前设好的“默认给餐具”规则，灵活适配不同需求。

怎么设置默认参数？

设置方式特别简单，只需要在定义函数时，给对应参数加 = 再跟上默认值就行，语法和给变量赋值很像，完全不用复杂的判断语句。

比如写一个计算奶茶总价的函数：

`javascript

// 定义函数，给3个参数都设默认值

function calculateMilkTeaPrice(size = "中杯", sugar = "三分糖", isHot = false) {

// 中杯基础价15，大杯加3；三分糖默认，全糖加2；冷饮默认，热饮加1

let basePrice = size === "大杯" ? 15 + 3 : 15;

let sugarAdd = sugar === "全糖" ? 2 : 0;

let hotAdd = isHot ? 1 : 0;

return basePrice + sugarAdd + hotAdd;

}

`

调用函数时就灵活多了：

• 不传参数，直接用默认值：calculateMilkTeaPrice()，得到的是中杯三分糖冷饮的价格15；
• 只传部分参数，没传的用默认：calculateMilkTeaPrice("大杯")，得到大杯三分糖冷饮的价格18；
• 传所有参数，覆盖默认：calculateMilkTeaPrice("大杯", "全糖", true)，得到大杯全糖热饮的价格21。

用默认参数要注意什么？

默认参数虽然方便，但有几个小细节要避开坑，不然写出来的代码容易出问题。

第一个要注意的是：null 和 undefined 不一样。如果传的是 null，函数不会用默认值，会把 null 当成正常值。比如调用 calculateMilkTeaPrice("大杯", null, true)，这里的糖度是 null，不是默认的三分糖，价格会变成15（大杯）+ 0（null 不会触发全糖的加2） +1（热饮）=16，这是很多新手容易踩的小坑。

第二个要注意的是：默认值可以用其他参数，甚至是函数的返回值，这比以前的写法灵活多了。比如写一个生成奶茶名称的函数，默认的配料是另一个参数决定的：

`javascript

function getMilkTeaName(size = "中杯", sugar = "三分糖", base = size + sugar) {

return ${size}${sugar}奶茶;

}

// 调用时没传base，会用size和sugar的默认值生成：getMilkTeaName() → 中杯三分糖奶茶

`

第三个要注意的是：默认参数不会在函数定义时就固定值，而是调用时才计算。如果默认值是变量，每次调用都会重新算，适合做需要动态值的场景，比如默认的当前时间：

`javascript

function logOrderTime(time = new Date().toLocaleTimeString()) {

console.log(订单时间：${time});

}

// 第一次调用：logOrderTime() → 输出当前时间；

// 过1秒再调用：logOrderTime() → 输出新的当前时间，不是第一次的时间

`

以前没有默认参数时，我们要在函数里写一堆判断，比如 size = size || "中杯"，但这种写法有问题——如果用户传了空字符串、0这些假值，也会被当成没传参数，自动用默认值。而默认参数会严格判断“没传或传了 undefined”才用默认值，逻辑更准确，代码也更简洁易读，是现代 JavaScript 里处理参数的实用技巧。