Heim  >  Artikel  >  Web-Frontend  >  Der Unterschied zwischen for und for in in Javascript und warum for in nicht empfohlen wird

Der Unterschied zwischen for und for in in Javascript und warum for in nicht empfohlen wird

伊谢尔伦
伊谢尔伦Original
2017-07-17 14:13:363287Durchsuche

Es gibt zwei Möglichkeiten, das Array

in js

var array=['a']
//标准的
for循环
for(var i=1;i<array.length;i++){
    alert(array[i])
}
//
foreach
循环
for(var i in array){
    alert(array[i])
}

zu durchlaufen. Unter normalen Umständen sind die Ergebnisse der beiden oben genannten Die Möglichkeiten zum Durchlaufen des Arrays sind gleich. Lassen Sie uns zunächst über den ersten Unterschied zwischen den beiden sprechen

Das i in der Standard-for-Schleife ist vom Typ Zahl, der den Index des Arrays darstellt, aber das i in der foreach-Schleife stellt den Schlüssel des dar Array ist vom Typ String. Weil alles in js ein -Objekt ist. Probieren Sie es selbst aus. Alert(typeof i); Dieser Unterschied ist ein kleines Problem. Nachdem ich nun den folgenden Code hinzufüge, werden die obigen Ausführungsergebnisse unterschiedlich sein.

//扩展了js原生的Array
Array.prototype.test=function()
 
}

Probieren Sie es aus und sehen Sie, was der obige Code bewirkt. Wir haben herausgefunden, dass die Standard-for-Schleife immer noch eine echte Schleife über das Array durchführt, aber zu diesem Zeitpunkt gibt die foreach-Schleife die Testmethode aus, die ich gerade geschrieben habe. Dies ist der größte Unterschied zwischen for und foreach zum Durchlaufen des Arrays. Wenn wir foreach zum Durchlaufen des Arrays im Projekt verwenden, nehmen wir an, dass eines Tages jemand versehentlich die native Array-Klasse von js erweitert oder ein externes js-Framework einführt und auch erweitert natives Array. Dann kommt das Problem.

Warum nicht for in-Anweisung verwenden?

Schlüsselwörter: native Array-Klasse, erweiterte Array-Klasse
Der potenzielle Fehler bei der Verwendung der for in-Anweisung zum Durchlaufen von Array-Objekten ist: wenn die native Array-Klasse durch ein anderes js-Skript geändert wird Bibliotheken Prototyp-Erweiterung (z. B. Hinzufügen einer zusätzlichen toJSON-Methode, nämlich Array.prototype.toJSON=xxxx), dann unterscheidet sich die Logik der Verwendung von for in zum Durchlaufen des erweiterten Array-Objekts von der Logik des Durchlaufens das native Array-Objekt.
Um ein einfaches Beispiel zu geben:

var x=[1]; 
for(var s in x){ 
alert(s); 
};

Wenn Array eine native JS-Klasse ist, sollte die obige Anweisung nach dem gesunden Menschenverstand die Alarmmethode nur einmal ausführen, und s ist der Index des Arrays 0 . Wenn die Array-Klasse jedoch um eine zusätzliche toJSON-Methode erweitert wird, führt die obige Anweisung den Alarm zweimal aus, beim ersten Mal ist s der Index 0 und beim zweiten Mal ist s der Methodenname „toJSON“.

Wenn die Logik des von Ihnen entworfenen Codes auf der nativen Array-Klasse basiert und Ihr Kollege eines Tages auf der Seite auf eine JS-Bibliothek eines Drittanbieters verweist und diese Bibliothek zufällig die Array-Klasse erweitert, ist das Ergebnis Es wird schwierig sein. Stellen Sie sich vor, dass die ursprüngliche Codelogik höchstwahrscheinlich nicht mehr gelten wird.

Eine sehr bekannte Bibliothek dieser Art, die native JS-Klassen erweitert, ist „prototyp.js“, die viele Methoden auf die Array-Klasse erweitert, wie z. B. toJSON, every usw. Ich verstehe jetzt, warum der Gründer von Jquery so wütend auf Prototyp war (viele Leute verwenden JQuery und Prototyp aus besonderen Gründen auf derselben Seite. Es wird viele unerwartete Konfliktprobleme geben, die nicht einfach durch „noConflict“ gelöst werden können. ). Wenn der Autor von jqModal meinen Artikel versteht, wird er sich außerdem wahrscheinlich über den Prototyp beschweren und sagen: „Es ist unklug für mich, for in für die Array-Durchquerung zu verwenden, aber das Schlimmste ist der Prototyp …“

Wie oben erwähnt: Wenn Sie jqModal verwenden und auch Prototypen aus anderen Gründen verwenden, herzlichen Glückwunsch, Sie wurden ausgetrickst. Der Konflikt führt dazu, dass das Popup-Fenster von jqModal nicht automatisch mit der von closeClass unter ie6 und ie7 festgelegten Schaltfläche geschlossen werden kann. Verfolgen Sie den Debugging-Code und Sie werden feststellen, dass sich die Ausnahme in der for in-Schleife der hs-Methode befindet, die am Anfang dieses Artikels erwähnt wurde. . .
3. Lösen Sie das Problem
Verwenden Sie beim Durchlaufen des Arrays die Anweisung for var anstelle der Anweisung for in.

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen for und for in in Javascript und warum for in nicht empfohlen wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn