JavaScript 数组过滤和映射会在数组条目之间产生逗号吗？

Question

以下代码允许我将 JSON 数组中的条目附加到网页和表格元素内:

//define a function that will fetch status and set icon URL
function setServerProcessesServer1761() {
  var url = "Server1761.json";
  var $svc = $("#Server1761-processes"); //get a reference to your <div>

  $.getJSON(url, function(data) {
    document.getElementById(
      "Server1761-processes"
    ).innerHTML = data.processes
      .filter(s => s.Name.value.includes("company_name"))
      .map(
        s =>
          `<table><tr><td>${s.Name.value}</td> <td>${
            s.Status
          }</td></tr></table>`
      );
    $("#Server1761-processes").html(function(_, html) {
      return html.replace(/runn1ng/g, "<img src='smallgreen.png' />");
    });
    $("#Server1761-processes").html(function(_, html) {
      return html.replace(/fai1ed/g, "<img src='smallred.png' />");
    });
  }); // you will have to concatenate the entire services request line on line 130
}

//special jQuery syntax to run when document is ready (like onload but better)
$(function() {
  setServerProcessesServer1761();
});

最终发生的事情是在每个表格行之后插入一个逗号 ,:

我以为我无意中将其编写在代码中，但是当我尝试 CTRL+F 时，我没有发现任何逗号。

我又想了一下，我的下一个猜测是它附加了数组中列出的 JSON 条目，而 JSON 数组中存在逗号。

我的问题是，如何删除 JSON 数组中列出的逗号，并让我的表行条目看起来更像是一个没有中断或逗号的综合表，如下所示:

Answer 1

当您将元素的 innerHTML 设置为数组时

elem.innerHTML = [1, 2, 3]

该数组在幕后转换为字符串，然后渲染到 DOM。

默认情况下，字符串化数组会用逗号连接其所有元素。

console.log(
  [1, 2, 3].toString() === [1, 2, 3].join(',')
)

您可以通过手动加入其他内容(例如新行)来覆盖它:

console.log(
  [1, 2, 3].join('\n')
)