JavaScript:如何使 Var "Array"工作？

Question

有没有一种方法可以使用某种“数组”来命名变量？我的代码是这样的:

for(var i = 0; i < (getHorizontalSquares * getVerticalSquares); i++){
    var Square[i] = document.createElement("div");
    Square[i].style.position = "relative";
    Square[i].style.float = "left";
    Square[i].style.width = "50px";
    Square[i].style.height = "50px";
    Square[i].id = "square" + (i + 1);
    for(var ii = 0; ii < 6; ii++){
        var TestColor = TestColorArray[Math.round(Math.random()*(TestColorArray.length - 1))];
        getTestColor += TestColor;
    }
    Square[i].style.backgroundColor = "#" + getTestColor;
    SquareCont.appendChild(Square[i]);
}

我知道我的代码不起作用，但我想实现相同的想法，这样我就可以获得结果:

var Square1...
var Square2...
var Square3...
var Square4...
var Square5...
etc

我也尝试过执行“浓度”变量，但没有成功。我该如何执行此操作，以便文档不会多次附加同一个方 block ？

Answer 1

var Square = {};
var SquareCont = document.createElement('div');
var getHorizontalSquares = 10;
var getVerticalSquares = 10;
var TestColorArray = ['a','b','c','f','e','0','1','2','3','3','4','5'];
var getTestColor = '';
for(var i = 0; i < (getHorizontalSquares * getVerticalSquares); i++){
    Square['Square'+i] = document.createElement("div");
    Square['Square'+i].style.position = "relative";
    Square['Square'+i].style.float = "left";
    Square['Square'+i].style.width = "50px";
    Square['Square'+i].style.height = "50px";
    Square['Square'+i].id = "square" + (i + 1);
    for(var ii = 0; ii < 6; ii++){
        var TestColor = TestColorArray[Math.round(Math.random()*(TestColorArray.length - 1))];
        getTestColor += TestColor;
    }
    Square['Square'+i].style.backgroundColor = "#" + getTestColor;
    SquareCont.appendChild(Square['Square'+i]);
    getTestColor = '';
    
}
console.log(Square);

这个示例使用对象而不是数组来完成您想要的操作，但满足您动态创建可访问的 Square1、Square2 等的愿望...它们都包含在 Square 中。在包含此代码片段的控制台中，您将看到创建了 100 个正方形并将其添加到 Square 对象中。它们可以通过 Square.SquareX (其中 X 是某个数字)、Square['SquareX'] 或 Square['Square'+X] 访问，其中 X 又是某个数字。