JavaScript 循环:for...in 与 for [英] JavaScript Loops: for...in vs for

问题描述

我在 Javascript 中遇到了一个奇怪的行为.我得到

<块引用>对象不支持此属性或方法"

以下代码中 removeAttribute 函数的异常:

var buttons = controlDiv.getElementsByTagName("button");for(按钮中的var按钮)button.removeAttribute('禁用');

当我使用以下代码更改代码时，问题就消失了:

var buttons = controlDiv.getElementsByTagName("button");for ( var i = 0; i 

for...in中button的值是多少?

解决方案

不要使用 for..in 进行数组迭代.

重要的是要了解用于访问索引的 Javascript 数组的方括号语法 ([]) 实际上继承自 Object...

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

for..in 结构不像在其他语言(php、python 等)中可以找到的更传统的 for..each/in 工作...).

Javascript 的 for..in 旨在迭代对象的属性.生成每个属性的键.将此键与Object的括号语法结合使用，您可以轻松访问您想要的值.

var obj = {foo: "酒吧",嘶嘶声:嗡嗡声"，moo:泥巴"};for ( var prop in obj ) {控制台日志(道具)；//foo/fizz/mooconsole.log(obj[prop]);//酒吧/嗡嗡声/垃圾}

而且因为数组只是一个具有连续数字属性名称(索引)的对象，for..in 以类似的方式工作，产生数字索引就像它产生上面的属性名称.

for..in 结构的一个重要特征是它继续搜索原型链上的可枚举属性.它还将迭代继承的可枚举属性.由您来验证当前属性是否直接存在于本地对象上，而不是使用 hasOwnProperty()...

附加到的原型上

for ( var prop in obj ) {如果(obj.hasOwnProperty(道具)){//prop 实际上是 obj 的属性(不是继承的)}}

(更多关于原型继承)

在 Array 类型上使用 for..in 结构的问题在于，对于属性的生成顺序没有保证……一般来说，这是一个非常重要的特性在处理数组中.

另一个问题是它通常慢于一个标准的for 实现.

底线

使用 for...in 来迭代数组就像用螺丝刀的屁股钉钉子……你为什么不直接用锤子(for)?

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 循环:for...in 与 for的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！