Partage de ressources vidéo JavaScript du programmeur Dark Horse

Dark Horse Programmer JavaScript Video Tutorial" vous présentera JavaScript en détail. JavaScript est un langage de script littéral et un langage de script largement utilisé dans le développement Web côté client. Actuellement utilisé par des millions de pages Web pour améliorer la conception, valider des formulaires, détecter les navigateurs, créer des cookies, etc.

Adresse de lecture vidéo : http://www.php.cn/course/500.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 présente également de petits défauts :

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 à l'extérieur. fonction.

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 explique les choses en termes simples et faciles à comprendre, avec une organisation claire, une analyse couche par couche, des liens imbriqués, une argumentation rigoureuse et une structure rigoureuse. Il utilise la puissance logique de. penser pour attirer l'attention des élèves et utiliser la raison pour contrôler le processus d'enseignement en classe. Les compétences pédagogiques sont pleines d'esprit. Diverses méthodes et techniques d'enseignement sont facilement disponibles et peuvent être utilisées librement et de manière appropriée sans aucune trace de polissage.

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!