javascript - For...of 循环返回意外的未定义

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 最初是未定义。

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(''));