函数间传递对象数组遇语法错误：点击事件传参问题排查

核心问题原因 #

你遇到的语法错误，是因为在模板字符串中直接插入对象数组${data}时，JavaScript会自动将其转换为字符串，结果就是[object Object]——这在函数调用里属于无效语法，自然触发报错。

推荐解决方案：避免内联事件（更安全易维护） #

内联事件不仅容易出现这类序列化问题，还不利于代码维护，改用事件委托是更优的方案：

// 生成不带内联点击事件的DOM结构
let recipeTitles = function(){
  return data.map(el => `<a href="#" class="recipeTitles" id="${el.id}"><h2>${el.title}</h2></a>`).join('')
}

document.querySelector('#recipeTitle').innerHTML = recipeTitles()

// 给父元素绑定事件委托，统一处理点击
document.querySelector('#recipeTitle').addEventListener('click', function(e) {
  // 找到被点击的菜谱链接元素
  const targetLink = e.target.closest('.recipeTitles')
  if (targetLink) {
    const recipeId = parseInt(targetLink.id)
    showRecipe(recipeId, data)
  }
})

function showRecipe(id, data) {
  console.log(data)
  // 根据id找到对应菜谱对象
  const targetRecipe = data.find(item => item.id === id)
  console.log(targetRecipe?.title)
}

备选方案：序列化对象数组（仅作场景兼容） #

如果因为特殊场景必须使用内联点击事件，可以将对象序列化为JSON字符串，传递后再解析回来：

let recipeTitles = function(){
  // 将数组转为JSON字符串，并转义双引号避免与HTML属性冲突
  const serializedData = JSON.stringify(data).replace(/"/g, '"')
  return data.map(el => `<a onClick="showRecipe(${el.id}, ${serializedData})" href="#" class="recipeTitles" id="${el.id}"><h2>${el.title}</h2></a>`).join('')
}

function showRecipe(id, dataStr) {
  // 将字符串解析回对象数组
  const data = JSON.parse(dataStr)
  console.log(data)
  const targetRecipe = data.find(item => item.id === id)
  console.log(targetRecipe?.title)
}

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