（挠头）刚学JS那会儿，我总在函数参数上栽跟头——为什么明明传了参数却显示undefined？为什么点击事件总获取不到动态数据？今天咱们就掰开揉碎了说，5个亲测有效的传参妙招，保你告别参数传递的玄学现场！

---

一、给参数上保险：默认值设置法

（拍大腿）遇到过这种情况没？调用函数时漏传参数导致整个页面崩掉。这时候就该祭出??默认参数??这个神器：

javascript复制
function 计算折扣价(原价=100, 折扣=0.8) {
  return 原价 * 折扣
}

??三大好处亮瞎眼??：

1. 防漏传参数引发的连环bug
2. 代码可读性直线上升
3. 参数类型自动校验（传字符串会被强制转换）

（举个栗子）上周帮人改电商项目，商品价格计算函数没设默认值，用户没选规格时就报NaN...加上默认值立马药到病除！

---

二、玩转参数打包术：解构赋值大法

（推眼镜）当参数多到眼花缭乱时，试试??对象解构传参??：

javascript复制
function 用户注册({username, password, phone='123456'}) {
  // 你的逻辑代码
}

// 调用时清晰到流泪
用户注册({
  username: '码农小张',
  password: '******',
  phone: '13800138000'
})

??对比传统传参方式??：

方式	参数顺序	可读性	维护难度
传统传参	严格固定	差	高
解构传参	任意顺序	极佳	低

---

三、参数变形记：函数工厂模式

（搓手手）需要动态生成不同参数的函数？??高阶函数??来救场：

javascript复制
function 创建问候语(前缀) {
  return function(姓名) {
    console.log(`${前缀}, ${姓名}!`)
  }
}

const 早上好 = 创建问候语('早起的鸟儿有虫吃')
早上好('程序员老王') // 输出：早起的鸟儿有虫吃, 程序员老王!

??适合场景??：

• 需要预置部分参数的重复调用
• 不同环境下的差异化配置
• 避免全局变量污染的传参需求

（说个糗事）当年做多语言网站，硬是写了20个相似函数来切换问候语...现在想想真想坐时光机回去抽自己！

---

四、参数穿墙术：闭包捕获术

（敲黑板）事件绑定中参数总丢失？??闭包捕获当前状态??的绝活必须掌握：

javascript复制
document.querySelectorAll('.goods').forEach((item, index) => {
  item.onclick = function() {
    加入购物车(index) // 完美捕获循环中的index值
  }
})

??常见坑点预警??：

1. 循环中直接使用var声明变量会引发值覆盖
2. 内存泄漏要警惕（尤其是SPA应用）
3. 避免在闭包中保存DOM元素引用

---

五、参数直通车：箭头函数搭桥

（竖大拇指）ES6箭头函数让传参变得??简单粗暴有效??：

javascript复制
// 传统写法
button.addEventListener('click', function() {
  处理点击(this.dataset.id)
})

// 箭头函数写法
button.addEventListener('click', () => 处理点击(当前页码, 用户ID))

??对比优势??：

• 自动继承外层this值
• 省略function关键字更简洁
• 特别适合需要传递上下文参数的场景

---

（叉腰）五年老码农的私房话：函数传参就像送快递，重点不在于包装多华丽，而是要把货物完整送到目的地。别被各种奇技淫巧迷了眼，记住??参数传递三原则??——明确性、安全性、可维护性。就像我家楼下煎饼摊老板说的："酱料该放多少就放多少，手别抖！"代码亦是如此，该传什么参数就老老实实传，整那些花里胡哨的反而容易翻车。