Folgen Sie mir, um die for-Schleife und die for...in-Schleife von javascript_javascript-Fähigkeiten zu erlernen-js-Tutorial-php.cn

Jeder weiß, dass JavaScript zwei Möglichkeiten zum Iterieren von Objekten bietet:

for-Schleife;
for..in-Schleife;

1. for-Schleife

Unzulänglichkeit:

Die Länge des Arrays muss bei jeder Schleife ermittelt werden
Die Kündigungsbedingungen sollten klar sein In einer for-Schleife können Sie die Werte eines Arrays oder arrayähnlicher Objekte wie Argumente und HTMLCollection-Objekte durchlaufen. Die übliche Schleifenform lautet wie folgt:

// 次佳的循环
for (var i = 0; i < myarray.length; i++) {
 // 使用myarray[i]做点什么
}

Nach dem Login kopieren

Der Nachteil dieser Form der Schleife besteht darin, dass die Länge des Arrays bei jeder Schleife ermittelt werden muss. Dies verringert die Leistung Ihres Codes, insbesondere wenn myarray kein Array, sondern ein HTMLCollection-Objekt ist.

HTMLCollections bezieht sich auf die von DOM-Methoden zurückgegebenen Objekte, zum Beispiel:

document.getElementsByName() document.getElementsByClassName()
document.getElementsByTagName()

Es gibt andere HTMLCollections, die vor dem DOM-Standard eingeführt wurden und auch heute noch verwendet werden. Ja:

document.images: Alle Bildelemente auf der Seite document.links: Alle Tag-Elemente
document.forms: alle Formulare
document.forms[0].elements: Alle Felder im ersten Formular auf der Seite

Das Problem bei Sammlungen besteht darin, dass sie das zugrunde liegende Dokument (HTML-Seite) in Echtzeit abfragen. Dies bedeutet, dass Sie jedes Mal, wenn Sie auf die Länge einer Sammlung zugreifen, das DOM in Echtzeit abfragen müssen und DOM-Operationen im Allgemeinen teuer sind.

Aus diesem Grund ist es sinnvoll, die Länge eines Arrays (oder einer Sammlung) zwischenzuspeichern, wenn Sie Werte durchlaufen, wie im folgenden Code gezeigt:

for (var i = 0, max = myarray.length; i < max; i++) {
 // 使用myarray[i]做点什么
}

Nach dem Login kopieren

Auf diese Weise rufen Sie den Längenwert während dieser Schleife nur einmal ab.

Das Zwischenspeichern der Länge von HTMLCollections beim Schleifen zum Abrufen von Inhalten ist in allen Browsern schneller, zwischen 2x (Safari3) und 190x (IE7). //Diese Daten sehen sehr alt aus

Beachten Sie, dass Sie möglicherweise Längenaktualisierungen gegenüber Konstanten bevorzugen, wenn Sie die Sammlung in der Schleife explizit ändern möchten (z. B. weitere DOM-Elemente hinzufügen).

Mit der Einzelvariablenform können Sie die Variable wie folgt aus der Schleife ziehen:

function looper() {
 var i = 0,
  max,
  myarray = [];
 // ...
 for (i = 0, max = myarray.length; i < max; i++) {
  // 使用myarray[i]做点什么
 }
}

Nach dem Login kopieren

Dieses Formular hat den Vorteil der Konsistenz, da Sie sich an ein einzelnes Var-Formular halten. Der Nachteil besteht darin, dass beim Refactoring von Code das Kopieren und Einfügen der gesamten Schleife etwas schwierig ist. Wenn Sie beispielsweise eine Schleife von einer Funktion in eine andere kopieren, müssen Sie sicherstellen, dass Sie i und max in die neue Funktion einführen können (wenn sie hier nicht nützlich sind, müssen Sie sie höchstwahrscheinlich aus der ursprünglichen Funktion löschen). ) Verlieren).

Die letzte Anpassung an der Schleife besteht darin, i durch einen der folgenden Ausdrücke zu ersetzen.

i = i + 1
i += 1

Nach dem Login kopieren

JSLint fordert Sie dazu auf, weil und – „übermäßige Trickserei“ fördert. Wenn Sie es ignorieren, ist die Plusplus-Option von JSLint falsch (der Standardwert ist default).

Zwei Varianten:

//第一种变化的形式：

var i, myarray = [];
for (i = myarray.length; i–-;) {
 // 使用myarray[i]做点什么
}

//第二种使用while循环：

var myarray = [],
 i = myarray.length;
while (i–-) {
 // 使用myarray[i]做点什么
}

