Object [key]返回undefined（奇怪）

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)，但我得到一个空数组。

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

修改

经过一些操作后，我发现这是因为我将此函数放在onload对象的Image方法中。但除此之外，对象是正常。

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(spriteCoordinates).map(fn) - 获取由spriteCoordinates对象的键组成的数组，并将其转换为数组
• fn是一个函数，.map()将迭代数组，对每个项应用函数，并从结果中构造一个新数组。

结果是一个直接分配给spriteData的新数组。