Javascript 二维数组

Question

谁能告诉我为什么这不起作用？据我所知购买文档和我能找到的任何示例，它应该，但我不断收到以下错误

var colorArray = [];
    colorArray[0] = [];
    colorArray[0][0] = '2F76EE';
    colorArray[0][1] = '2F76EE';
    colorArray[0][2] = '5fff74';
    colorArray[0][3] = '5e6cff';
    colorArray[0][4] = 'a6ff1d';
    colorArray[1][0] = '2F76EE'; //error is happening here
    colorArray[1][1] = '2F76EE';
    colorArray[1][2] = '5fff74';
    colorArray[1][3] = '5e6cff';
    colorArray[1][4] = 'a6ff1d';

运行时报错

Uncaught TypeError: Cannot set property '0' of undefined

谢谢!

Answer 1

当你说 colorArray[1][0] 时，JavaScript 访问 colorArray[1] 并且因为它还没有定义，它的计算结果为 undefined。因此，您正在尝试执行 undefined[0]。这就是它失败的原因。

要解决这个问题，

1. 你必须像这样初始化元素 1

   colorArray[1] = [];
   

   在对该元素进行任何更改之前

   colorArray[1][0] = '2F76EE';
   colorArray[1][1] = '2F76EE';
   ...
   

2. 既然你在做静态初始化，你甚至可以做

   var colorArray = [];
   colorArray.push([ '2F76EE', '2F76EE', '5fff74', '5e6cff', 'a6ff1d' ]);
   colorArray.push([ '2F76EE', '2F76EE', '5fff74', '5e6cff', 'a6ff1d' ]);
   

3. 否则，你可以像这样直接初始化

   var colorArray = [[ '2F76EE', '2F76EE', '5fff74', '5e6cff', 'a6ff1d' ],
                     [ '2F76EE', '2F76EE', '5fff74', '5e6cff', 'a6ff1d' ]];
   

4. 你也可以这样做

   var element1 = [ '2F76EE', '2F76EE', '5fff74', '5e6cff', 'a6ff1d' ];
   var element2 = [ '2F76EE', '2F76EE', '5fff74', '5e6cff', 'a6ff1d' ];
   var colorArray = [];
   colorArray.push(element1, element2);
   

   注意:你可能想知道，为什么我不能简单地做

   colorArray.push(element1, element1);
   

   因为两个数组是一样的。当然，它会起作用。但它有一个问题。 如果您改变其中一个数组，它也会影响其他数组。例如，

   var element1 = [ '2F76EE', '2F76EE', '5fff74', '5e6cff', 'a6ff1d' ];
   var colorArray = [];
   colorArray.push(element1, element1);
   colorArray[0].push("abcdef");
   console.log(colorArray);
   // [ [ '2F76EE', '2F76EE', '5fff74', '5e6cff', 'a6ff1d', 'abcdef' ],
   //   [ '2F76EE', '2F76EE', '5fff74', '5e6cff', 'a6ff1d', 'abcdef' ] ]
   

   您可能没有预料到这一点。但是在 JavaScript 中，所有的变量名都只是对对象的引用。因此，当您执行 colorArray.push(element1, element1); 时，您将添加相同的引用两次。所以，这两个元素都指向同一个对象。因此，改变一个会影响另一个。