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

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

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

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

相关推荐
珍宝商店1 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown1 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy1 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip2 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿3 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
闭着眼睛学算法3 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴4 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.4 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰4 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息4 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js