對於……循環返回意外的未定義

Question

我正在做一個簡單的for ... of循環。 我不明白為什么在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 = '';

更新的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 = '';