javascript - 将 join() 添加到 map() 函数

Question

我正在映射数组以使用模板文字在浏览器中显示数据。

对于每个呈现的对象，在浏览器中显示一个逗号，并且在我检查该元素时也是如此。我做了一些阅读，我认为这是因为我还没有加入数组，我正在尝试这样做，但我不理解在哪里将它添加到我拥有的基本功能中。

代码如下:

let synopsisRender = synopsisContent.map((item)=>{
    return`
    <div class="synopsis" key=${item.id}>
        <div class="synopsisHeader">
            <div class="cover">
                <img src="${item.poster}" alt="${item.altText}">
            </div>
            <div class="synopsisTitle">
                <h1>${item.title}</h1>
            </div>
        </div>
        <div class="synopsisText">
            <h2>${item.subTitle}</h2>
            <p>${item.synopsisText}</p>
        </div>
    </div>
    `
});

document.getElementById("synopsis").innerHTML = synopsisRender;

Answer 1

在 mapping 之后，但在分配给 innerHTML 之前。

let synopsisRender = synopsisContent.map((item)=>{
    return`
    <div class="synopsis" key=${item.id}>
        <div class="synopsisHeader">
            <div class="cover">
                <img src="${item.poster}" alt="${item.altText}">
            </div>
            <div class="synopsisTitle">
                <h1>${item.title}</h1>
            </div>
        </div>
        <div class="synopsisText">
            <h2>${item.subTitle}</h2>
            <p>${item.synopsisText}</p>
        </div>
    </div>
    `
}).join(''); //Here...

document.getElementById("synopsis").innerHTML = synopsisRender; //...Or here, `synopsisRender.join('')`