为何我的购物列表数组生成的HTML列表前出现“undefined”？

你好呀！这个开头的undefined问题根源很清晰——你没有初始化stuff变量，导致第一次字符串拼接时带上了变量的默认初始值undefined。

具体原因 #

在JavaScript里，声明变量但不赋值时，它的默认值就是undefined。你的代码第一次执行循环时：

var stuff = stuff + "<li>" + array[i] + "</li>";

其实等价于：

var stuff = undefined + "<li>milk</li>";

拼接后的结果就变成了"undefined<li>milk</li>"，后续循环会继续添加其他列表项，但开头的undefined已经被包含在字符串里，最终渲染到页面上就出现了这个多余内容。

修正后的代码 #

只需要给stuff初始化一个空字符串，再用累加方式拼接内容即可：

function letsShop(){ 
  var array = ["milk", "cheese", "eggs"];
  // 先将stuff初始化为空字符串
  var stuff = "";
  for (var i = 0; i < array.length; i++){
    // 使用 += 进行累加拼接
    stuff += "<li>" + array[i] + "</li>";
  }
  document.getElementById("list").innerHTML = stuff;
} 
window.addEventListener("load", letsShop);

额外优化建议 #

你原代码每次循环都修改一次DOM的innerHTML，频繁操作DOM会影响页面性能。上面的修正已经把DOM操作移到了循环外面，只在所有内容拼接完成后一次性赋值，这是更高效的做法。

内容的提问来源于stack exchange，提问作者Nat_