二維數組未捕獲TypeError：無法設置未定義的屬性“ 0”

Question

我需要為頁面中的某個圓圈設置動畫，以實現此目的，我正在嘗試將該圓圈存儲在矩陣中。

var elementWidth = parseInt($('#svg').width()); //Take container element's width
var circleRadius = parseInt(elementWidth/10); //Calculate radius and the distance from a circle to another
var circleMatrix = [[]]; //The 2d matrix
var s = Snap("#svg"); //Initialize Snap (it's a svg framework)
var x,y=0; //My index

for(var i=0; i<=elementWidth; i+=circleRadius){
  x=0;
  for(var m=0; m<=elementWidth; m+=circleRadius){
    console.log("y("+y+"): "+i+" x("+x+"): "+m);
    circleMatrix[y][x] = s.circle(m,i,50);
    x++;
  }
  y++;
}

該代碼非常簡單，ai無法理解為什么返回此錯誤：

未捕獲的TypeError：無法設置未定義的屬性“ 0”

Answer 1

JavaScript實際上並沒有二維數組。 它有數組數組。

這行：

var circleMatrix = [[]]; //The 2d matrix

創建一個只有一個條目的數組：空數組。 因此，例如circleMatrix[1]是undefined 。

您必須在需要外部數組的所有位置添加數組。 一種方法是添加：

if (!circleMatrix[y]) {
    circleMatrix[y] = [];
}

在此行之前：

circleMatrix[y][x] = s.circle(m,i,50);

例如：

var elementWidth = parseInt($('#svg').width()); //Take container element's width
var circleRadius = parseInt(elementWidth/10); //Calculate radius and the distance from a circle to another
var circleMatrix = [];                      // *** Changed
var s = Snap("#svg"); //Initialize Snap (it's a svg framework)
var x,y=0; //My index

for(var i=0; i<=elementWidth; i+=circleRadius){
  x=0;
  for(var m=0; m<=elementWidth; m+=circleRadius){
    console.log("y("+y+"): "+i+" x("+x+"): "+m);
    if (!circleMatrix[y]) {                 // *** Added
        circleMatrix[y] = [];               // *** Added
    }                                       // *** Added
    circleMatrix[y][x] = s.circle(m,i,50);
    x++;
  }
  y++;
}

Answer 2

要在JavaScript中創建2D矩陣，您必須執行以下操作：

var circleMatrix = [[],[],[]];

您必須提前知道什么維度，或者計划在迭代外循環時創建每個“行”。