javascript - Object[key] 返回未定义(奇怪)

Question

我的一个对象出现了奇怪的行为。

var canvas = document.createElement('canvas');
canvas.style.display = 'none';
document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');
//imgObj is an Image Object
ctx.drawImage(imgObj, 0, 0);

//inserting(caching) the image data in the spriteData object
var spriteCoordinates = coordinates.spriteCoordinates; 
//coordinates.spriteCoordinates has keys in integer

for(var i in spriteCoordinates){
    var x = spriteCoordinates[i].x,
        y = spriteCoordinates[i].y,
        w = spriteCoordinates[i].w,
        h = spriteCoordinates[i].h;

    var imageData = ctx.getImageData(x, y, w, h);

    spriteData[i] = imageData;
}

当我console.log spriteData时，我得到:

Object { }

当我点击它时，我得到:

0: {
    width: int,
    height: int,
    data: array()
}// I've put int and array just for representation

但是当我console.log spriteData[0] (spriteData['0'])时，我得到undefined。 我什至尝试过 console.log Object.keys(spriteData)，但我得到一个空数组。

有人可以告诉我发生了什么事吗？

编辑

经过一番操作后，我发现这是我将此函数放入 Image 对象的 onload 方法中造成的。但在它之外，该对象是正常。

Answer 1

不要使用 for..in 循环，而是使用更具语义的 .map() :

var spriteData = Object.keys(spriteCoordinates).map(function(key) {
    var item = spriteCoordinates[key];
    return ctx.getImageData(item.x, item.y, item.w, item.h);
});

• Object.keys(spriteCooperatives).map(fn) - 获取由 spriteCooperatives 对象的键组成的数组，并将其转换为数组
• fn 是一个函数，.map() 将迭代数组，将函数应用于每个项目，并根据结果构造一个新数组。<

结果是一个新数组，您可以直接将其分配给 spriteData。