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

IT技术 javascript for-loop foreach
2021-02-28 01:56:40

我正在制作带有 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 未定义。有人可以向我解释发生了什么吗?

5个回答

for...in语句旨在用于迭代对象属性,通过查看您的代码似乎actors是一个数组(您正在使用 index 设置初始元素0)。

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

我建议您避免出现问题并使用正常的 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)) {
    //
  }
}

看起来您正在尝试访问名称上的对象属性,而不是此处的值。在 for/in 循环中,索引(在本例中为“0”)被分配给“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;
}

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

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

有关JavaScript for-in 循环的更多信息,请参见此处

另一种选择是使用下划线库:

_.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 的奇怪变量作用域规则所困扰。