默认参数:点餐时的"套餐标配"
想象我们去餐厅点菜,若顾客不指定要求,厨师自动按默认方案处理
js
// ES5 手动判断缺省值
function orderES5(drink) {
drink = drink || "🍵绿茶"; // 需额外判断
}
// ES6 直接声明默认值
function orderES6(drink = "🍵绿茶", dessert = "🍰慕斯") {
console.log(` 饮料:${drink},甜点:${dessert}`);
}
orderES6(); // 输出:饮料:🍵绿茶,甜点:🍰慕斯
orderES6("☕拿铁"); // 输出:饮料:☕拿铁,甜点:🍰慕斯
优势:
- 代码更简洁,避免
||
判断的逻辑漏洞 - 默认值可为表达式(动态生成默认值)
js
function calcArea(r, pi = Math.PI) {
return pi * r * r;
}
Rest 参数:大胃王的"自助餐盘"
当不确定参数数量时,用 ...变量名
打包剩余参数为数组。
js
// ES5 用 arguments 类数组操作复杂
function sumES5() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
}
// ES6 用 rest 直接获取数组
function sumES6(...numbers) {
return numbers.reduce((a, b) => a + b);
}
console.log(sumES6(1, 2, 3)); // 6
规则:
- 必须是最后一个参数
- 替代
arguments
,支持数组方法(如map
/filter
)
解构参数:拆解"盲盒礼物"
直接从参数中提取对象属性或数组元素
js
// 对象解构参数
function printUser({ name, age = 18 }) {
console.log(`${name} 今年${age}岁`);
}
printUser({ name: "小明" }); // "小明今年18岁"
// 数组解构参数
function getFirst([firstItem]) {
return firstItem;
}
console.log(getFirst(["🍎", "🍌"])); // "🍎"
优势:
- 避免函数内重复解构代码
- 支持嵌套解构(如
{ data: { list } }
)
参数作用域:独立的"厨房重地"
默认参数会形成临时作用域,与函数体作用域隔离
js
let x = 1;
function cook(y = x + 1) { // 此处 x 指向全局 x
let x = 100;
console.log(y); // 输出 2(不受内部 x 影响)
}
cook();
注意:
- 参数默认值按从左到右顺序初始化
- 前方参数可作为后方参数的默认值(反向则不可)
牢记
默认参数:不传值,有保底,Rest参数:不确定,打包走,解构参数:精准拆,直接取