Question

我正在做一个简单的循环。我不明白为什么我在控制台时会得到不同的结果。记录循环的输出以及当我将其打印到屏幕时。

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。

＆＃13;

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

＆＃13;

将其初始化为空字符串，或使用数组连接：

＆＃13;

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

＆＃13;

Answer 2

因为在循环的第一次迭代中，listItems是undefined。给它一个空字符串：

let listItems = '';

Updated CodePen

Answer 3

这是因为listItems是undefined，当你向undefined变量添加字符串'foo'时，结果是'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 = '';

对于...返回意外未定义的循环

4 个答案: