對於循環返回意外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，當你添加一個字符串「富」變量是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 = '';