Nach dem Login kopieren

Diese kleinen Verbesserungen dienen nur der Leistung, außerdem wird sich JSLint über die Verwendung von i-- beschweren.

2. for…in-Schleife – auch bekannt als „Aufzählung“

Die for…in-Schleife wird oft verwendet, um die Eigenschaften eines Objekts oder jedes Elements eines Arrays zu iterieren. Der Schleifenzähler in der for…in-Schleife ist eine Zeichenfolge, keine Zahl. Es enthält den Namen der aktuellen Eigenschaft oder den Index des aktuellen Array-Elements. Hier ein paar Beispiele:

Beim Durchlaufen eines Objekts ist die Variable i, die der Schleifenzähler ist, der Attributname des Objekts:

//使用for..in循环遍历对象属性 
varperson={ 
 name: "Admin", 
 age: 21, 
 address:"shandong" 
}; 
for(var i in person){ 
 console.log(i); 
}

Nach dem Login kopieren

Das Ausführungsergebnis ist:

Name

Alter

Adresse

Beim Durchlaufen eines Arrays ist die Variable i, die der Schleifenzähler ist, der Index des aktuellen Array-Elements:

//使用for..in循环遍历数组 
vararray = ["admin","manager","db"] 
for(vari in array){ 
 console.log(i); 
}

Nach dem Login kopieren

Ausführungsergebnis:

Es scheint jedoch, dass die for.. in-Schleife recht einfach zu verwenden ist. Seien Sie jedoch nicht zu früh glücklich. Schauen Sie sich das folgende Beispiel an:

var array =["admin","manager","db"]; 
//给Array的原型添加一个name属性 
Array.prototype.name= "zhangsan"; 
for(var i in array){ 
 alert(array[i]); 
}

Nach dem Login kopieren

运行结果：

admin

manager

zhangsan
咦，奇观了，怎么平白无故的冒出来一个zhangsan
现在，再看看使用 for循环会怎样？

vararray = ["admin","manager","db"]; 
//给Array的原型添加一个name属性 
Array.prototype.name = "zhangsan"; 
for(var i =0 ; i<array.length; i++){ 
 alert(array[i]); 
};

Nach dem Login kopieren

运行结果：

admin

manager

db
哦，现在明白了，for..in循环会把某个类型的原型(prototype)中方法与属性给遍历出来，所以这可能会导致代码中出现意外的错误。为了避免这个问题，我们可以使用对象的hasOwnProperty()方法来避免这个问题，如果对象的属性或方法是非继承的，那么hasOwnProperty() 方法返回true。即这里的检查不涉及从其他对象继承的属性和方法，只会检查在特定对象自身中直接创建的属性。

vararray = ["admin","manager","db"]; 
Array.prototype.name= "zhangshan"; 
for(var i in array){ 
//如果不是该对象自身直接创建的属性（也就是该属//性是原型中的属性），则跳过显示 
 if(array.hasOwnProperty(i)){ 
  alert(array[i]); 
  }
}

Nach dem Login kopieren

运行结果：

admin

manager

db
另外一种使用hasOwnProperty()的形式是取消Object.prototype上的方法。像这样：

// 对象
var man = {
 hands: 2,
 legs: 2,
 heads: 1
};
for (var i in man) {
 if (Object.prototype.hasOwnProperty.call(man, i)) { // 过滤
  console.log(i, ":", man[i]);
 }
}

Nach dem Login kopieren

其好处在于在man对象重新定义hasOwnProperty情况下避免命名冲突。也避免了长属性查找对象的所有方法，你可以使用局部变量“缓存”它。

var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) {
 if (hasOwn.call(man, i)) { // 过滤
  console.log(i, ":", man[i]);
 }
}

Nach dem Login kopieren

严格来说，不使用hasOwnProperty()并不是一个错误。根据任务以及你对代码的自信程度，你可以跳过它以提高些许的循环速度。但是当你对当前对象内容（和其原型链）不确定的时候，添加hasOwnProperty()更加保险些。

格式化的变化（通不过JSLint）会直接忽略掉花括号，把if语句放到同一行上。其优点在于循环语句读起来就像一个完整的想法（每个元素都有一个自己的属性”X”，使用”X”干点什么）：

// 警告： 通不过JSLint检测
var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) if (hasOwn.call(man, i)) { // 过滤
 console.log(i, ":", man[i]);
}

Nach dem Login kopieren

以上就是介绍了JavaScript提供的两种方式迭代对象：for循环和for...in循环，希望这篇文章对大家的学习有所帮助。