点击按钮向函数传递数组调用shift方法报非函数错误如何解决

• 事件监听绑定的回调函数默认第一个接收参数为点击事件对象（Event），你定义的b函数形参arr实际拿到的是事件对象而非目标数组，事件对象本身没有数组的shift方法，因此触发类型错误。
• 你的代码对同一个按钮重复绑定了两次click事件监听（外层绑定一次、a函数内绑定一次），会导致单次点击触发两次b函数，属于冗余代码，建议删除外层的绑定逻辑。

方案1：匿名函数包裹传参（最常用） #

通过匿名函数作为中间回调，手动传递目标数组给b函数：

const btn = document.getElementById('id1');
function a() {
    const arr = [1, 2, 3 , 4];
    // 点击触发匿名函数，内部主动调用b并传入数组
    btn.addEventListener('click', () => b(arr));
}
a()

function b(arr) {
    arr.shift();
    console.log(arr);
}

方案2：bind预传参（适合后续需要移除监听的场景） #

如果后续需要移除该点击监听，可以用bind方法预先绑定参数：

const btn = document.getElementById('id1');
function a() {
    const arr = [1, 2, 3 , 4];
    // bind第一个参数为this指向，第二个及之后为预传递的参数
    const boundB = b.bind(null, arr);
    btn.addEventListener('click', boundB);
    // 后续移除监听：btn.removeEventListener('click', boundB)
}
a()

function b(arr) {
    arr.shift();
    console.log(arr);
}

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