onclick传递对象数组元素到其他函数出现SyntaxError如何解决

问题原因 #

错误的核心诱因是对象插入模板字符串时的默认序列化规则异常：

• 你用${array[0]}将对象插入HTML字符串时，JS会自动调用普通对象的toString()方法，{abc:123}执行该方法后返回的值是[object Object]
• 最终生成的onclick属性代码会变成btnB([object Object]);，完全不符合JS语法规范，浏览器解析时就会抛出Uncaught SyntaxError: Unexpected identifier错误。

解决方法 #

方法1：JSON序列化转义（适配内联事件写法） #

将需要传递的对象转为JSON字符串，同时将onclick属性的边界符改为单引号，避免和JSON内部的双引号产生解析冲突：

function btnA() { 
    const array = [{ abc : 123 }, { def : 456 }]        
    div.innerHTML = `<div onclick='btnB(${JSON.stringify(array[0])});'>`;
    divList.appendChild(div);        
}

如果必须保留内联事件写法，这个方案可以最小改动解决问题

方法2：动态绑定事件（更推荐） #

内联事件本身存在可读性差、易出现转义冲突的问题，改用addEventListener绑定事件可以直接传递对象，完全不需要做序列化处理：

function btnA() { 
    const array = [{ abc : 123 }, { def : 456 }]
    const innerDiv = document.createElement('div')
    innerDiv.addEventListener('click', () => btnB(array[0]))
    div.appendChild(innerDiv)
    divList.appendChild(div);        
}

这个方案从根源规避了字符串拼接的转义问题，也符合现代JS的开发规范。

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