for...in 循环在 JavaScript 中有用吗？

Question

我是 JavaScript 新手，目前正在学习所谓的 for...in 循环。

在 JavaScript 中编码时，人们真的会使用这些循环吗？

我可以看到所有其他类型的循环是如何有用的——但不是这个。

请有人对此进行阐明，并在可能的情况下提供一个现实生活中的示例。

Answer 1

在 Javascript 中，只有 Array 对象可以使用普通的 for(;;) 循环进行迭代。 for..in 用于枚举非数组对象：

for (var i in obj) {
    if (obj.hasOwnProperty(i)) { // if you don't want to access prototype properties
        alert(i);
        alert(obj[i]);
    }
}

Answer 2

它通常用于循环某些内容的集合。例如，由于每个 JavaScript 对象都可以视为属性的集合，因此您可以通过这种方式枚举属性。

//let's loop throug all properties of a "document" 
//we don't know what these will be
var txtProps = "";
for (var prop in window.document) {
   txtProps += prop + "\n";
}
alert(txtProps);//pops out a message showing a looong list of all properties

Answer 3

我认为只要您了解对象可以容纳的不仅仅是简单的变量，就可以了。考虑这个从 w3schools.com 修改的示例来说明这一点：

<script type="text/javascript">

//This is probably as you expect:
var person={fname:"John",lname:"Doe",age:25}; 

//This is probably unexpected and unwanted, but is valid and will be an output of the for...in loop:
person.f = function(){
 alert("Hi");
};

//Use typeof() function to check that the data type is what you expect:
for (x in person){
   document.write(typeof(person[x]) + " ");
}

</script>

打印：

string string number function

为了回答有关循环类型之间差异的具体问题，for() 循环非常适合具有 length 属性的数组类型。 foreach() 循环可以很好地用于迭代对象集合，而 foreach ...in 循环可以很好地用于对象的键（不声称这些是任何循环类型的独占用途）。

Answer 4

要理解这一点，您首先需要了解 JavaScript 的对象模型。

正如您所注意到的，在处理数组时，for...in 循环并不是那么有用，因为 for (;;) 循环更容易完成这项工作。

但数组只是一种具有数字属性的 JavaScript 对象，而 for (;;) 循环仅处理数字属性。使用 myArray[0] 表示法的原因是您可以对任何属性名称使用此方括号表示法。因此 myObject['myProperty'] 与 myObject.myProperty 相同。这就是 for...in 变得有用的地方：

for (var i in myObject) {
    alert(myObject[i]);
}

因此，如果我们设置的唯一属性是 myProperty，那么 i 将等于 >“myProperty”（请注意，它是一个字符串，这使其比仅仅作为变量名称更加动态）。

但这里有一个巨大的“但是”。对象有一个叫做原型的东西，这些原型有自己的属性和方法。如果我执行以下操作：

for (var i in myArray) {
    alert(i + ': ' + myArray[i]);
}

...我不仅会收到数值（1、2、3 等）的警报，还会收到数组属性的警报，例如 length，及其方法，例如 join。这些属性实际上属于 Array 对象的原型，并且可以通过执行以下操作来过滤原型属性：

for (var i in myArray) {
    if (myArray.hasOwnProperty(i)) {
        alert(i + ': ' + myArray[i]);
    }
}

现在我将再次收到数值警报，这意味着这（几乎）与 for 完全相同(var i = 0;; i < myArray.length; i++)。当我们可以使用该符号时，为什么我要告诉你这个？因为所有对象都有原型，而不仅仅是数组。每个对象都源自 Object 对象，因此如果有人定义了 Object.prototype.myProperty = "some string value" 那么它总是会出现在任何 for 中...in 循环，用于页面的其余部分。值得庆幸的是，hasOwnProperty 方法本身属于 Object.prototype，因此您可以（并且应该）始终在 for...in 中使用它循环。

所以这是一个成熟的 for...in 示例：

// This is just one way of defining an object. We could also use a constructor function, or `new Object()`
var myObject = {
    aProperty : "my first property value",
    anotherProperty : "second property value"
    4 : "numeric property names work too, you know"
}

for (var i in myObject) {
    if (myObject.hasOwnProperty(i)) {
       document.write(i + ': ' + myObject[i] + '<br />\n'); 
    }
}

输出：

aProperty: my first property value
anotherProperty: secondPropertyValue
4: numeric property names work too, you know

希望这能解释一切。

Answer 5

for in 和 for 都有特定的用途。让我们看一些。

如果你有一个对象

var obj = { one: 1, two: 2 }; 

，那么你可以使用for in循环迭代它的属性，即

for( var i in obj ) console.log( obj[i] );  //use obj.hasOwnProperty(i) to exclude prototype properties 

注意，如果你尝试通过for迭代obj循环它不会工作，因为它会使用数字索引来访问键并且会给出一个未定义的，即 obj[0] 将会是未定义的。这与获取对象的长度比简单地编写 obj.length 更复杂这一事实无关。当然，如果您有数字属性，您将能够使用 for 循环，for in 只是更自然地适合对象迭代。

如果您有一个数组，

 var array = [1,2] 

从技术上讲您可以同时使用这两个但，建议您为此使用 for 循环。这就是为什么

1. 不能保证元素顺序。
2. 原型属性也将被迭代，这可能会导致不必要的副作用。

为了说明第二点，让我们扩展 Array。

Array.prototype.print_array = function(){ console.log(this) }; 

我们刚刚添加到 Array 的这个函数将被所有 Array 对象继承，因此，通过 for in 迭代数组

for( var i in array ) console.log( array[i] ); 

会产生收益

1
2
function (){ console.log(this) } // the prototype property was iterated over also

，并且使用 for 迭代数组

for( var i =0; i < array.length; i++) console.log( array[i] ); 

将产生预期的结果。

1
2

因此，对于对象迭代，请使用 for in；对于数组迭代，请使用 for