为什么在innerHTML中使用Array#map输出中的多余逗号? [英] Why the extra comma in Array#map output used in innerHTML?

问题描述

以前的文章中提到了 toString()方法如何在映射的每个项目之间放置逗号，并且可以使用 join(")

Previous posts have mentioned how the toString() method that will place commas between every item mapped through, and that this could be remedied by using join(" ").

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

Below, Attempt 2 adds a comma between the displayed objects whereas Attempt 1 doesn't. Why is this?

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

And how can Attempt 2 be revised so that its output replicates Attempt 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(在元素之间添加逗号-为什么?):

Attempt 2 (adds a comma between elements – why?):

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

推荐答案

首先，看看 map 函数定义(

First, have a look at map function definition (https://www.w3schools.com/jsref/jsref_map.asp):

(1)map()方法创建一个新数组，并为每个数组元素调用一个函数.

(1) The map() method creates a new array with the results of calling a function for every array element.

(2)map()方法为数组中的每个元素依次调用提供的函数.

(2) The map() method calls the provided function once for each element in an array, in order.

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

尝试1:

quote(1):在这种尝试中，您没有对 map 调用返回执行任何操作，因此我们可以跳过它.

Now, let's analyze what you are doing in both attempts:

Attempt 1:

quote (1): In this attempt you are not doing anything with the map call return so we can skip it.

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

quote (2): For each element in the array the map function will call the function you passed as argument:

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

因此，对于 data 上的每个项目，这段代码都将附加到您编写的字符串( display2 的 innerHTML 属性的"名称:" + ... )，最后保留预期的输出:

So for each item on data this piece of code will append to the innerHTML property of display2 the string you wrote ("Name: " + ...), leaving at the end the expected output:

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

尝试2

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

Attempt 2

quote (2): For each element in the array the map function will call the function you passed as argument:

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

因此，当 map 执行完毕时，它将返回一个数组，其中包含对 getNameAge 函数的每次调用返回的值.在您的示例中， ["Name:John Age:38"，"Name:Mary Age:33"] .

So when map's execution finish it will return an array containing the values returned in each call to the getNameAge function. In your example ["Name: John Age: 38", "Name: Mary Age: 33"].

quote(1):在这种尝试中，您使用的是 map 函数return，因为您正在将其分配给 display2 innerHTML 属性>.由于 innerHTML 是一个字符串属性，并且 map 返回一个 Array ，因此需要将其转换为字符串(隐式地将其称为 toString 方法).数组的 toString 方法将打印以逗号分隔的数组值(请参见

quote (1): In this attempt you are using the map function return because you're assigning it to the innerHTML property of display2. As innerHTML is a string property and map returns an Array, it needs to be converted to an string (implicitly calling it's toString method). The toString method of an array will print the array values separated by a comma (See https://www.w3schools.com/jsref/jsref_tostring_array.asp) generating the unexpected output:

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

这篇关于为什么在innerHTML中使用Array#map输出中的多余逗号?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！