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

代码非常简单，我无法理解为什么它会返回此错误：

未捕获的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);

E.g：

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 = [[],[],[]];

您必须提前知道某个维度是什么，或者计划创建每个＆＃34;行＆＃34;当你迭代外循环时。

Bidimensional Array Uncaught TypeError：无法设置未定义的属性“0”

2 个答案: