如何不使用forEach方法，结合模板字面量正确渲染数组为HTML结构

问题场景与代码 #

我有一段处理输入项列表的代码，逻辑是遍历输入项，通过判断复选框状态来添加或移除savedItem数组中的元素，console.log(savedItem)能输出正确的数组内容，但渲染HTML时出现重复内容（输出多于数组实际元素）。

原代码如下：

suggestedItems.forEach(function(elem) {
  elem.addEventListener("click", function(event) {
    currentItem = this.parentElement.innerText; // 建议添加let声明，避免全局变量
    if (event.target.checked) {
      if (!savedItem.includes(currentItem)) {
        savedItem.push(currentItem);
      }
    } else {
        let removeIndex = savedItem.indexOf(currentItem);
        savedItem.splice(removeIndex, 1);
    }
    console.log(savedItem); /*This gives correct output*/
    savedItem.forEach((item) => {
      allSavedItems = allSavedItems.concat(`<div><p>${item}</p></div>`);
      /*Wrong output*/
    });
    document.querySelector(".cip-body").innerHTML = allSavedItems;
  });
});

期望渲染的HTML结构：

<div><p>array content</p></div>
<div><p>array content</p></div>
<div><p>array content</p></div>

问题原因 #

每次触发点击事件时，allSavedItems未被重置，而是在原有内容的基础上持续拼接新的HTML片段，导致每次点击都会累加之前的渲染内容，最终出现重复。

解决方案 #

使用数组的map()结合join()方法，一次性生成完整的HTML字符串，替代循环拼接的方式：

修改后的核心代码部分：

console.log(savedItem);
// 直接生成完整HTML字符串，无需提前声明allSavedItems
const allSavedItems = savedItem.map(item => `<div><p>${item}</p></div>`).join('');
document.querySelector(".cip-body").innerHTML = allSavedItems;

代码说明 #

• map(item => ...)：遍历savedItem数组，将每个元素转换成目标HTML片段，返回一个包含所有HTML字符串的新数组。
• join('')：将数组中的所有HTML字符串拼接成一个完整的字符串，直接赋值给元素的innerHTML即可完成渲染。
• 额外优化：给currentItem添加let声明，避免意外创建全局变量：let currentItem = this.parentElement.innerText;

这样既解决了重复渲染的问题，也实现了无需手动循环、一次性渲染数组内容的需求。

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