Приступая к работе с JavaScript, получил вопросы
Я следую учебному пособию для начинающих по w3school для JS. Есть кое-что, чего я не понимаю из кода ниже:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var cars = ["Saab","Volvo","BMW"];
var text = "";
for(var i = 0; i < cars.length; i++) {
text+=cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Может кто-нибудь объяснить мне логику text+=cars[i]
? Я это понимаю +=
означает приращение, но я не могу понять логику добавления элемента массива в переменный текст.
Большое спасибо за ваши быстрые ответы! У меня есть дополнительный вопрос: есть ли альтернатива для отображения информации того же типа с использованием
var text = "";
а также
text+=cars[i]
кусочки кода? Если так, то как будет выглядеть фрагмент кода и что я должен вставить в HTML, если нет
text
?
Еще раз спасибо!
8 ответов
a+=b
коротка для a=a+b
, В вашем случае у вас есть text = text + cars[i] + "<br>"
,
text
это строка, и вы используете +
добавить значение из массива (который содержит строки), а затем добавить "<br>"
+= не является приращением. Это добавление (в данном случае конкатенации) и сохранение результата в той же переменной.
var a +=b;
Это то же самое для:
var = a + b;
В вашем случае скрипт объединяет все элементы массива в одну строку и добавляет <br>
теги между ними.
Считай это так,
text+=cars[i] + "<br>";
на самом деле
text=text+cars[i]+"<br>";
так что вместо удаления старого значения оно объединит новое слово с существующей строкой (String Concatenation).
PS: Как начинающий товарищ, небольшой совет, вместо того, чтобы следовать школам W3, пожалуйста, заходите на сайт, как codecademy, который поможет вам учиться вместе с практикой и правильными объяснениями.
text += cars[i] + '<br>';
Объединяет элемент i массива cars с текстом, разделенный <br>
тег.
В JavaScript +
используется для объединения строк
Код
for(var i = 0; i < cars.length; i++) {
text+=cars[i] + "<br>";
}
выбирает каждый элемент из массива и объединяет
"к этому.
Если вы консольно записываете текст перед установкой innerHTML, он выглядит примерно так:
"Saab<br>Volvo<br>BMW<br>"
Здесь они делают это на самом деле просто для того, чтобы показать, что нет смысла делать это таким образом, они просто хотят показать, чтобы достичь каждого индивида внутри массива и объединить его в строку, то же самое, что вы можете сделать с помощью метода Array.prototype.join(). подумайте здесь, что вы должны использовать, поскольку они всегда показывают конкатанаты в строку, если вы хотите, вы можете просто использовать каждого отдельного человека внутри, как вы хотите, а также
Значение text
в конце цикла будет
Saab<br>Volvo<br>BMW<br>
где br обозначает разрыв строки. Так что каждый из них будет напечатан на новой строке. И последняя строка кода
document.getElementById("demo").innerHTML = text;
изменяет значение HTML-элемента, который имеет идентификатор demo
к тому из text
,
Не думай о +=
как увеличение, это ++
,
a = a + b
a += b;
Эти два утверждения одинаковы. Нижний принимает переменную на левой стороне (a
) и добавляет к нему правую сторону (b
), а затем назначает все обратно на левую сторону (a
). Так что это просто стенография.
Так что вы делаете в своем коде добавление строки из cars[i]
на ваш переменный текст.
Это сделало бы то же самое:
text = text + cars[i] + "<br>";
Как только цикл запустится, у вас будет следующее в text
:
Saab<br>Volvo<br>BMW