Tutoriels vidéo d'amélioration des bases de JavaScript et recommandations de code source

JavaScript est un langage de script littéral. Il s'agit d'un langage basé sur un prototype à typage dynamique, faiblement typé, avec prise en charge intégrée des types. Son interpréteur s'appelle le moteur JavaScript, qui fait partie du navigateur et est largement utilisé dans les langages de script côté client. Il a été utilisé pour la première fois sur les pages Web HTML (une application sous Standard Universal Markup Language) pour ajouter des fonctions dynamiques aux pages Web HTML. .

Le contenu du "Tutoriel vidéo de renforcement des bases de JavaScript" se concentre sur l'explication des connaissances de base de JavaScript, impliquant la syntaxe de base de la programmation, comprenant principalement les variables, les types de données, les conversions de types, les instructions de contrôle de flux, les tableaux, les types simples et types complexes. Introduction aux distinctions et aux objets, et consolidation de la grammaire de base à travers des cas. Cette série de vidéos vous emmènera dans le monde merveilleux de JavaScript.

Adresse de lecture vidéo : http://www.php.cn/course/543.html

La difficulté de cela la vidéo est une boucle de tableau, testant la capacité logique. Ce qui suit résume divers exemples de boucles :

Comment parcourir les éléments du tableau ? Lorsque JavaScript est apparu pour la première fois il y a 20 ans, vous pouviez implémenter la traversée de tableau comme ceci :

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

Depuis la sortie officielle d'ES5, vous pouvez utiliser la méthode forEach intégrée pour parcourir le tableau :

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

Vous constaterez que les premier et deuxième paramètres sont exactement opposés. Veuillez faire attention et ne vous en souvenez pas mal. La même chose est vraie pour des méthodes similaires ultérieures, telles que $.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

Par exemple :

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

Ce code semble plus concis, mais cette méthode a aussi un petit défaut :

forEach n'est pas assez flexible

arr.forEach n'est pas facile à utiliser. Vous ne pouvez pas utiliser l'instruction break pour interrompre la boucle, ni l'instruction return pour revenir à la fonction externe.

Bien sûr, ce serait également bien si vous utilisiez simplement la syntaxe de la boucle for pour parcourir les éléments du tableau.

Ensuite, vous voulez absolument essayer une boucle for-in :

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

Dans ce code, la valeur attribuée à l'index n'est pas un nombre réel, mais la chaîne "0" , "1", "2", à ce stade, il est très probable que des calculs arithmétiques de chaînes soient effectués involontairement, par exemple : "2" + 1 == "21", ce qui apporte de gros inconvénients au processus de codage.

En bref,

for-in est conçu pour les objets ordinaires. Vous pouvez parcourir pour obtenir des clés de type chaîne, il ne convient donc pas à la traversée de tableaux.

for...in ne convient pas pour parcourir des tableaux

for...in traversera des propriétés personnalisées ou même des propriétés prototypes. L'index est une chaîne au lieu d'une valeur numérique dans certains. Dans certains cas, ce n'est même pas possible. Traverser séquentiellement

Une puissante boucle for-of

ES6 ne détruira pas le code JS que vous avez écrit. Il semble que des milliers de sites Web s'appuient sur des boucles for-in, et certains d'entre eux les utilisent même pour parcourir des tableaux. L'ajout de la prise en charge de la traversée de tableau en corrigeant les boucles for-in rendrait cela encore plus déroutant, c'est pourquoi le comité des normes a ajouté une nouvelle syntaxe de boucle dans ES6 pour résoudre le problème actuel.

Nous avons besoin d'un moyen plus pratique de parcourir le tableau, aussi simple et facile à utiliser que pour...in pour parcourir l'objet, c'est-à-dire pour...de

comme comme ça :

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

Oui, cette boucle vous semble-t-elle familière par rapport à la méthode intégrée précédente ? Eh bien, nous allons explorer quelles fonctions puissantes se cachent sous l’apparence de la boucle for-of. Pour l'instant, n'oubliez pas :

Il s'agit de la syntaxe la plus concise et la plus directe pour parcourir les éléments d'un tableau

Cette méthode évite tous les pièges des boucles for-in

Contrairement à forEach( ), il peut répondre correctement aux instructions break, continue et return

La boucle for-in est utilisée pour parcourir les propriétés des objets.

La boucle for-of est utilisée pour parcourir des données, telles que les valeurs d'un tableau.

Mais il n’y a pas que ça !

La boucle for-of peut également parcourir d'autres collections

La boucle for-of prend non seulement en charge les tableaux, mais prend également en charge la plupart des objets de type tableau, tels que les objets DOM NodeList.

La boucle for-of prend également en charge le parcours de chaîne, qui traverse la chaîne comme une série de caractères Unicode :

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

Elle prend également en charge le parcours d'objets Map et Set.

$.map(array,function)

Analyse syntaxique : pour chaque élément du tableau, appelez la fonction function pour le traitement, puis renvoyez le résultat pour obtenir un nouveau tableau .

Explication par exemple : multipliez chaque élément du tableau par 2 et retournez un nouveau tableau. Le code est le suivant

<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>

Explication supplémentaire : item représente chaque élément Il s'agit d'un paramètre formel et peut être remplacé par d'autres.

L'enseignant dans cette vidéo est vivant et l'atmosphère de la classe est assez active, ce qui peut pleinement mobiliser l'enthousiasme des élèves pour apprendre en classe. Les conférences prêtent attention aux détails et expliquent en détail les petits points de connaissance sans omettre aucun point de connaissance.

Code source du didacticiel : http://www.php.cn/xiazai/code/1812

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!