Простой цикл 'for' для создания divs

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

Поскольку вы используете + = на неопределенной переменной. Если вы в первой строке var tiles = "";, это должно сделать трюк.

Answer 2

Помните, что оператор += действительно означает, что

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

получает расширен до

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

Проблема заключается в том, что на первой итерации цикла, tiles является undefined (потому что вы ничего не назначены к нему), так что вы соедините undefined со строкой. Это то, что вызывает поведение, которое вы видите.

Инициализировать 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>