Dark Horse Programmer JavaScript-Video-Ressourcenfreigabe

Dark Horse Programmer JavaScript Video Tutorial“ führt Sie ausführlich in JavaScript ein. JavaScript ist eine wörtliche Skriptsprache und eine Skriptsprache, die in der clientseitigen Webentwicklung weit verbreitet ist. Wird derzeit von Millionen von Webseiten verwendet, um das Design zu verbessern, Formulare zu validieren, Browser zu erkennen, Cookies zu erstellen und mehr.

Adresse für die Videowiedergabe: http://www.php.cn/course/500.html

Die Schwierigkeit dabei Video ist eine Array-Schleife, die die logischen Fähigkeiten testet. Im Folgenden werden verschiedene Schleifenbeispiele zusammengefasst:

Wie durchlaufen wir die Elemente im Array? Als JavaScript vor 20 Jahren zum ersten Mal auf den Markt kam, konnten Sie die Array-Durchquerung folgendermaßen implementieren:

var arr=["one","two","three"];2 for(var i=0;i<arr.length;i++){3     document.write(arr[i]);4 }

Seit der offiziellen Veröffentlichung von ES5 können Sie die integrierte forEach-Methode verwenden, um das Array zu durchqueren:

myArray.forEach(function (value) {
     console.log(value);});实际上forEach有三个参数  分别为  值  下标  数组本身 于是我们有[].forEach(function(value, index, array) {    // ...});
对比jQuery中的$.each方法：
$.each([], function(index, value, array) {    // ...});

Sie werden feststellen, dass der erste und der zweite Parameter genau entgegengesetzt sind. Bitte achten Sie darauf und merken Sie sich diese nicht falsch. Dasselbe gilt später auch für ähnliche Methoden, etwa $.map.

$.each(Array, function(i, value) {
     Array   //数组     this;      //this指向当前元素
    i;         //i表示Array当前下标
    value;     //value表示Array当前元素});
 
var arr = [ "one", "two", "three", "four"];    
$.each(arr, function(){    
   alert(this);    
});    
 
//上面这个each输出的结果分别为：one,two,three,four  
var obj = { one:1, two:2, three:3, four:4};    
$.each(obj, function(key, val) {    
   alert(obj[key]);          
});  
//这个each就有更厉害了，能循环每一个属性
//输出结果为：1   2  3  4

Zum Beispiel:

arr.forEach(function(i,j,v){
    document.write("<br />数组的值"+i+
                     "<br />数组的下标"+j+","+
                     "<br />数组本身"+v+"---")
})

Dieser Code sieht prägnanter aus, aber diese Methode weist auch kleine Mängel auf :

forEach ist nicht flexibel genug

arr.forEach ist nicht einfach zu verwenden. Sie können die Schleife nicht mit der break-Anweisung unterbrechen und auch nicht mit der return-Anweisung zum Äußeren zurückkehren Funktion.

Natürlich wäre es auch toll, wenn Sie einfach die for-Schleifensyntax verwenden würden, um die Array-Elemente zu durchlaufen.

Dann sollten Sie unbedingt eine For-In-Schleife ausprobieren:

for (var index in myArray) { // 千万别这样做  console.log(myArray[index]);
}

In diesem Code ist der dem Index zugewiesene Wert keine tatsächliche Zahl, sondern die Zeichenfolge „0“. „1“, „2“, zu diesem Zeitpunkt ist es sehr wahrscheinlich, dass String-Arithmetikberechnungen unbeabsichtigt durchgeführt werden, zum Beispiel: „2“ + 1 == „21“, was große Unannehmlichkeiten für den Codierungsprozess mit sich bringt.

Kurz gesagt,

for-in ist für gewöhnliche Objekte konzipiert. Sie können durchqueren, um Schlüssel vom Typ String zu erhalten, daher ist es nicht für das Durchlaufen von Arrays geeignet.

for...in eignet sich nicht zum Durchlaufen von Arrays.

for...in durchläuft benutzerdefinierte Eigenschaften oder sogar Prototypeigenschaften. In einigen Fällen ist der Index eine Zeichenfolge In einigen Fällen ist es nicht einmal möglich, sequenziell zu durchlaufen.

Leistungsstarke for-of-Schleife

ES6 zerstört den von Ihnen geschriebenen JS-Code nicht. Es scheint, dass Tausende von Websites auf For-In-Schleifen angewiesen sind, und einige von ihnen verwenden sie sogar zum Durchqueren von Arrays. Das Hinzufügen von Array-Traversal-Unterstützung durch das Korrigieren von For-In-Schleifen würde dies noch verwirrender machen, daher hat das Standardskomitee eine neue Schleifensyntax in ES6 hinzugefügt, um das aktuelle Problem zu lösen.

Wir brauchen eine bequemere Möglichkeit, das Array zu durchqueren, so einfach und benutzerfreundlich wie for...in, um das Objekt zu durchqueren, das heißt for...of

so :

for (var value of myArray) {
  console.log(value);
}

Ja, kommt Ihnen diese Schleife im Vergleich zur vorherigen integrierten Methode bekannt vor? Nun, wir werden untersuchen, welche leistungsstarken Funktionen sich unter dem Erscheinungsbild der for-of-Schleife verbergen. Denken Sie vorerst daran:

Dies ist die prägnanteste und direkteste Syntax zum Durchlaufen von Array-Elementen

Diese Methode vermeidet alle Fallstricke von For-In-Schleifen

Im Gegensatz zu forEach( ), kann es korrekt auf Break-, Continue- und Return-Anweisungen reagieren

Die For-In-Schleife wird zum Durchlaufen von Objekteigenschaften verwendet.

Die for-of-Schleife wird verwendet, um Daten zu durchlaufen – beispielsweise Werte in einem Array.

Aber es ist nicht nur das!

Die for-of-Schleife kann auch andere Sammlungen durchlaufen

Die for-of-Schleife unterstützt nicht nur Arrays, sondern auch die meisten arrayähnlichen Objekte, wie z. B. DOM-NodeList-Objekte.

Die for-of-Schleife unterstützt auch die Zeichenfolgendurchquerung, die die Zeichenfolge als eine Reihe von Unicode-Zeichen durchläuft:

for (var value of myArray) {
  console.log(value);
}

Sie unterstützt auch die Durchquerung von Map- und Set-Objekten.

$.map(array,function)

Syntaxanalyse: Rufen Sie für jedes Element im Array die Funktionsfunktion zur Verarbeitung auf und geben Sie dann das Ergebnis zurück, um ein neues Array zu erhalten .

Erklärung anhand eines Beispiels: Multiplizieren Sie jedes Element im Array mit 2 und geben Sie ein neues Array zurück. Der Code lautet wie folgt:

<html>
<head>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
var arr = [2,3,6];
var arr2 = $.map(arr,function(item){return item*2;});
for(var i=0,len=arr2.length;i<len;i++){
 document.write(arr2[i]+"<br />");//结果为 4 6 12
}
</script>
</head>
</html>

Zusätzliche Erklärung: item repräsentiert jedes Element. Dies ist ein formaler Parameter und kann durch andere ersetzt werden.

Der Lehrer in diesem Video erklärt die Dinge auf einfache und leicht verständliche Weise, mit klarer Organisation, schichtweiser Analyse, ineinandergreifenden Verknüpfungen, strenger Argumentation und strenger Struktur. Er nutzt die logische Kraft des Denkens, um die Aufmerksamkeit der Schüler zu erregen, und nutzt Vernunft, um den Unterrichtsprozess im Klassenzimmer zu steuern. Die Lehrfähigkeiten sind voller Witz. Verschiedene Lehrmethoden und -techniken sind leicht verfügbar und können ohne jede Spur von Feinschliff frei und angemessen eingesetzt werden.

Das obige ist der detaillierte Inhalt vonDark Horse Programmer JavaScript-Video-Ressourcenfreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!