javascript - 二维数组未捕获类型错误 : Cannot set property '0' of undefined

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++;
}

代码真的很简单，我不明白为什么会返回这个错误:

Uncaught TypeError: Cannot set property '0' of undefined

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++;
}