Для ... цикла, возвращающего неожиданный undefined

Question

Я делаю простой для ... цикла. Я не понимаю, почему я получаю разные результаты, когда я console.log вывод цикла и когда я печатаю его на экране.

const list = document.getElementById('list'); 
const results = [1, 2, 5]; 
let listItems; 

for (let r of results) { 
    listItems = listItems + `<li>${r}</li>`; 
    console.log(r); 
} 

list.innerHTML = listItems; 

//// console.log returns 1, 2, 5 

//// in the DOM, i get undefined, 1, 2, 5 

Вы можете попробовать его у меня в codepen.

Благодарим за помощь.

Answer 1

Это потому, что listItems изначально undefined.

let listItems; 
 
console.log(listItems); // undefined

Инициализировать его в пустую строку, или использовать массив присоединения:

let listItems = ''; 
 
for (let r of [1, 2, 5]) 
 
    listItems += `<li>${r}</li>`; 
 
console.log(listItems); 
 

 
listItems = []; 
 
for (let r of [1, 2, 5]) 
 
    listItems.push(`<li>${r}</li>`); 
 
console.log(listItems.join(''));

Answer 2

Потому что в первой итерации цикла, listItems является undefined , Дайте ему пустую строку:

let listItems = ''; 

Updated CodePen

Answer 3

Это потому, что listItems является undefined, и, когда вы добавляете строку «Foo» в переменную, которая undefined результат «undefinedfoo`.

Правильная версия ниже:

const list = document.getElementById('list'); 
const results = [1, 2, 5]; 
let listItems = ''; 

for (let r of results) { 
    listItems = listItems + `<li>${r}</li>`; 
    console.log(r); 
} 

list.innerHTML = listItems; 

Answer 4

Поскольку letItems не определено в первый раз. Он имеет значение только во второй раз, после того как вы установите его в цикле.

ли это:

let listItems = '';