如何在for循环单次迭代后清空变量以解决前端列表生成的旧数据残留问题

我通过代码从服务器获取JSON文档并在前端展示数据，JSON文档地址为https://pastebin.com/56YEnY4Z。我的代码用于生成HTML列表，代码片段如下：

for (var i = 0; i < data.array.length; i++) { 
  if(data.array[i].orderStatus == 0) { 
    statusName = 'Neu erstellt'; 
    statusColor = 'text-sky-500'; 
  } else if(data.array[i].orderStatus == 1) { 
    statusName = 'In bearbeitung'; 
    statusColor = 'text-orange-500'; 
  } 
  for(var k = 0; k < data.array[i].foodArray.length; k++) { 
    li += `<li class="flex items-center justify-between"><span>` + data.array[i].foodArray[k].name + `</span><span>` + data.array[i].foodArray[k].price + ` EUR</span></li>`; 
  } 
  list = `<ul class="list-disc">` + li + `</ul>`; 

目前遇到的问题是：第一次循环执行时一切正常，但后续生成的列表中会混入旧数据。请问是否有方法可以在单次for循环执行后清空li变量？我已声明相关变量，上述仅为原代码的片段。

嗨，这个问题太常见啦！你之所以会遇到旧数据混入的情况，是因为li变量是在循环外面声明的，每次迭代都会往里面追加新内容，而不是从头开始构建。

解决方法超简单：把li的初始化移到外层循环的内部，让它每次处理新订单时都重置为空字符串。修改后的代码是这样的：

for (var i = 0; i < data.array.length; i++) { 
  // 重点：每次循环开始时把li重置为空
  let li = '';
  if(data.array[i].orderStatus == 0) { 
    statusName = 'Neu erstellt'; 
    statusColor = 'text-sky-500'; 
  } else if(data.array[i].orderStatus == 1) { 
    statusName = 'In bearbeitung'; 
    statusColor = 'text-orange-500'; 
  } 
  for(var k = 0; k < data.array[i].foodArray.length; k++) { 
    li += `<li class="flex items-center justify-between"><span>` + data.array[i].foodArray[k].name + `</span><span>` + data.array[i].foodArray[k].price + ` EUR</span></li>`; 
  } 
  list = `<ul class="list-disc">` + li + `</ul>`; 
  // 别忘了把生成的list插入到DOM里，不然最后只会留下最后一次循环的结果哦
}

顺便给你两个小提醒：

• 尽量用let/const替代var，它们的块级作用域能帮你避免很多类似的变量污染问题；
• 每次生成list之后，要及时把它添加到页面的DOM元素中，不然前面的list会被后面的覆盖，最后只能看到最后一个订单的内容。

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