变量在 for 循环内不可见

Question

我在 JavaScript 中有一个 for 循环，例如

var loopvariable = 0;  
let row = [[]];
for (var key in supplies.food) {
     row[loopvariable][0] = key;
     row[loopvariable][1] = supplies.food[key];
     loopvariable++;
}

为什么会出现以下错误

TypeError: row[loopvariable] 未定义

Answer 1

变量

row[loopvariable]

未初始化。您可以使用默认值并使用保护运算符 (logical OR ||) 获取数组。

row[loopvariable] = row[loopvariable] || [];

更短的方法可能是将新数组推送到row，而不使用附加变量loopvariable

let row = [];
for (var key in supplies.food) {
    row.push([key, supplies.food[key]]);
}

Answer 2

TL;DR

Object.entries 提供您尝试在那里创建的确切输出：

let row = Object.entries(supplies.food);

详细信息以及您的代码无法正常工作的原因

您只在row[0] 创建了一个数组，而不是在row[1]（row[2]，row[3]，...），但是您尝试在row[1] 上使用一个数组循环的第二次迭代。

最小的变化是将内部数组的创建留给循环体：

var loopvariable = 0;  
let row = [];                                      // ***
for (var key in supplies.food) {
     row[loopvariable] = [];                       // ***
     row[loopvariable][0] = key;
     row[loopvariable][1] = supplies.food[key];
     loopvariable++;
}

但我们也可以使用数组初始化器来更简洁：

var loopvariable = 0;  
let row = [];
for (var key in supplies.food) {
     row[loopvariable++] = [
         key,
         supplies.food[key]
     ];
}

但是，同样，对于这种特定情况，您可以使用Object.entries：

let row = Object.entries(supplies.food);

现场示例：

const supplies = {
  food: {
    water: "3l",
    bread: "2 loaves",
    chocolate: "4 bars"
  }
};
let row = Object.entries(supplies.food);
console.log(row);

Object.entries 在所有现代环境中都受支持，并且可以在旧环境中轻松填充。

您在评论中说supplies.food 是一个数组。如果是这样，for-in 不是循环遍历它的正确方法（有关详细信息，请参阅 this answer），但 Object.entries 仍然有效，因为数组也是对象（有关更多信息，请参阅 my blog post）：

const supplies = {
  food: [
    "3l water",
    "2 loaves bread",
    "4 bars chocolate"
  ]
};
let row = Object.entries(supplies.food);
console.log(row);