简单＆＃39; for＆＃39;循环创建div

Question

为什么我在顶部得到'未定义'？

http://jsfiddle.net/oybz69xy/1/

var tiles;
function populateTiles(limit) {
for (var i=0; i< limit; i++) {
    tiles += "<div class='tile'>Tile</div>";
}
}
populateTiles(4);

$('#container').html(tiles);

<div id="container">


</div>

Answer 1

请记住，+=运算符实际上意味着

tiles += "<div class='tile'>Tile</div>";

扩展到

tiles = tiles + "<div class='tile'>Tile</div>";

问题在于，在第一次循环迭代中，tiles为undefined（因为您没有为其分配任何内容），因此您需要重新连接undefined用一根绳子。这是导致您所看到的行为的原因。

首先将tiles初始化为""。

Answer 2

因为您在未定义的变量上使用+ =。如果你的第一行是var tiles = "";那应该可以解决问题。

Answer 3

因为变量切片的初始值未定义。当未定义的值加上字符串时，使用该值的字符串格式，即字符串“undefined”。因此，您需要将代码更改为此;

var tiles = "";

Answer 4

您可以使用数组，而不是在循环中使用串联，请参考下面的代码，这将在循环大小更多时提高性能

var tiles = [];
function populateTiles(limit) {
for (var i=0; i< limit; i++) {
    tiles.push("<div class='tile'>Tile</div>");
}
}
populateTiles(4);

$('#container').html(tiles.join(''));

<div id="container">


</div>