将 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('')`