Question

"use strict";
var demo = document.getElementById("demo");
var x = [1 , 2, 3, 4];

var final = x.map(function (value) {
    return value + "<br>" ;
});
demo.innerHTML = final;



var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(function (value) {
  txt = txt + value + "<br>"; 
});
document.getElementById("demo2").innerHTML = txt;

那么第一个问题是什么。我认为没有任何“，”。因为我们说map和foreach函数仅从数组中获取值

Answer 1

map()函数返回一个新数组，因此，为了避免逗号，您将必须join()这样新数组的元素，如下所示：

demo.innerHTML = final.join('');

您可以在documentation for map()中阅读更多内容。

Answer 2

您的第一个示例将产生一个array。将数组分配给innerHTML时，它将转换为字符串，此时将调用Array#toString。 toString上的Array方法将打印内容，并以逗号分隔。

第二个示例生成一个字符串，然后将其分配给innerHTML，并且不插入逗号。

如果您想使用Array#map，则可以使用以下内容：

var el = document.getElementById('demo');
var arr = [1, 2, 3, 4];
var final = arr.map((x) => `${x}<br/>`).join(''); // Note the join!
el.innerHTML = final;

* {
  font-size: 0;
  padding: 0;
  border: 0;
  margin: 0;
  font-family: sans-serif;
}
body {
  perspective:800px;
  padding: 20px;
}
#demo {
  text-align: center;
  padding: 20px 0;
  width: 100px;
  font-size: 18pt;
  line-height: 1.8;
  color: white;
  display: inline-block; 
  background: hotpink;
  margin-left: calc(50% - 50px);
  animation: go 5s ease-in-out infinite 0s;
}
@keyframes go {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateX(25deg) rotateY(25deg);
  }
  50% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  75% {
    transform: rotateX(-25deg) rotateY(-25deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg);
  }
}

<div id="demo"></div>

Answer 3

第一个是地图。 Map使您可以更改数组的元素并返回一个数组。

第二个是forEach并且forEach不返回。

您正在使用逗号，因为正在打印数组。

Answer 4

第一个逗号是逗号，因为您为innerHTML分配了一个数组，该数组将使其成为字符串（包括逗号）

看一个简单的例子：

var html = String([1,2,3]);
console.log(html);  // IT WILL CONTAIN COMMAS

在第二种情况下，您可以根据需要创建一个显式字符串（不带逗号）

"use script";
var demo = document.getElementById("demo");
var x = [1 , 2, 3, 4];

var final = x.map(function (value) {
    return value + "<br>" ;
});

console.log(JSON.stringify(final)); // <----  HERE is an array
demo.innerHTML = final;

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(function (value) {
  txt = txt + value + "<br>";   // << ---------- HERE is a string
});
document.getElementById("demo2").innerHTML = txt;

  <div id="demo"></div>
  <hr>
  <div id="demo2"> </div>

如果要使用相同的名称，可以使用join从数组中创建一个字符串（不带逗号），如下所示：

"use script";
var demo = document.getElementById("demo");
var x = [1 , 2, 3, 4];

var final = x.map(function (value) {
    return value + "<br>" ;
});
demo.innerHTML = final.join('');

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(function (value) {
  txt = txt + value + "<br>"; 
});
document.getElementById("demo2").innerHTML = txt;

  <div id="demo"></div>
  <hr>
  <div id="demo2"> </div>

Answer 5

map() returns an array，而不是字符串。因此，在您的第一个示例中，它不起作用，因为您不应该将数组分配给元素的innerHTML属性。

为了解决错误并将数组转换为字符串，将为您调用toString()。这会导致您看到逗号。

var x = [1 , 2, 3, 4];

var final = x.map(function (value) {
    return value + "<br>" ;
});

console.log(final) //-> ["1<br>", "2<br>", "3<br>", "4<br>"]
console.log(final.toString()) //-> "1<br>,2<br>,3<br>,4<br>"

在第二个示例中，您将继续添加到字符串中，因此它会导致一个可以毫无问题地设置为innerHTML的字符串。

var txt = "";

var numbers = [45, 4, 9, 16, 25];

numbers.forEach(function (value) {
  txt = txt + value + "<br>"; 
});

console.log(txt) //-> "45<br>4<br>9<br>16<br>25<br>"

您还可以使第一个版本工作with a join()，以将所有项目都放入一个字符串中。

var x = [1 , 2, 3, 4];

var final = x.map(function (value) {
    return value + "<br>" ;
});

console.log(final.join('')) //-> "1<br>2<br>3<br>4<br>"

最后，您可以仅在原始数组上使用join('<br>')以非常简单的方式完成您想要的操作：

var x = [1 , 2, 3, 4];
var final = x.join('<br>')
console.log(final) //-> "1<br>2<br>3<br>4"

Answer 6

您可以像这样简单地完成

"use strict";
var demo1 = document.getElementById("demo1"),
  demo2 = document.getElementById("demo2"),
  x = [1, 2, 3, 4],
  numbers = [45, 4, 9, 16, 25];

demo1.innerHTML = x.join("<br>");
demo2.innerHTML = numbers.join("<br>");

<p id="demo1"></p>
<p id="demo2"></p>

为什么第一个给我“，”而第二个却没有“，”？

6 个答案: