Video-Tutorials zur Verbesserung der JavaScript-Grundlagen und Empfehlungen zum Quellcode

JavaScript ist eine wörtliche Skriptsprache. Es handelt sich um eine dynamisch typisierte, schwach typisierte, prototypbasierte Sprache mit integrierter Unterstützung für Typen. Sein Interpreter heißt JavaScript-Engine, ist Teil des Browsers und wird häufig in clientseitigen Skriptsprachen verwendet. Er wurde erstmals auf HTML-Webseiten (einer Anwendung unter Standard Universal Markup Language) verwendet, um HTML-Webseiten dynamische Funktionen hinzuzufügen . .

Der Inhalt des „JavaScript Basics Enhancement Video Tutorial“ konzentriert sich auf die Erläuterung der Grundkenntnisse von JavaScript, einschließlich der grundlegenden Syntax der Programmierung, hauptsächlich einschließlich Variablen, Datentypen, Typkonvertierungen, Flusskontrollanweisungen, Arrays, einfachen Typen usw komplexe Typen Einführung in Unterscheidungen und Objekte sowie Festigung der grundlegenden Grammatik anhand von Fällen. Diese Videos entführen Sie in die wunderbare Welt von JavaScript.

Adresse für die Videowiedergabe: http://www.php.cn/course/543.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-Traversierung 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 zum Traversieren des Arrays verwenden:

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 hat auch einen kleinen Fehler:

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 zur äußeren Funktion zurückkehren.

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 ist lebhaft und die Atmosphäre im Klassenzimmer ist recht aktiv, was die Begeisterung der Schüler für das Lernen im Klassenzimmer voll mobilisieren kann. Die Vorträge achten auf Details und erläutern kleine Wissenspunkte ausführlich, ohne Wissenspunkte auszulassen.

Quellcode der Kursunterlagen: http://www.php.cn/xiazai/code/1812

Das obige ist der detaillierte Inhalt vonVideo-Tutorials zur Verbesserung der JavaScript-Grundlagen und Empfehlungen zum Quellcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!