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

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

第一个是地图。 Map 可以让你改变数组的元素并返回一个数组。

第二个是forEach，forEach不返回。

您看到这个逗号是因为正在打印一个数组。

Answer 3

您在第一个中有逗号，因为您将一个数组分配给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 4

你可以像这样简单地做到这一点

"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>

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

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

您的第二个示例生成一个字符串，然后将其分配给 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>