Javascript“多维数组”（即数组的数组）的奇怪问题-解网

问：

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

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

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“多维数组”可以正常工作，但我需要任意大小的数组数组，这就是我不能使用上述代码片段的原因。

JavaScript 多维数组类型错误未定义索引

我的数组的大小是多少并不重要：当我创建任何数组数组时，对行和列使用任何大小，然后索引数组即。a[1][2]，生成错误。换句话说，错误似乎不取决于数组大小。是的，我的数组有 500 行和 500 列，所以我不知道是什么导致了错误。

1赞 Titulum 6/26/2019

但是您正在使用变量，并且在初始化它们之前。请改用，这些问题将在将来避免。widthheightletvar

0赞 Kate Orlova 6/26/2019

将数组行添加到数组时使用 methodpush()

0赞 jdb2 6/26/2019

我尝试通过将数组创建代码替换为：

var pixels = new Array(height);       for (i=0; i < height; ++i) {         var a1 = new Array(width);         pixels[i] = a1;       }

答：

1赞 gman 6/26/2019 #1

您定义了它们，并在使用它们之后。您需要在使用它们之前定义它们。widthheight

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

我建议您学习如何在浏览器中使用调试器。

不知道你为什么会有这个

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

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

另外，把

“use strict”;

在 JavaScript 的顶部，永远不要使用、使用和因为它们将帮助您找到此类问题。varconstlet

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();

<canvas id="test"></canvas>

啊哈！:D另一个愚蠢的错别字，没有将 x 和 y 传递给 setRGB（） :) 。我已经编程了很长时间，当然我知道变量需要初始化（大多数时候），但是，出于某种原因，我忽略了这个错误：/ 。至于，它们只是从我不小心从我的另一个 Javascript 代码片段导入的 cruft 中导入的，我从中复制并粘贴了上述一些代码:)ctx.putImageData(testImage, 0, 0); canvasImage = testImage; ctx.putImageData(canvasImage, 0, 0)

0赞 gman 6/26/2019

如果你用而不是你会得到一个错误。此外，如果你在调试器中单步执行，你会立即看到它。constvar

0赞 jdb2 6/28/2019

谢谢gman！:D当我编写上述代码时，我很匆忙，没有思考，并犯了一些心不在焉的错误:)“另外，把'严格使用';在你的 JavaScript 顶部，永远不要使用 var，使用 const 和 let，因为它们会帮助你找到这类问题“ 感谢您的建议:)我在 Perl 中使用了类似的编码实践，但由于某种原因，我忘记了上述代码:)

0赞 jdb2 6/26/2019 #2

似乎这些问题是由一些愚蠢的错误引起的，包括意外地没有注意到宽度和高度变量尚未声明，以及我未能将 setRGB（）的 x 和 y 值传递给它。

感谢所有帮助过:)的人

JDB2的

上一个：如何将json数据转换为php变量？

下一个：如何在PHP中使用json解码访问多维数组中的对象？

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

Strange problems with Javascript "multi-dimensional arrays" ( ie. arrays of arrays )

评论

评论