JavaScript：如何使 Var“数组”工作？

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

我也尝试过"Concentration" var，但没有成功。我该怎么做才能使文档不会多次附加同一个正方形？

Answer 1

您的声明语法无效。但是，我认为您想要达到的更大一点是能够使用动态创建的元素填充数组，并且您可以这样做：

var squares = [];  // Array must exist before you can populate it

var testColorArray = ["green", "yellow", "blue", "orange", "silver"];
var getTestColor = null;

function makeSquares(count){

  for(var i = 0; i < count; i++){
    // Just create the element and configure it. No need to worry about the array yet
    var element = document.createElement("div");
    element.style.float = "left";
    element.style.width = "75px";
    element.style.height = "75px";
    element.id = "square" + (i + 1);
    element.style.backgroundColor = testColorArray[Math.floor(Math.random()* testColorArray.length)];
    element.textContent = element.id;
    squareCont.appendChild(element);
    
    // Now, add the element to the arrray
    squares.push(element);
  }
  
  // Test:
  console.log(squares);
}

makeSquares(10);

<div id="squareCont"></div>

Answer 2

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 中。在带有这个 sn-p 的控制台中，您将看到创建了 100 个正方形并将其添加到 Square 对象中。它们可以通过 Square.SquareX（其中 X 是某个数字）或 Square['SquareX'] 或 Square['Square'+X] 访问，其中 X 是某个数字。