二维数组未捕获类型错误:无法设置未定义的属性“0”

Bidimensional Array Uncaught TypeError: Cannot set property '0' of undefined

本文关键字：未定义 设置 属性 类型 错误 二维数组      更新时间：2023-09-26

我需要在我的页面中对一些圆进行动画处理，为了做到这一点，我正在尝试将该圆存储在矩阵中。

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

代码非常简单，我不明白为什么它会返回此错误：

未捕获的类型错误： 无法设置未定义的属性"0"

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

要在 JavaScript 中创建 2D 矩阵，您必须执行以下操作：

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

您必须提前知道一个维度是什么，或者计划在迭代外部循环时创建每个"行"。

相关文章：