JS中innerHTML渲染map生成的元素时出现多余逗号如何解决

• Array.map() 遍历执行后返回值是存储了所有HTML模板片段的数组
• 直接将数组赋值给innerHTML属性时，JavaScript会隐式调用数组的toString()方法做类型转换，该方法默认以英文逗号为分隔符拼接所有数组元素，最终在页面渲染出相邻元素间的多余逗号
• splice、slice的作用是增删、截取数组元素，没有修改数组转字符串的默认拼接规则，因此无法解决该问题

在map()调用后链式执行.join('')，手动指定用空字符串拼接所有数组项，即可彻底消除多余逗号。

修正后的完整代码：

let meubleData = []

const fetchProduct = async () => {
    await fetch('http://localhost:3000/api/products')
      .then((res) => res.json())
      .then((res) => {
        console.log(res.length)
        meubleData = res
        console.log(meubleData)
      })
}

fetchProduct()


const displayProduct = async () => {
    await fetchProduct()
    document.getElementById('items').innerHTML = meubleData.map((meuble) => 
            `<a href="./product.html?_id=${meuble._id}">
                <article class = "article">
                    <img class="item__img" src = "${meuble.imageUrl}" alt = "${meuble.altTxt}" />
                    <h3 class="productName">${meuble.name}</h3>
                    <p class="productDescription">${meuble.description}</p>
                </article>
            </a>`
    ).join('')
}

displayProduct()

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