极简三分钟ES6 - 函数的参数

小桥风满袖2025-09-05 9:43

默认参数：点餐时的"套餐标配"

想象我们去餐厅点菜，若顾客不指定要求，厨师自动按默认方案处理

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参数：不确定，打包走，解构参数：精准拆，直接取