JS使用map遍历对象数组渲染商品列表出现多余逗号如何解决

问题原因 #

• map() 方法执行后返回的是存储多个HTML片段的数组，而非完整的连续字符串
• 当你直接将数组赋值给DOM的innerHTML属性时，JavaScript会自动调用数组的toString()方法转换格式，该方法默认用逗号分隔数组的每一项，这些自动生成的逗号就是你页面上多余符号的来源。

修复方法 #

调用数组的join('')方法，手动将数组里的所有HTML片段拼接成没有分隔符的完整字符串，再赋值给innerHTML即可，仅需要修改最后一行代码：

// 原错误代码
// productsOuterDiv.innerHTML = productsBox;

// 修复后代码
productsOuterDiv.innerHTML = productsBox.join('');

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