Question

我正在尝试制作一个包含一堆画布元素的网页，每个画布元素都被绘制一张图片进行初始化，每一个都有一个“下一个”按钮，循环显示服务器端存储的一堆其他文件。为了使其工作，我需要下一个按钮，以了解当前在其相应的画布元素中显示的图像。据我所知，该信息不能存储在单个按钮元素中，也不能存储在canvas元素中，因此我想我需要一个全局变量来存储所有与当前显示图像名称配对的画布元素 - 这样当单击“下一步”按钮时，它可以查找其画布元素和图像，决定应该绘制下一个图像，然后绘制它。

但是，为了找到页面中的所有画布元素，我似乎需要window.onload函数来确保我只在页面完全加载后才收集它们。但是，我无法找到一种方法来获取我在此函数内部收集的信息，在外部和全局变量中。我看到一个人说明如果你把东西放在你在函数外创建的列表中，你可以更新函数内部列表的内容 - 因为这是通过引用传递而不是传递 - 按值，列表将在函数外部可用，并填充相应的信息。但是，对于我的特定应用程序，这意味着我需要在创建它时知道列表的长度...但是脚本只能在window.onload函数内学习。所以我似乎陷入了困境。

为了给出一个最小的例子，下面是我要编写的代码，如果我不必提前指定数组的长度。我使用数字1表示每个画布从第一个图像开始（在我的HTML和JavaScript的其余部分中，我有一种方法可以将画布元素与数字配对，以便找到合适的图像来绘制）。

var canList = new Array();

window.onclick = function() {
    var cans = document.getElementsByTag("canvas");
    for (i = 0; i < cans.length; i++) {
        canList[i] = [cans[i],1];
    }
}

我想要的行为是让我能够在代码中的其他地方使用canList。显然这不起作用，因为我没有在变量声明中指定canList的长度，但我只能通过首先创建cans变量来找到它。如果我在函数内移动canList变量声明，它将不再在外面可用。

Answer 1

您无需在创建时定义数组的长度。简单地说：

var array = new Array();

或

var array = [];

然后，您可以根据需要定义任何一个索引：

array[n] = value;

Answer 2

您似乎要问的是如何将条目添加到Javascript数组而不必将其初始化为特定大小。为此，您可以使用array.push：

var array = [];
array.push(1);
array.push(2);
array.push(3);
// array will be [1, 2, 3]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

或array.unshift如果要将其添加到数组的开头：

var array = [];
array.unshift(1);
array.unshift(2);
array.unshift(3);
// array will be [3, 2, 1]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

Javascript中的数组，尽管有名称，但功能类似链接列表。

HTML，JavaScript：从window.onclick的函数

2 个答案: