Javascript 中的奇怪行为增强了 for...in 循环答案

【问题标题】：Strange behavior in Javascript enhanced for...in loopJavascript 中的奇怪行为增强了 for...in 循环
【发布时间】：2010-12-25 12:18:45
【问题描述】：

我正在制作一个带有 canvas 标签的 Javascript 游戏，并且我正在使用增强的 for 循环来更新玩家位置。

简而言之：

var actors = new Array();

var player = new Actor(0, 0, img);

actors[0] = player;

function update_positions() {
    //position 1
    for(var a in actors) {
        //position2
        a.xpos += a.xvel;
        a.ypos += a.yvel;
    }
}

就在位置 1 的 for 循环之外，我可以访问 actor[0].xvel 的正确值。在位置 2 的 for 循环内，a.xvel 未定义。有人可以向我解释发生了什么吗？

【问题讨论】：

请看这个问题stackoverflow.com/questions/1886179/…
Don't use for-in-loops for arrays at all
2015 更新：你想要for (var a of actors)

标签： javascript for-loop foreach

【解决方案1】：

for...in 语句用于迭代对象属性，通过查看您的代码，actors 似乎是一个数组（您正在设置索引为0 的初始元素)。

这个语句也会crawl up原型链，如果你扩展了Array.prototype这些属性将被迭代，并且迭代的顺序也没有保证。

我建议您避免使用 problems 并使用普通的 for 循环进行迭代：

for (var i = 0; i < actors.length; i++) {
    actors[i].xpos += actor.xvel;
    actors[i].ypos += actor.yvel;
}

如果我错了，并且actors 不是数组，我建议您使用hasOwnProperty 方法，以确保属性存在于对象本身中，而不是原型链中的某个位置：

for (var name in object) {
  if (object.hasOwnProperty(name)) {
    //
  }
}

【讨论】：

【解决方案2】：

您似乎正在尝试访问名称上的对象属性，而不是此处的值。索引，在本例中为“0”，在 for/in 循环中被分配给“a”。

你要做的是访问数组成员的值，即：actors[a]。

试试这个：

for(var a in actors) { // a=0 the first time around the loop,  
    actor = actors[a]; // same thing as actors[0];
    actor.xpos += actor.xvel;
    actor.ypos += actor.yvel;
}

【讨论】：

【解决方案3】：

for (x in y) 构造遍历数组的索引，而不是其成员。

【讨论】：

【解决方案4】：

尝试使用actors[a].xpos 而不仅仅是a.xpos。

有关JavaScript for-in loops的更多信息，请参见此处。

【讨论】：

【解决方案5】：

另一种选择是使用underscore 库：

_.each( actors, function(a) {
    a.xpos += a.xvel;
    a.ypos += a.yvel;
});

或者如果您不想使用下划线但仍然使用 JQuery，那么您可以这样做：

$.each( actors, function(i, a) {
    a.xpos += a.xvel;
    a.ypos += a.yvel;
});

这种函数式迭代模式的一个很好的特点是，您可以使用var 在循环中声明变量，这些变量的作用域为循环体，这有助于避免被 JavaScript 奇怪的变量作用域规则所困扰。

【讨论】：