Javascript“多维数组”（即数组的数组）的奇怪问题答案

【问题标题】：Strange problems with Javascript "multi-dimensional arrays" ( ie. arrays of arrays )Javascript“多维数组”（即数组的数组）的奇怪问题
【发布时间】：2023-03-09 22:05:02
【问题描述】：

我一直在用 Javascript 开发一个项目，在某个开发阶段之后，代码停止工作。我已将问题缩小到在 Javascript 中创建和索引“多维”数组。我包含的代码只是为了测试创建数组数组，为数组分配颜色值，然后测试这些值是否可以通过循环遍历“多维数组”的循环显示在屏幕上。

我已经尝试了几乎所有在 Javascript 中创建数组数组的方法——即使在这里也有一些来自答案的代码 sn-ps——但没有任何效果。

function setRGB(image, width1, x1, y1, r, g, b, a) {
  var t1 = y1 * width1 * 4 + x1 * 4;
  image.data[t1] = r;
  image.data[t1 + 1] = g;
  image.data[t1 + 2] = b;
  image.data[t1 + 3] = a;
}

function draw() {
  var pixels = [];
  for (var i = 0; i < height; ++i) {
    var row = [];
    for (var j = 0; j < width; ++j) {
      row[j] = 0;
    }
    pixels[i] = row;
  }

  var k = 12;
  var j = 29;
  console.log(pixels[12][29].toString());

  var canvas = document.getElementById('test');
  var width = 500;
  var height = 500;
  canvas.width = width;
  canvas.height = height;
  var ctx = canvas.getContext('2d');
  var canvasImage = ctx.getImageData(0, 0, width, height);
  var testImage = ctx.createImageData(width, height);

  for (var y = 0; y < height; ++y) {
    for (var x = 0; x < width; ++x) {
      pixels[y][x] = Math.round(Math.random() * 255);
    }
  }

  for (y = 0; y < height; ++y) {
    for (x = 0; x < width; ++x) {
      console.log(pixels[y][x].toString());
    }
  }

  for (var y = 0; y < height; ++y) {
    for (var x = 0; x < width; ++x) {
      setRGB(testImage, width, pixels[y][x], pixels[y][x], pixels[y][x], 255);
      ctx.putImageData(testImage, 0, 0);
      canvasImage = testImage;
      ctx.putImageData(canvasImage, 0, 0);
    }
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Array test</title>
</head>

<body onload="draw();">
  <canvas id="test">Sorry, but your browser doesn't support the 'canvas' element.</canvas>
</body>

</html>

在 Google Chrome 中，屏幕上不显示任何内容，并且 Web 控制台显示错误：

array-plot-test-1.html:26 Uncaught TypeError: Cannot read property '29' of undefined
    at draw (array-plot-test-1.html:26)
    at onload (array-plot-test-1.html:60)

即使数组数组在其创建循环中被索引。

第一次在其创建循环之外对数组进行索引时包含测试代码：

var k = 12;
var j = 29; 
console.log(pixels[12][29].toString());

在 Mozilla Firefox 中，我收到错误消息：

TypeError: pixels[12] is undefined[Learn More] array-plot-test-1.html:26:3
    draw file:///[censored]/[censored]/[censored]/array-plot-test-1.html:26
    onload file:///[censored]/[censored]/[censored]/array-plot-test-1.html:1

我至少使用 Stack Overflow 等网站提供的“解决方案”重写了十几次不同的数组测试代码，但到目前为止没有任何效果。我预计我犯了一些基本错误。

奇怪的是，如果我像这样在 Javascript 中创建一个“多维数组”

array1 = [];
for (var i=0; i < max; ++i) {
  var temp = [1, 2, 3];
  array[i] = temp;
}

使用预定义的数组，然后 Javascript“多维数组”可以正常工作，但我需要任意大小的数组数组，这就是为什么我不能使用上面的代码 sn-p。

【问题讨论】：

可能是您的数组中没有29 项吗？
我的数组的大小无关紧要：当我创建 any 数组数组时，使用任意大小的行和列，然后索引数组，即. a[1][2]，产生错误。换句话说，错误似乎并不取决于数组大小。是的，我的数组有 500 行和 500 列，所以我不知道是什么导致了错误。
但是您在变量width 和height 初始化之前使用它们。请使用let 而不是var，以后会避免这些问题。
向数组添加数组行时使用push() 方法
我尝试将数组创建代码替换为：var pixels = new Array(height); for (i=0; i < height; ++i) { var a1 = new Array(width); pixels[i] = a1; }

标签： javascript arrays multidimensional-array typeerror undefined-index

【解决方案1】：

您在使用width 和height 之后定义了它们。您需要在使用它们之前定义它们。

您也没有将 x 和 y 传递给 setRGB

我建议你在浏览器中learn how to use the debugger。

不知道你为什么会有这个

ctx.putImageData(testImage, 0, 0);
canvasImage = testImage;
ctx.putImageData(canvasImage, 0, 0)

在你的循环中。你画了两次同样的东西，再加上你画的都是 500x500 次。在您的 draw 函数退出之前，您不会看到结果，因此没有理由在循环内这样做。只是在循环之后移动它。

还有，放

“use strict”;

在您的 JavaScript 顶部，切勿使用 var，使用 const 和 let，因为它们会帮助您找到这类问题。

function setRGB(image, width1, x1, y1, r, g, b, a) {
  var t1 = y1 * width1 * 4 + x1 * 4;
  image.data[t1] = r;
  image.data[t1 + 1] = g;
  image.data[t1 + 2] = b;
  image.data[t1 + 3] = a;
}

function draw() {
  var width = 500;
  var height = 500;
  var pixels = [];
  for (var i = 0; i < height; ++i) {
    var row = [];
    for (var j = 0; j < width; ++j) {
      row[j] = 0;
    }
    pixels[i] = row;
  }

  var k = 12;
  var j = 29;
  console.log(pixels[12][29].toString());

  var canvas = document.getElementById('test');
  canvas.width = width;
  canvas.height = height;
  var ctx = canvas.getContext('2d');
  var testImage = ctx.createImageData(width, height);
  for (var y = 0; y < height; ++y) {
    for (var x = 0; x < width; ++x) {
      pixels[y][x] = Math.round(Math.random() * 255);
    }
  }

  for (var y = 0; y < height; ++y) {
    for (var x = 0; x < width; ++x) {
      setRGB(testImage, width, x, y, pixels[y][x], pixels[y][x], pixels[y][x], 255);
    }
  }
  ctx.putImageData(testImage, 0, 0);
}

draw();

&lt;canvas id="test"&gt;&lt;/canvas&gt;

【讨论】：

啊哈！ :D 另一个愚蠢的错字没有将 x 和 y 传递给 setRGB() :) 。我已经编程了很长时间，当然我知道变量需要初始化（大多数时候），但是，由于某种原因，我忽略了这个错误：/。至于ctx.putImageData(testImage, 0, 0); canvasImage = testImage; ctx.putImageData(canvasImage, 0, 0)，它们就在那里，我不小心从我的另一个 Javascript 代码 sn-ps 中导入了它们，我从中复制并粘贴了上面的一些代码 :)
如果你使用const 而不是var 你会得到一个错误。此外，如果您在调试器中单步执行，您会立即看到它。
谢谢gman！ :DI 在我写上面的代码并犯了一些心不在焉的错误时很着急，没有思考 :) “另外，把 'use strict'; 放在你的 JavaScript 的顶部，永远不要使用 var，使用 const 和 let 因为它们将帮助您找到这些类型的问题”感谢您的建议 :) 我在 Perl 中使用了类似的编码实践，但由于某种原因我忘记了上面的代码 :)

【解决方案2】：

似乎问题是由一些愚蠢的错误引起的，包括不小心没有注意到尚未声明宽度和高度变量，以及我未能传递 setRGB() 的 x 和 y 值。

感谢所有帮助过的人:)

jdb2

【讨论】：