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

Question

我想基于然而，许多canvas元素在页面上初始化自定义颜色选择器。我试图遍历canvasArray以及每个指标的getContext，创建新的图像，设置一个点击监听，动态存储中选择颜色。

我在与不确定的阵列性能的问题。如：Uncaught TypeError: Cannot read property 'push' of undefined at handleColorPickers。

我也试着contextArray[i] = canvasArray[i[.getcontext('2d');每个我已经尝试将数据存储到任意阵列的时间。 （contextArray，imageArray，dataArray中，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();
    }
}
}

我想画到画布上的所有图像，监听图像上的点击，有关点击颜色选择后的位置，可见性切换捕捉数据。所有动态，但是“未定义”阵列性能的问题时，我尝试去界定。

如何动态地定义所有这些阵列的？

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

Answer 2

当.js文件阅读：var canvasArray, contextArray, imageArray, dataArray, rgbaArray = new Array()

这意味着每到这个变种的将是不确定的，最后一个将是阵！？尝试改变这一点，并再次运行它！