JavaScript的循环：为...在VS的 [英] JavaScript Loops: for...in vs for

问题描述

我面临在Javascript中一个奇怪的行为。我得到

对象不支持此属性或方法

例外在以下code中的的removeAttribute 功能：

  VAR键= controlDiv.getElementsByTagName（按钮）;
对（在按键VAR按钮）
    button.removeAttribute（'禁用'）;
 

当我改变code与下面的问题就消失了：

  VAR键= controlDiv.getElementsByTagName（按钮）;
对于（VAR I = 0; I＆LT; buttons.length;我++）
    按钮[I] .removeAttribute（'禁用'）;
 

什么是按钮的值在为中... ？

解决方案

不要使用的for..in 数组迭代。

要了解这一点很重要的是，JavaScript数组的方括号语法（ [] ）用于访问indicies实际上是从对象 ...

  obj.prop === OBJ ['托'] //真
 

的的for..in 结构不喜欢一个更传统工作for..each /在那会在其他语言中找到（PHP，Python和等）。

JavaScript的的for..in 的设计迭代某的目标的属性。生产每个属性的键即可。使用这种键与对象的括号语法相结合，你可以轻松地访问你后的值。

  VAR OBJ = {
    富：酒吧，
    嘶嘶声：嗡嗡，
    哞：渣土
};对于（OBJ中的道具VAR）{
    的console.log（丙）; //富/嘶嘶声/哞
    的console.log（OBJ [道具]）; //酒吧/口碑/渣土
}
 

而因为数组是简单地用连续的数字属性名（索引）对象的的for..in 作品以类似的方式，生产数字indicies只是因为它产生的上述属性名称。

在中的for..in 结构的一个重要特点是，它继续寻找枚举的属性了原型链。它也将迭代的继承枚举的属性即可。它是由你来验证当前属性直接在本地对象，而不是它连接到与的hasOwnProperty原型上存在（） ...

 为（以OBJ VAR道具）{
    如果（obj.hasOwnProperty（丙））{
        //道具其实是OBJ的财产（不继承）
    }
}
 

（更多关于原型继承）

使用在阵列类型的 for..in结合结构的问题是，不存在garauntee以什么样的顺序的属性产生...和一般来说即在处理阵列的farily重要特征。

另一个问题是，它通常比的标准速度较慢为实施

底线

使用为中... 来遍历数组就像使用螺丝刀对接钉钉......你为什么不只是使用锤（为）？

I faced a strange behaviour in Javascript. I get

"Object doesn't support this property or method"

exception for the removeAttribute function in the following code:

var buttons = controlDiv.getElementsByTagName("button");
for ( var button in buttons )
    button.removeAttribute('disabled');

When I change the code with the following, the problem disappears:

var buttons = controlDiv.getElementsByTagName("button");
for ( var i = 0; i < buttons.length; i++ )
    buttons[i].removeAttribute('disabled');

What is the value of button inside the for...in?

解决方案

Don't use for..in for Array iteration.

It's important to understand that Javascript Array's square bracket syntax ([]) for accessing indicies is actually inherited from the Object...

obj.prop === obj['prop']  // true

The for..in structure does not work like a more traditional for..each/in that would be found in other languages (php, python, etc...).

Javascript's for..in is designed to iterate over the properties of an object. Producing the key of each property. Using this key combined with the Object's bracket syntax, you can easily access the values you are after.

var obj = {
    foo: "bar",
    fizz: "buzz",
    moo: "muck"
};

for ( var prop in obj ) {
    console.log(prop);      // foo / fizz / moo
    console.log(obj[prop]); // bar / buzz / muck
}

And because the Array is simply an Object with sequential numeric property names (indexes) the for..in works in a similar way, producing the numeric indicies just as it produces the property names above.

An important characteristic of the for..in structure is that it continues to search for enumerable properties up the prototype chain. It will also iterate inherited enumerable properties. It is up to you to verify that the current property exists directly on the local object and not the prototype it is attached to with hasOwnProperty()...

for ( var prop in obj ) {
    if ( obj.hasOwnProperty(prop) ) {
        // prop is actually obj's property (not inherited)
    }
}

(More on Prototypal Inheritance)

The problem with using the for..in structure on the Array type is that there is no garauntee as to what order the properties are produced... and generally speaking that is a farily important feature in processing an array.

Another problem is that it usually slower than a standard for implementation.

Bottom Line

Using a for...in to iterate arrays is like using the butt of a screw driver to drive a nail... why wouldn't you just use a hammer (for)?

这篇关于JavaScript的循环：为...在VS的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！