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

我在一个物体上有一种奇怪的行为。

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.logspriteData时，我得到：

Object { }

当我点击它，我得到：

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

但是当我console.logspriteData[0]（spriteData['0']）时，我得到undefined。
我甚至试过console.logObject.keys(spriteData)，但得到了一个空数组。
有人能告诉我发生了什么事吗？
编辑
经过一些操作，我发现当我将这个函数放在onload对象的Image方法中时，这就是原因。但外面的物体是正常的。

最佳答案

不要使用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(spriteCoordinates).map(fn)-获取由spriteCoordinates对象的键组成的数组，并将其转换为数组
fn是一个函数，.map()将遍历数组，对每个项应用该函数，并根据结果构造一个新数组。
结果是一个新数组，您可以直接将其分配给spriteData。