javascript - 如何解决Javascript中未定义的数组属性？

Question

我正在尝试根据页面上的 canvas 元素的数量来初始化自定义颜色选择器。我试图循环 canvasArray 并为每个索引 getContext 创建一个新图像，设置一个点击监听器，动态存储选定的颜色。

我遇到了未定义的数组属性的问题。例如:未捕获的类型错误:无法读取handleColorPickers 处未定义的属性“push”。

每次我尝试将数据存储到任何数组时，我也尝试过 contextArray[i] = canvasArray[i[.getcontext('2d'); 。 (上下文数组、图像数组、数据数组、rgbaArray)。

function handleColorPickers () {
var canvasArray, contextArray, imageArray, dataArray, rgbaArray = new Array();

// store each canvas in array
var canvasArray = document.getElementsByTagName( "canvas" );

// loop through all canvas elements on page
for ( var i = 0; i < canvasArray.length; i++ ) {

    // get context of canvas element store dynamically
    contextArray.push( canvasArray[i].getContext( "2d" ) );

    // construct new image
    imageArray.push( new Image( 250, 250 ) );
    imageArray[i].onLoad = () => contextArray[i].drawImage( imageArray[i], 0, 0, imageArray[i].width, imageArray[i].height );
    imageArray[i].src = "../img/color-wheel-opt.jpg";

    canvasArray[i].onclick = function ( mouseEvent /* dynamic? */) {
        // get color selection data
        dataArray.push( contextArray[i].getImageData( mouseEvent.offsetX, mouseEvent.offsetY, 1, 1 ) );

        rgbaArray.push( dataArray[i].data );

        canvasArray[i].siblings( $( 'input' ) ).val( "rgba(" + rgbaArray[i][0] + "," + rgbaArray[i][1] + "," + rgbaArray[i][2] + "," + rgbaArray[i][3] + ")" );

        //toggle visibility 
        canvasArray[i].parent().parent().toggle();
    }
}
}

我希望将所有图像绘制到 Canvas 上，监听图像上的单击，捕获有关单击位置的数据，并在选择颜色后切换可见性。全部都是动态的，但是当我尝试定义它们时，“未定义”数组属性是问题。

如何动态定义所有这些数组？

Answer 1

主要问题是你的开场白:

var canvasArray, contextArray, imageArray, dataArray, rgbaArray = new Array();

您仅初始化最后一个数组 (rgbaArray)。您需要单独声明所有数组:

var canvasArray = [], contextArray = [], imageArray = [], dataArray = [], rgbaArray = [];

您可以在下面看到它的演示:

var test, test2 = [];

console.log('test', test);
console.log('test2', test2);

var test3 = [], test4 = [];


console.log('test3', test3);
console.log('test4', test4);