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

Question

有没有办法使用某种方式来命名 var "Array?" 我的代码是这样的：

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 中。在包含此代码片段的控制台中，您将看到已创建 100 个正方形并将其添加到 Square 对象。它们可以通过 Square.SquareX（其中 X 是某个数字）或 Square['SquareX'] 或 Square['Square'+X] 访问，其中 X 再次是某个数字。

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

JavaScript: How Can I Make A Var "Array" Work?

javascript

arrays

var