使用 For 循环设置变量（Javascript）答案

【问题标题】：Set Variable With For Loop (Javascript)使用 For 循环设置变量（Javascript）
【发布时间】：2018-10-26 15:10:30
【问题描述】：

我是 JS 新手，想通过 For 循环自动设置新变量，例如：

var mybox0

var mybox1

等等……

var board = document.getElementById('board');
var boxes = [];

for(var i=0; i<9; i++){
    var myBox = document.createElement('div');
    board.appendChild(myBox);
    myBox.id = "box" + i;
    boxes.push(myBox);
}

【问题讨论】：

您正在寻找数组。
有什么问题？您的代码将元素引用添加到数组。您不能创建具有计算名称的不同变量，但您可以创建这样的对象属性。
在循环结束时，您的 boxes 数组包含您在循环内声明的 divs 列表。您可以使用boxes[0] boxes[1] 等来访问它们...但是您在forloop 块中声明的所有变量仅在该块的范围内可用
看这个答案stackoverflow.com/a/5117172/3327441
我想为每个人添加一个 eventListener 而无需再次声明： var myBox0 = document.getElementById('box0');

标签： javascript loops variables

【解决方案1】：

欢迎使用 JavaScript！有另一个人加入总是很高兴。

简短的回答是这在 JavaScript 中是不可能的。你真的有两个选择。您已经实现了第一个：数组。这是一个不错的选择，也是我个人会选择的。

您的问题的 cmets 中提到的另一种方法是使用对象。代码看起来像这样：

var board = document.getElementById('board');
var boxes = {};

for(var i = 0; i < 9; i++) {
    var myBox = document.createElement('div');
    board.appendChild(myBox);
    myBox.id = "box" + i;
    boxes['mybox' + i] = myBox;
}

然后你可以像这样引用你的变量：

boxes.mybox0; 
boxes.mybox1;

而不是这个：

boxes[0];
boxes[1];

我对 for 循环内的代码的看法是数组代码比目标代码更具可读性。使用生成对象的代码对数组代码同样具有可读性。此外，该数组更加通用，因为您可以使用 .map 和 .forEach 等函数更轻松地对其进行迭代。

所以，我认为使用对象来做这件事并没有什么好处，也有一点损失。坚持使用数组。

【讨论】：