单参数JavaScript函数添加可选参数的正确实现方式（适配jQuery事件调用）

问题根因 #

当你直接将test函数作为jQuery的click事件回调传入时，jQuery会自动把触发的事件对象作为第一个参数传递给回调函数。而JS的函数参数默认值仅在对应位置的入参为undefined时才会生效，因此你设置的false默认值不会被触发，optionalParam最终接收到的就是jQuery传入的事件对象。

可行解决方案 #

方案1：事件绑定时包一层匿名回调（最常用） #

不需要修改原函数逻辑，绑定事件时不直接传入test，而是用匿名函数包裹一层，手动调用test时不传参即可触发默认值，手动调用其他场景的逻辑也不受影响：

import $ from 'jquery'
const test = (optionalParam=false) => {
  console.log(optionalParam)
  console.log("hey")
}
$('button')
  .html('Click me')
  // 用箭头函数包裹，事件对象不会传入test
  .on('click', () => test())

// 其他场景调用正常使用即可
test() // 输出 false
test(true) // 输出 true

方案2：调整参数顺序，兼容事件对象使用需求 #

如果你在点击触发时还需要用到事件对象，可以调整函数参数顺序，将事件对象放在第一位，自定义可选参数放在第二位：

import $ from 'jquery'
// 第一个参数接收事件对象，第二个为自定义可选参数
const test = (event, optionalParam=false) => {
  console.log(optionalParam)
  console.log("hey")
  // 需要用事件对象时可以直接调用event的相关属性
}
$('button')
  .html('Click me')
  .on('click', test)

// 其他场景调用时，第一个参数传undefined/null即可触发第二个参数的默认值
test(undefined) // 输出 false
test(undefined, true) // 输出 true

方案3：使用对象参数解构适配多场景 #

如果函数后续可能扩展多个可选参数，可以改用对象解构的方式传参，避免参数顺序的问题：

import $ from 'jquery'
// 用对象解构设置默认值，默认空对象兜底
const test = ({ optionalParam = false } = {}) => {
  console.log(optionalParam)
  console.log("hey")
}
$('button')
  .html('Click me')
  // 点击时调用不传参数
  .on('click', () => test())

// 其他场景调用
test() // 输出 false
test({ optionalParam: true }) // 输出 true

内容的提问来源于stack exchange，提问作者shunshun