JavaScript中使用map方法时如何向函数传递对象数组参数

• 你在模板字符串中直接插入数组类型的speed.topics时，JavaScript会自动调用其toString()方法做隐式类型转换：
  普通对象调用toString()固定返回[object Object]，数组的toString()会把所有元素转成字符串后用逗号拼接，最终就出现了你看到的错误参数格式。
• 字符串类型的speed.name直接插入到onclick参数中缺少引号包裹，也会触发语法错误。
• 另外你提供的speedRecords示例存在语法问题：对象属性之间需要加逗号分隔，数组闭合符号位置错误，实际开发中注意修正即可。

通过JSON.stringify()把引用类型转成合法字符串，同时做引号转义避免和HTML属性冲突，修复后的代码如下：

<ul class="details">
    ${ 
        speedRecords.map(speed =>  `<li>${speed.name}<span>
        <a href="javascript:void(0)" onclick="showModalWithTopic('${speed.name.replaceAll("'", "\\'")}', ${JSON.stringify(speed.topics).replaceAll('"', '&quot;')})">${speed.total}</a></span></li>`)
        .join('')
    }
</ul>

修复逻辑说明：

• 给speed.name外层加单引号包裹，同时转义内容中可能存在的单引号，避免字符串提前闭合
• 用JSON.stringify()将speed.topics转成标准JSON字符串，同时把JSON中的双引号转成HTML实体"，避免和onclick属性的双引号冲突
• 函数接收到的topics参数会被JS自动解析为原始数组对象，可直接正常使用

内嵌onclick写法存在转义复杂、易出注入风险的问题，更推荐用事件委托实现：

<!-- 渲染时把参数存在自定义data属性中 -->
<ul class="details">
    ${ 
        speedRecords.map(speed =>  `<li>${speed.name}<span>
        <a href="javascript:void(0)" class="topic-btn" 
            data-name="${speed.name.replaceAll('"', '&quot;')}" 
            data-topics="${encodeURIComponent(JSON.stringify(speed.topics))}">
            ${speed.total}
        </a></span></li>`)
        .join('')
    }
</ul>

// 统一绑定点击事件
document.querySelector('.details').addEventListener('click', e => {
  if (!e.target.classList.contains('topic-btn')) return
  const name = e.target.dataset.name
  const topics = JSON.parse(decodeURIComponent(e.target.dataset.topics))
  showModalWithTopic(name, topics)
})

该方案不需要处理复杂的引号嵌套问题，也更符合现代JS开发的编码规范。

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