为什么多余的逗号是：Map，innerHTML

Question

以前的文章中提到了toString（）方法如何将逗号放在所映射的每个项目之间，可以通过使用join（“”）来解决。

下面，尝试2在显示的对象之间添加逗号，而尝试1没有。为什么是这样？

又如何修改尝试2，以便其输出复制尝试1？

Var data = [ {"name":"John","age":38}, {"name":"Mary","age":33}]

尝试1：完美

 data.map(function(e) {
    display2.innerHTML += "Name: " + e.name + " Age: " + e.age + "<br />";
 })

输出：

Name: John Age: 38
Name: Mary Age: 33

尝试2：之间加一个逗号-为什么？

  function getNameAge(e) {
        var nameAge = "Name: " + e.name + " Age: " + e.age + "<br />";
        return nameAge;
    }

  display2.innerHTML = data.map(getNameAge);

输出

Name: John Age: 38
,Name: Mary Age: 33

Answer 1

第一个示例未按预期使用map，而是将其用作伪forEach。 map的工作原理是对数组中的每个项目应用一个函数，然后返回结果数组，在第一种情况下您将忽略该结果。

第二个示例是map的适当用法，因为您使用返回的数组，并且将其字符串化为逗号分隔的字符串；逗号分隔符是Array.prototype.toString的默认值。

这里是map的用法，join将结果数组分成一个字符串且没有逗号：

const data = [ {"name":"John","age":38}, {"name":"Mary","age":33}];
const display2 = document.getElementById("display2");

display2.innerHTML = data.map(e => `Name: ${e.name} Age: ${e.age}<br>`).join("");

<div id="display2"></div>

Answer 2

首先，看看map函数定义（https://www.w3schools.com/jsref/jsref_map.asp）：

  

（1）map（）方法创建一个新数组，并为每个数组元素调用一个函数。

     

（2）map（）方法为数组中的每个元素依次调用提供的函数。

现在，让我们分析一下两次尝试中的操作：

尝试1：

quote（1）：在这种尝试中，您没有使用map调用返回执行任何操作，因此我们可以跳过它。

quote（2）：对于数组中的每个元素，map函数将调用您作为参数传递的函数：

function(e) {
    display2.innerHTML += "Name: " + e.name + " Age: " + e.age + "<br />";
}

因此，对于data上的每个项目，这段代码都将附加到innerHTML的{​​{1}}属性中，即您所编写的字符串（display2）的末尾。预期输出：

"Name: " + ...

尝试2

quote（2）：对于数组中的每个元素，Name: John Age: 38 Name: Mary Age: 33 函数将调用您作为参数传递的函数：

map

因此，function getNameAge(e) { var nameAge = "Name: " + e.name + " Age: " + e.age + "<br />"; return nameAge; } 执行结束时，它将返回一个数组，其中包含对map函数的每次调用返回的值。在您的示例getNameAge中。

quote（1）：在此尝试中，您正在使用["Name: John Age: 38", "Name: Mary Age: 33"]函数返回值，因为您将其分配给map的{​​{1}}属性。由于innerHTML是字符串属性，而display2返回innerHTML，因此需要将其转换为字符串（隐式调用它的map方法）。数组的Array方法将打印用逗号分隔的数组值（请参见https://www.w3schools.com/jsref/jsref_tostring_array.asp），生成意外的输出：

toString

Answer 3

在ATTEMPT 2中，js隐式将数组转换为字符串（并使用逗号作为默认分隔符）。因此，您可以在添加innerHTML之前通过添加join('')来显式将强制转换数组转换为字符串：

display2.innerHTML = data.map(getNameAge).join('');

const data = [ {"name":"John","age":38}, {"name":"Mary","age":33}];
const display2 = document.getElementById("display2");

function getNameAge(e) {
    var nameAge = "Name: " + e.name + " Age: " + e.age + "<br />";
    return nameAge;
}

display2.innerHTML = data.map(getNameAge).join('');

<div id="display2"></div>