JavaScript统计字符出现次数打印时内容被覆盖如何解决

问题原因 #

代码的字符统计逻辑没有问题，错误出在结果输出的环节：循环中每次对#result4元素的innerHTML执行赋值操作时，都会直接覆盖该元素的原有内容，前面的统计结果会被后续的赋值完全清空，最终只会保留最后一次循环写入的内容。

修复方案 #

只需要调整输出部分的逻辑，先把所有统计结果拼接完成后再一次性写入页面即可，修改后的完整JS代码如下：

function ex44() {
  let string = document.getElementById("sarc4").value
  string = string.toLowerCase();
  const count = {}
  string.split("").forEach(ch => {
    if (!count[ch]) {
      count[ch] = 1
      return
    }
    count[ch]++
  })
  // 先拼接所有结果，用<br>实现换行效果
  let resultContent = ''
  for (const key in count) {
    resultContent += `${key} : ${count[key]}<br>`
  }
  // 一次性写入页面
  document.getElementById("result4").innerHTML = resultContent
}

修改后输入assist就会输出预期的换行后的统计结果。

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