почему первый дает мне "," а второй без ","?

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;

так в чем проблема в 1-м. Я думаю, что не было никакого ",". потому что мы говорим, что функции map и foreach принимают значения только из массивов

Answer 1

Вы могли бы сделать это так просто, как этот

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

map() возвращает массив , а не строку. Так что в первом примере это не работает, потому что вам не следует присваивать массив свойству 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>"

Вы также можете заставить работать первую версию с 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 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

Первая карта. Map позволяет изменять элементы массива и возвращает массив.

Второй - forEach, а forEach не возвращает.

Вы видите эти запятые, потому что печатаете массив.

Answer 5

Ваш первый пример даст массив . Когда вы присваиваете массив 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 6

Функция map() возвращает новый массив, поэтому, чтобы избежать запятых, вам нужно будет join() элементы нового массива, например:

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

Подробнее читайте в документация для map().