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

相关推荐
艾小码2 小时前
只会npm install?这5个隐藏技巧让你效率翻倍!
前端·npm·node.js
hwjfqr3 小时前
VSCode终端中文乱码问题解决
前端·后端
3 小时前
前端页面空白监控:从检测到溯源的全链路实战方案
前端
妮妮喔妮3 小时前
如何把HTML转化成桌面Electron
前端·javascript·electron
日月晨曦3 小时前
React 在线 playground 实现指南:让代码在浏览器里「原地爆炸」的黑科技
前端·react.js
南北是北北3 小时前
Flow 里的上游/下游
前端·面试
金州_拉文3 小时前
uniapp
前端·uni-app
鹏程十八少3 小时前
10. Android <卡顿十>高度封装Matrix卡顿, 修改Matrix源码和发布自己的插件
前端
写代码的stone3 小时前
antd时间选择器组件体验优化之useLayoutEffect 深度解析:确保 DOM 更新时序的关键机制
前端