Javascript traversant un tableau. Toutes les façons de parcourir un tableau en JavaScript. méthode forEach et méthodes associées

Un article dans lequel nous examinerons des exemples d'utilisation de jQuery pour chaque fonction et méthode.

La bibliothèque jQuery possède 2 entités différentes appelées chacune.

La première (jQuery.each) est une fonction jQuery universelle qui peut être utilisée pour parcourir les éléments d'un tableau ou d'un objet.

La seconde (chacune) est une méthode appliquée à un ensemble d’éléments pour les parcourir en boucle.

Chaque boucle (jQuery.each). Exemples d'utilisation

Chaque syntaxe de fonction :

// tableau ou objet - un tableau ou un objet dont les éléments ou propriétés doivent être itérés // rappel - une fonction qui sera exécutée pour chaque élément du tableau ou de la propriété de l'objet $.each(array or object,callback);

Voyons comment travailler avec chaque fonction à l'aide d'exemples.

Exemple n°1. Dans celui-ci, nous allons parcourir tous les éléments du tableau.

// tableau composé de 3 lignes var arr = ["Car","Truck","Bus"]; // parcourons le tableau arr $.each(arr,function(index,value)( // actions qui seront effectuées pour chaque élément du tableau // l'index est l'index actuel de l'élément du tableau (numéro) // value est la valeur de l'élément actuel du tableau //afficher l'index et la valeur du tableau sur la console console.log("Index: " + index + "; Value: " + value); )); /* Résultat (dans la console) : Index : 0; Valeur : Indice automobile : 1 ; Valeur : Indice des camions : 2 ; Valeur : Autobus */

Dans le code ci-dessus, la fonction each est utilisée pour parcourir le tableau. La fonction a 2 paramètres obligatoires. Le premier paramètre est l'entité (tableau ou objet) dont les éléments (propriétés) doivent être itérés. Dans ce cas, il s’agit du tableau arr. Le deuxième paramètre est une fonction de rappel qui sera exécutée pour chaque élément (dans ce cas) du tableau. Il dispose de 2 paramètres, qui sont accessibles à l'intérieur via les variables correspondantes. Le premier paramètre est le numéro de série de l'élément (en partant de 0). Le deuxième paramètre est la valeur de l'élément actuel du tableau.

Exemple n°2. Dans cet exemple, nous allons parcourir toutes les propriétés d’un objet.

// objet smartphone ayant 5 propriétés var smartphone = ( "name": "LG G5 se", "year": "2016", "screen-size": "5.3", "screen-resolution": "2560 x 1440 " , "os" : "Android 6.0 (Guimauve)" ); // parcourir l'objet smartphone $.each(smartphone, function(key, value) ( ​​​​​​​// actions qui seront effectuées pour chaque propriété de l'objet // key - le nom actuel de la propriété du tableau // valeur - la valeur de la propriété actuelle de l'objet // affiche le nom de la propriété et sa valeur à la console console.log("Property: " +key + "; Value: " + value); )); /* Résultat (dans la console) : Propriété : nom ; Valeur : LG G5 se Propriété : année ; Valeur : 2016 Propriété : taille de l'écran ; Valeur : 5,3 Propriété : résolution d'écran ; Valeur : 2560 x 1440 Propriété : os ; Valeur : Android 6.0 (Guimauve) */

La fonction each peut être utilisée pour parcourir des objets JavaScript. La seule différence dans son utilisation est que les paramètres de la fonction de rappel ont des significations différentes. Le premier paramètre stocke le nom de la propriété de l'objet et le second la valeur de cette propriété.

Exemple n°3. Dans celui-ci, nous énumérerons une structure plus complexe (voyons comment utiliser nested each ).

// objet composé de 2 propriétés. Chaque propriété de cet objet a pour valeur un tableau dont les éléments sont également des objets var articles = ( "Bootstrap": [ ("id": "1", "title": "Introduction"), ("id" :"2" , "title":"Comment installer"), ("id":"3", "title":"Grille") ], "JavaScript": [ ("id":"4", " title":"Bases "), ("id":"5", "title":"Sélection des éléments") ] ); $.each(articles,fonction(clé,données) ( console.log("Section : " + clé); $.each(données, fonction(index,valeur) ( ​​console.log("Article : id = " + valeur ["id"] + "; Titre = "+ valeur["titre"]); )); )); /* Résultat : Section : Article Bootstrap : id = 1; Titre = Article d'introduction : id = 2 ; Titre = Comment installer l'article : id = 3 ; Titre = Section Grille : Article JavaScript : id = 4 ; Titre = Article de base : id = 5 ; Nom = Sélection des éléments */

Comment interrompre chacun (sortir de la boucle) ?

La rupture de chaque boucle se fait à l'aide de l'instruction return, qui doit renvoyer false .

Par exemple, interrompons l'exécution de chaque boucle après avoir trouvé le chiffre 7 dans le tableau arr :

// tableau composé de 5 nombres var arr = ; // nombre à trouver var find = 7; // parcourons le tableau arr $.each(arr, function (index, value) ( ​​​​​​// si le nombre requis est trouvé, alors.. if (value === find) ( // imprimons-le dans le console console.log("Hourra ! Le numéro " + find + " a été trouvé ! Ce numéro a un index : " + index); // interrompt la boucle return false; ) else ( // sinon affiche le numéro actuel sur la console console.log("Numéro actuel : " + valeur); ) )); /* Résultat (dans la console) : Numéro actuel : 5 Numéro actuel : 4 Hourra ! Numéro 7 trouvé ! Ce numéro a un indice : 2 */

Comment passer à l'itération suivante (chacune continue) ?

Dans chacun, l'interruption de l'itération en cours et le passage à la suivante se font à l'aide de l'instruction return, qui doit avoir une valeur autre que false.

// tableau composé de nombres var arr = ; // un tableau qui doit contenir tous les éléments du tableau arr, sauf les nombres pairs var newarr = ; // parcourt le tableau arr $.each(arr, function (index, value) ( ​​​​​​// si l'élément est pair, puis sautez-le if (value % 2 === 0) ( // interrompt l'itération en cours et passez au suivant return; ) // ajoute une valeur au tableau newarr newarr.push(value); )); console.log("Tableau initial (arr) : " + arr.join()); console.log("Tableau résultant (newarr) : " + newarr.join()); /* Résultat (dans la console) : Tableau initial (arr) : 3,5,4,9,17,19,30,35,40 Tableau résultant (newarr) : 3,5,9,17,19,35 */

Parcourir les éléments actuels (.each)

Chaque syntaxe de méthode (s'applique uniquement aux éléments sélectionnés) :

.each(fonction); // fonction - une fonction qui sera exécutée pour chaque élément de l'objet courant

Voyons comment fonctionne la méthode .each en utilisant l'exemple suivant (parcourons les éléments div) :

// après avoir chargé le DOM de la page, exécutez $(function())( // parcourez les éléments div de la page $("div").each(function (index, element) ( // index (number) - l'index actuel de l'itération (cycle) // cette valeur est un nombre // commence à compter à partir de 0 et se termine par le nombre d'éléments dans l'ensemble actuel moins 1 // élément - contient une référence DOM à la console de l'élément actuel. log("Indice de l'élément Div : " + index + "; identifiant de l'élément = " + $(element).attr("id")); )); )); // Résultat : // Index de l'élément div : 0; identifiant de l'élément = id1 // index de l'élément div : 1 ; identifiant de l'élément = id2 // index de l'élément div : 2 ; identifiant de l'élément = id3

Dans l'exemple ci-dessus, la méthode each utilise l'ensemble actuel (les éléments sélectionnés via le sélecteur $("div")). Le gestionnaire de méthode each est toujours une fonction qui sera exécutée pour chaque élément de l'ensemble actuel (dans ce cas, pour chaque élément div). Cette fonction dispose de 2 paramètres optionnels. L'un d'eux (index) est le numéro de série de l'itération en cours, et le second (élément) est un lien DOM vers l'élément actuel. De plus, le mot-clé this est disponible dans la fonction qui, comme le deuxième paramètre, contient une référence DOM à l'élément actuel.

Par exemple, affichons sur la console la valeur de l'attribut href pour tous les éléments a de la page :

$("a").each(function() ( console.log($(this).attr("href")); ));

$("a").each(function() ( var link = $(this).attr("href"); if ((link.indexOf("http://") == 0) || (lien .indexOf("https://") == 0)) ( console.log("href links = " + link); ) )); // Si les liens suivants se trouvent sur la page : // Yandex // Comment fonctionne JavaScript ? // Bootstrap // Ensuite, dans la console, nous verrons le résultat suivant : // https://www.yandex.ru/ // http://getbootstrap.com/

Par exemple, regardons comment organiser une boucle each sur les éléments DOM qui portent le nom class (parcourons tous les éléments de la même classe).

Calcul sur carte unique Raspberry pi Intel Galileo Gen2 19 $ Pine A64 Plus // utilisant la fonction jQuery.each ($.each) $.each($(".name"),function(index,data) ( console.log( "Ordinal nombre : " + index + " ; Contenu : " +$(data).text()); )); // en utilisant la méthode jQuery .each $(".name").each(function(index,data) ( console.log("Ordinal: " + index + " ; Content: " +$(data).text( ) ); )); // Nous recevrons la réponse suivante : // Numéro de séquence : 0 ; Contenu : Raspberry pi // Numéro de séquence : 1 ; Contenu : Intel Galileo Gen2 // Numéro de séquence : 2 ; Contenu : Pin A64 Plus

Par exemple, voyons comment parcourir tous les éléments d’une page.

$("*").each(function() ( console.log(this); ));

Par exemple, affichons la valeur de tous les éléments d'entrée sur la page.

$("input").each(function() ( console.log($(this).val()); ));

Par exemple, parcourons tous les éléments enfants situés dans ul avec id="myList" (chaque enfant).

• HTML
• Javascript

$("ul#myList").children().each(function())( console.log($(this).text()); )); // Résultat : // HTML // CSS // JavaScript

Examinons un moyen de déterminer le dernier index (élément) dans chaque méthode de jQuery.

// sélectionne les éléments var maListe = $("ul li"); // détermine le nombre d'éléments dans la sélection var total = myList.length; // parcourir les éléments sélectionnés myList.each(function(index) ( if (index === total - 1) ( // c'est le dernier élément de la sélection ) ));

22 réponses

Après avoir exécuté ce test avec la plupart des navigateurs modernes...

Actuellement la forme de boucle la plus rapide (et à mon avis la plus évidente syntaxiquement).

standard pour la boucle mise en cache de longueur

Pour (var i = 0, len = myArray.length; i< len; i++) { }

Je dirais que c'est définitivement un cas dans lequel j'applaudis les développeurs de moteurs JavaScript. Le temps d'exécution doit être optimisé pour plus de clarté et non de commodité.

Dès juin 2016, plusieurs tests dans le dernier Chrome (71% du marché des navigateurs en mai 2016 et en hausse) :

• La boucle la plus rapide est la boucle en boucle, avec et sans longueur de cache, qui offre des performances très similaires. (Une boucle for avec une longueur mise en cache produit parfois de meilleurs résultats qu'une boucle qui n'est pas mise en cache, mais la différence est presque négligeable, ce qui signifie que le moteur peut être optimisé en faveur de la boucle standard et peut-être la plus simple sans cache).
• La boucle while avec décréments était environ 1,5 fois plus lente que la boucle for.
• Une boucle utilisant une fonction de rappel (par exemple forEach standard) était environ 10 fois plus lente qu'une boucle for.

Je pense que ce fil est trop ancien et que les programmeurs estiment qu'ils doivent mettre en cache la longueur ou utiliser des intersections de diminution arrière pour obtenir de meilleures performances, en écrivant un code moins pointilleux et plus sujet aux erreurs qu'une simple boucle for. Je recommande donc :

Si votre application parcourt de nombreux éléments ou si votre code de boucle se trouve dans une fonction fréquemment utilisée, une boucle droite est la réponse :

Pour (var je = 0; je< arr.length; i++) { // Do stuff with arr[i] or i }

Si votre application ne parcourt pas vraiment beaucoup d'éléments ou si vous avez juste besoin de faire de petites itérations ici et là, l'utilisation du rappel standard forEach ou de toute fonction similaire de la bibliothèque JS de votre choix peut être plus propre et moins sujette aux erreurs puisque l'index La portée de la variable est privée et vous n'avez pas besoin d'utiliser des parenthèses qui accèdent directement à la valeur du tableau :

Arr.forEach(function(value, index) ( // Faire des trucs avec value ou index ));

Si vous avez vraiment besoin d'écraser quelques millisecondes lors d'une itération sur des milliards de lignes et que la longueur du tableau ne changera pas au cours du processus, vous pouvez envisager de mettre en cache la longueur dans une boucle for. Même si je pense que ce n'est vraiment pas nécessaire de nos jours :

Pour (var i = 0, len = arr.length; i< len; i++) { // Do stuff with arr[i] }

Nous ne sommes qu'en 2018, donc une mise à jour pourrait être la bonne...

Et je dois vraiment être en désaccord avec la réponse acceptée. Cela dépend des différents navigateurs. certains font forEach plus rapidement, certains for-loop et certains while testent toutes les méthodes http://jsben.ch/mW36e

Arr.forEach(a => ( // ... )

et comme vous pouvez voir beaucoup de boucles for(a = 0;...) comme for(a = 0;...), il convient de mentionner que sans variables, "var" sera défini globalement et cela peut avoir un impact significatif vitesse, donc ce sera lent.

var arr = arr = new Array(11111111).fill(255); var bancs = [ [ "vide", () =>< l; a++); }] , ["for-loop", () =>( for(var a = 0, l = arr.length; a< l; ++a) var b = arr[a] + 1; }] , ["for-loop++", () =>( for(var a = 0, l = arr.length; a< l; a++) var b = arr[a] + 1; }] , ["for-loop - arr.length", () =>( pour (var une = 0; une< arr.length; ++a) var b = arr[a] + 1; }] , ["reverse for-loop", () =>( for(var a = arr.length - 1; a >= 0; --a) var b = arr[a] + 1; )] ,["while-loop", () => ( var a = 0 , l = arr.length; while(a< l) { var b = arr[a] + 1; ++a; } }] , ["reverse-do-while-loop", () =>( var a = arr.length - 1; // ATTENTION faire ( var b = arr[a] + 1; ) while(a--); )] , ["forEach", () => ( arr.forEach( a => ( var b = a + 1; )); )], ["pour..in (seulement 3,3%)", () => ( var ar = arr.slice(0,arr.length/33) ; for(const a in ar) ( var b = a + 1; ) )] , ["Dispositif Duff", () => ( var i = 0; var r = arr.length % 8; var n = (arr .length - r) / 8; si (r > 0) faire ( var b = arr + 1; ) tandis que (--r); si (n > 0) faire ( var b = arr[i] + 1; var c = arr + 1 ; var d = arr + 1 ; var e = arr + 1 ; var f = arr + 1 ; var g = arr + 1 ; var h = arr + 1 ; var k = arr + 1 ; i = --n >>> 3; ) while (n); )] , ["Appareil Duff négatif", () => ( var r = arr.length % 8; var n = (arr.length-r) / 8 ; ///Math.floor(arr.length / 8); var i = arr.length ; // -1; while(r)( var b = arr[--i] + 1; --r; ) while (n)( var b = arr[i] + 1; var c = arr + 1; var d = arr + 1; var e = arr + 1; var f = arr + 1; var g = arr + 1; var h = arr + 1 ; var j = arr + 1 ; i = --n >>> 3 ; ) )]]; function bench(title, f) ( var t0 = performance.now(); var res = f(); return performance.now() - t0; // console.log("$(title) a pris $(t1-t0 ) msec"); ) var globalVarTime = bench("for-loop sans "var"", () => ( // Ici si vous oubliez de mettre "var" pour que les variables" soient globales for(a = 0, l =arr.longueur;a< l; ++a) var b = arr[a] + 1; }); var times = benches.map(function(a) { arr = new Array(11111111).fill(255); return }).sort((a,b) =>un B); var max = fois ; times = times.map(a => (a = (a/max)*100; return a; )); var template = (titre, heure, n) => "" + "$(titre) " + " $(Number(time.toFixed(3)))msec" + ""; var strRes = times.map(t => template(...t)).join("\n") + "

boucle for sans "var" $(globalVarTime) msec."; var $container = document.getElementById("container"); $container.innerHTML = strRes; body ( color:#fff; background:#333; font-family :helvetica; ) corps > div > div ( clear:both ) corps > div > div > span ( float:left; width:43%; margin:3px 0; text-align:right; ) body > div > div > span :nth-child(2) ( text-align:left; background:darkorange; animation:showup .37s .111s; -webkit-animation:showup .37s .111s; ) @keyframes showup ( from ( width:0; ) ) Affichage de @-webkit-keyframes ( à partir de ( width:0; ) )

2014 Il y a quelque temps

Pensez logiquement.

Regarde ça

Pour (var index = 0 , longueur = tableau.longueur ; index< length ; index++) { //do stuff }

• Vous devez créer au moins 2 variables (index, longueur)
• Il faut vérifier si l'indicateur de longueur est inférieur à
• L'indice doit être augmenté
• la boucle for a 3 paramètres

Maintenant, dites-moi pourquoi cela devrait être plus rapide que :

Var longueur = tableau.longueur; while(--length) ( //ou length-- //faire des trucs)

• Une variable
• Pas de chèques
• l'indice diminue (les machines préfèrent cela)
• Tandis que n'a qu'un seul paramètre

J'étais complètement confus lorsque Chrome 28 a montré que la boucle for était plus rapide que le temps. Cela devrait être quelque chose comme

"Eh bien, tout le monde utilise une boucle for, concentrons-nous là-dessus pour Chrome."

Mais maintenant, en 2014, la boucle while revient dans Chrome. c'est 2x plus rapide, dans les autres/anciens navigateurs, c'était toujours plus rapide.

J'ai fait de nouveaux tests récemment. Maintenant, dans le monde réel, ces shortcodes ne valent rien et jsperf ne peut pas réellement exécuter correctement la boucle while car il doit recréer array.length, ce qui prend également du temps.

NE PEUT PAS obtenir la vitesse réelle de la boucle while sur jsperf.

vous devez créer votre propre fonction et vérifier cela en utilisant window.performance.now()

Et oui... il n'y a aucun moyen pour une boucle while d'être plus rapide.

Le vrai problème est le temps réel de manipulation/lecture/temps de dessin ou peu importe comment vous voulez l'appeler.

Par exemple, j'ai une scène de canevas dans laquelle je dois calculer les coordonnées et les collisions... cela se fait entre 10 et 200 microsecondes (pas en millisecondes). il faut en fait plusieurs millisecondes pour tout faire. Comme dans DOM.

Il existe un autre moyen très efficace d'utiliser la boucle dans certains cas... par exemple pour copier/cloner un tableau

For(var i = array.length; i > 0; arrayCopy[ --i ] = array[ i ] // faire des trucs);

Veuillez noter les réglages des paramètres :

• Identique à la boucle while. Je n'utilise qu'une seule variable
• Vous devez vérifier si l'index est supérieur à 0 ;
• Comme vous pouvez le voir, cette approche est différente de la boucle habituelle que tout le monde utilise, puisque je fais des choses à l'intérieur du 3ème paramètre, et que je décrémente également directement à l'intérieur du tableau.

On dit que cela confirme que des machines comme

a écrit que je pensais le rendre un peu plus court et supprimer certains éléments inutiles et j'ai écrit celui-ci en utilisant le même style :

For(var i = array.length ; i-- ; arrayCopy[ i ] = array[ i ] // faire des trucs);

Même si c'est plus court, il semble que l'utilisation de i ralentisse à nouveau tout. C'est 1/5 plus lent que la précédente boucle for et while.

Note: ; très important après pour looo sans ()

Même si je viens de vous dire que jsperf n'est pas le meilleur moyen de tester des scripts. J'ai ajouté 2 boucles ici.

Et voici une autre réponse sur les performances en javascript

Cette réponse devrait montrer des méthodes performantes d'écriture de javascript. Donc, si vous ne pouvez pas lire ceci, demandez et vous obtiendrez une réponse ou lisez un livre sur javascript http://www.ecma-international.org/ecma-262/5.1/

La dernière révision du test que j'ai préparé (en réutilisant un ancien) montre une chose.

La longueur du cache n'est pas si importante, mais cela ne fait pas de mal.

Chaque première exécution du test lié ci-dessus (dans l'onglet nouvellement ouvert) donne les meilleurs résultats pour les 4 derniers fragments (3ème, 5ème, 7ème et 10ème dans les graphiques) dans Chrome, Opera et Firefox sur ma Debian Squeeze 64 bits ( mon matériel de bureau). Les analyses suivantes donnent un résultat complètement différent.

Les conclusions sur les performances sont simples :

• Allez dans une boucle for (en avant) et vérifiez avec !== à la place< .
• Si vous n'avez pas besoin de réutiliser le tableau plus tard, une boucle avec une longueur réduite et un changement de tableau destructif (shift()) est également efficace.

Actuellement (2011.10), le modèle ci-dessous semble être le plus rapide.

Pour (var i = 0, len = arr.length; i !== len; i++) ( ... )

N'oubliez pas que la mise en cache de arr.length n'est pas critique ici, vous pouvez donc simplement tester i !== arr.length et il n'y aura pas d'impact sur les performances, mais vous obtiendrez un code plus court.

PS : je sais que dans un fragment avec shift() son résultat peut être utilisé au lieu d'accéder au 0ème élément, mais j'ai en quelque sorte oublié cela après avoir réutilisé la révision précédente (qui avait la mauvaise valeur lors des boucles), et plus tard je n'ai pas voulu perdre les résultats déjà obtenus.

« Meilleur » comme performance pure ? ou performance ET?

La "meilleure" performance pure est celle qui utilise le cache et l'opérateur de préfixe ++ (mes données : http://jsperf.com/caching-array-length/189)

Pour (var i = 0, len = myArray.length; i< len; ++i) { // blah blah }

Je dirais qu'une boucle sans cache constitue le meilleur équilibre entre le temps d'exécution et le temps de lecture du programmeur. Chaque programmeur commençant par C/C++/Java ne dépensera pas de MS pour lire ceci

Pour(var je=0; je< arr.length; i++){ // blah blah }

** cache la longueur du tableau à l'intérieur de la boucle, quelques secondes s'écouleront. Cela dépend des éléments du tableau, s'il y a plus d'éléments dans le tableau, il y a une grande différence concernant le temps Ms*

SArr ; //Tableau; for(var i = 0 ; i = 0) ( doSomething(array[i]); )

Si l’ordre de priorité est important, utilisez cette approche.

Soit ii = array.length; soit je = 0 ; alors que je< ii) { doSomething(array[i]); ++i; }

J'écris toujours dans le premier style.

Même si le compilateur est suffisamment intelligent pour l'optimiser pour les tableaux, est-il toujours intelligent si nous utilisons ici DOMNodeList ou un objet complexe avec une longueur calculée ?

Je sais que la question concerne les tableaux, mais je pense que c'est une bonne pratique d'écrire toutes vos boucles dans le même style.

Var arr = ; // Le tableau var i = 0; alors que je< arr.length) { // Do something with arr[i] i++; }

i++ est plus rapide que ++i, --i et i -

Bonjour! Dans la dernière leçon, nous avons examiné ce que sont les objets et pourquoi ils sont nécessaires, et aujourd'hui, nous verrons comment travailler avec les propriétés d'un objet et comment trier réellement toutes ces propriétés. À ces fins, une boucle de propriété for..in est utilisée (vous pouvez en savoir plus sur les boucles en JavaScript).

Boucle pour..in

Syntaxe:

Pour (clé dans obj) ( /* ... actions avec obj ... */ )

La boucle for..in parcourra séquentiellement les propriétés de l'objet obj, en écrivant le nom de chaque propriété dans la clé.

Déclaration d'une variable dans une boucle for (clé var en obj)

Dans cette boucle vous pouvez déclarer la variable clé :

Pour (clé var dans le menu1) ( // ... )

Regardons un exemple d'itération dans les propriétés d'un objet à l'aide d'une boucle for...in :

Var menu = (largeur : 400, hauteur : 300, titre : "Menu Mon" ); for (var key in menu) ( // ce code fonctionnera pour chaque propriété de l'objet // ..et affichera le nom de la propriété et sa valeur en conséquence alert("Key: " + key + " value: " + menu) ; )

Je voudrais attirer votre attention sur le fait que dans l'exemple nous avons utilisé le menu entre crochets. En effet, si nous stockons le nom d'une propriété dans une variable, nous ne pouvons y accéder que via des crochets, mais pas via un point.

Boucle pour…de

Il existe également une nouvelle boucle pour parcourir les objets et les tableaux. Sa syntaxe est très similaire à la boucle for...in, mais les différences sont qu'elle ne génère pas les clés ou les index du tableau, mais ses valeurs. Voici un exemple :

Var menu = (largeur : 400, hauteur : 300, titre : "Menu Mon" ); for (var key of menu) ( // ce code fonctionnera pour chaque propriété de l'objet // ..et affichera la valeur de la propriété en conséquence alert("value: " + key +","); //400, 300, "Menu Mon" )

Nombre de propriétés dans un objet

Mais que se passe-t-il si vous avez besoin de connaître le nombre de propriétés d’un objet ? Comment puis je faire ça?

Malheureusement, il n’existe pas de solutions toutes faites à ce problème.

Le moyen le plus simple consiste à parcourir les propriétés et à calculer comme suit :

Var menu = (largeur : 400, hauteur : 300, titre : "Menu Mon" ); nombre de variables = 0 ; for (clé var dans le menu) ( count++; ) alert("Propriétés totales : " + count);

Résultats

• Pour parcourir les propriétés d'un objet, une boucle de clé est utilisée : for (key in obj).

Tâches Déterminer si un objet est vide

Créez une fonction isEmptyObject(obj) qui renvoie true si l'objet n'a pas de propriétés et false s'il y a au moins une propriété.

Cela devrait fonctionner comme ceci :

Function isEmptyObject(obj) ( /* votre code */ ) var obj = (); alerte(isEmptyObject(obj)); // true obj["8:30"] = "monter"; alerte(isEmptyObject(obj)); // FAUX

Calculer la moyenne arithmétique de toutes les propriétés de l'objet

Il existe un objet salaire avec les salaires. Écrivez un code qui affichera la moyenne arithmétique de tous les salaires.
Si l'objet est vide, le résultat doit être 0.
Par exemple.

Bonjour! Nous continuons à étudier les méthodes de tableau et dans cette leçon, nous examinerons les méthodes d'itération sur un tableau. Ces méthodes vous permettent de parcourir un tableau et d'effectuer certaines actions sur ses éléments. Oui, j'ai oublié de dire que toutes ces méthodes ne sont pas prises en charge dans IE 8. Bien qu'il soit si important maintenant qu'elles ne soient pas prises en charge par ce navigateur, mais quand même, si vous souhaitez la prise en charge d'IE8, alors ES5-shim vous aidera. Et nous continuerons

méthode pour chaque

Cette méthode permet de parcourir un tableau en boucle, mais vous pouvez lui passer une fonction dans laquelle vous pourrez effectuer certaines actions sur les éléments du tableau. Regardons un exemple.

Var mas = ["Banane", "Avocat", "Carotte"]; mas.forEach(function(item, i, mas) ( alert(i + ": " + item + " (array: " + mas + ")"); ));

Ici dans l'exemple, une fonction est passée à la méthode forEach, qui spécifie 3 paramètres :

item — élément du tableau

i - numéro d'élément du tableau

mas est le tableau en cours de traitement.

Cette méthode peut être utilisée à la place d’une boucle for pour parcourir un tableau.

méthode de filtrage

Cette méthode, comme la méthode forEach, est utilisée pour parcourir un tableau et reçoit une fonction comme argument, mais elle vous permet de filtrer le tableau et renvoie un nouveau tableau, qui contient uniquement les éléments pour lesquels la fonction que nous passons à cette méthode retournera vrai.

C'est un peu déroutant, alors regardons cela avec un exemple.

Var mas = ; var positiveNum = mas.filter(function(num) ( return num > 0; )); document.write(positiveNum); // 1,4,3

Dans l'exemple, il y a un tableau avec des nombres et nous devons obtenir un autre tableau qui ne contiendrait que des nombres positifs du tableau d'origine. Pour ce faire, nous appliquons la méthode filter au tableau et appelons une fonction qui vérifiera chaque élément, c'est-à-dire qu'elle renverra tous les nombres positifs et le résultat sera stocké dans un autre tableau, dans l'exemple il s'agit de positiveNum.

méthode cartographique

La méthode map crée un autre tableau, qui sera constitué des résultats de l'appel de la fonction du tableau d'origine, mais dans cette fonction, certaines actions auront lieu sur les éléments du tableau d'origine et le résultat apparaîtra tel quel dans le nouveau tableau. Regardons un exemple, sinon je pense que ce n'est pas du tout clair.

Var mas = ; var newMas = mas.map(function(item) ( return item*item; )); // j'ai obtenu un tableau avec des carrés alert(newMas); // 1,4,9

Dans l'exemple, il existe un tableau initial avec des nombres, la méthode map lui est appliquée, dans laquelle chaque élément du tableau est multiplié par lui-même et le résultat est écrit dans un autre tableau. En conséquence, nous obtenons un tableau avec les carrés des nombres dans le tableau d'origine.

Méthodes chacun/certains

Ces méthodes vérifient si un élément est présent dans le tableau. Ils le font via une fonction qui leur est transmise en tant que paramètre, c'est-à-dire que si cette fonction renvoie vrai, la méthode elle-même retournera vrai. De plus, la méthode each nécessite que chaque élément remplisse la condition de la fonction, et la méthode some nécessite qu'au moins un corresponde. Et comme toujours, voici un exemple pour vous.

Var mas = ; function isPositiv(num) ( return num > 0; ) if(mas.every(isPositiv)) ( document.write("Le tableau ne contient que des nombres positifs"); ) else( document.write("Le tableau contient au moins un nombre négatif "); ) if(mas.some(isPositiv)) ( document.write("Le tableau contient au moins un nombre positif"); ) else ( document.write("Il n'y a aucun nombre positif dans le tableau") ; )

Prenons un exemple : nous avons un tableau avec des nombres positifs et négatifs et nous devons le vérifier pour la présence d'au moins un nombre négatif. Pour ce faire, nous utilisons toutes les méthodes. Nous créons une fonction qui renverra des nombres positifs, puis la transmettrons à la méthode each. Puisque cette méthode renvoie un résultat logique, elle est utilisée dans les instructions conditionnelles. La méthode Every de notre exemple renverra false car il y a des nombres négatifs dans le tableau, mais la méthode some renverra true car il y a au moins un nombre positif dans le tableau.

réduire/réduireDroite

Si vous devez parcourir un tableau, vous pouvez utiliser forEach, for ou for..of.

Si vous devez parcourir un tableau et renvoyer des données pour chaque élément, vous utilisez map.

Les méthodes arr.reduce et arr.reduceRight sont similaires aux méthodes ci-dessus, mais elles sont un peu plus complexes. Ils sont utilisés pour calculer une valeur unique basée sur l'ensemble du tableau.

Syntaxe:

Soit value = arr.reduce(function(previousValue, item, index, array) ( // ... ), );

La fonction est appliquée tour à tour à tous les éléments du tableau et « reporte » son résultat au prochain appel.

Arguments:

• previousValue – le résultat de l'appel précédent de cette fonction, égal à initial lors du premier appel (si initial est passé),
• item – l'élément suivant du tableau,
• index – son index,
• array – le tableau lui-même.

Lorsqu'une fonction est appelée, le résultat de son appel sur l'élément précédent du tableau est passé en premier argument.

Cela semble compliqué, mais cela devient plus simple si vous considérez le premier argument comme « accumulant » le résultat des appels de fonction précédents. Une fois terminé, cela devient le résultat d’une réduction.

Cette méthode est plus simple à comprendre, comme toujours, avec un exemple.

Ici, nous obtenons la somme de tous les éléments du tableau sur une seule ligne :

Soit arr = ; soit result = arr.reduce((sum, current) => sum + current, 0); alerte (résultat); // 15

Ici, nous avons utilisé l'option de réduction la plus courante, qui n'utilise que 2 arguments.

Regardons de plus près comment cela fonctionne.

Lors de la première exécution, sum est initial (le dernier argument de réduire), qui est 0, et current est le premier élément du tableau, qui est 1. Ainsi, le résultat de la fonction est 1.

La deuxième fois que nous exécutons sum = 1, nous y ajoutons le deuxième élément du tableau (2).

Au troisième passage, somme = 3, auquel on ajoute l'élément suivant, et ainsi de suite...

Le flux de calcul ressemble à ceci :

Sous forme de tableau, où chaque ligne est un appel de fonction sur l'élément suivant du tableau :

somme du résultat actuel

premier appel		1	1
deuxième appel	1	2	3
troisième défi	3	3	6
quatrième défi	6	4	10
cinquième défi	10	5	15

Ici, vous pouvez clairement voir comment le résultat de l'appel précédent est transmis au premier argument du suivant.

On peut également omettre la valeur initiale :

Soit arr = ; // la valeur initiale est supprimée (pas de 0 à la fin) let result = arr.reduce((sum, current) => sum + current); alerte (résultat); // 15

Le résultat est exactement le même ! En effet, en l'absence d'initiale, le premier élément du tableau est pris comme 1ère valeur et la recherche démarre à partir de la seconde.

Le tableau de calcul sera le même moins la première ligne.

Mais une telle utilisation requiert une extrême prudence. Si le tableau est vide, appeler réduire sans valeur initiale générera une erreur.

Voici un exemple :

Soit arr = ; // Erreur : réduction d'un tableau vide sans valeur initiale // s'il y avait une valeur initiale, la réduction la renverrait pour un tableau vide. arr.reduce((somme, courant) => somme + courant);

Résultats

Donc, pour résumer, nous avons examiné différentes méthodes pour travailler avec des tableaux dans une boucle. Toutes ces méthodes ont une chose en commun, c'est qu'elles doivent toutes passer une fonction en argument.

• forEach – pour parcourir un tableau.
• filter – pour filtrer le tableau. Renvoie un nouveau tableau filtré
• each/some – pour vérifier le tableau pour la présence d’éléments individuels.
• map - pour convertir un tableau en tableau. Renvoie le tableau converti d'origine.
• réduire/reduceRight - Calcule une valeur à partir de l'ensemble du tableau, en appelant une fonction sur chaque élément et en transmettant le résultat intermédiaire entre les appels. Peut être utilisé pour calculer la somme des éléments du tableau.

Tâches Obtenir un nouveau tableau

Laissez le tableau var mas = ["HTML", "CSS", "JavaScript", "Pascal"] être donné, vous devez utiliser la méthode map pour obtenir un nouveau tableau qui contiendra les longueurs de chaque élément du tableau d'origine .

Filtrer le tableau

Il existe un tableau var mas = vous devez utiliser la méthode de filtrage pour obtenir un tableau contenant uniquement des nombres positifs.

Vérifier le tableau

Il existe un tableau var mas = vous devez vérifier s'il y a des nombres négatifs dans le tableau et afficher le résultat à l'écran.

Eh bien, en conclusion, une courte vidéo sur les méthodes de bouclage dans un tableau.

• Traduction

• I. Itérer sur des tableaux réels
• méthode forEach et méthodes associées
• pour la boucle
• Utilisation appropriée de la boucle for...in
• for...of boucle (utilisation implicite de l'itérateur)
• Utilisation explicite de l'itérateur
• Utiliser des méthodes pour parcourir des tableaux réels
• Convertir en un vrai tableau
• Une note sur les objets d'exécution

I. Itérer sur des tableaux réels À l'heure actuelle, il existe trois façons d'itérer sur les éléments d'un tableau réel :

méthode Array.prototype.forEach ;

classique pour la boucle

une boucle for...in "correctement" construite.

De plus, prochainement, avec l'avènement du nouveau standard ECMAScript 6 (ES 6), deux méthodes supplémentaires sont attendues :

boucle for...of (utilisation implicite de l'itérateur) ;

utilisation explicite de l'itérateur.

1. La méthode forEach et les méthodes associées Si votre projet est conçu pour prendre en charge les fonctionnalités de la norme ECMAScript 5 (ES5), vous pouvez utiliser l'une de ses innovations : la méthode forEach.

Exemple d'utilisation :
var a = ["a", "b", "c"]; a.forEach(function(entry) ( console.log(entry); ));
De manière générale, l'utilisation de forEach nécessite de connecter la bibliothèque d'émulation es5-shim pour les navigateurs qui ne supportent pas nativement cette méthode. Ceux-ci incluent IE 8 et versions antérieures, qui sont encore utilisées dans certains endroits.

L'avantage de forEach est qu'il n'est pas nécessaire de déclarer des variables locales pour stocker l'index et la valeur de l'élément actuel du tableau, puisqu'elles sont automatiquement transmises à la fonction de rappel en tant qu'arguments.

Si vous vous inquiétez du coût possible d'un rappel sur chaque élément, ne vous inquiétez pas et lisez ceci.

ForEach est conçu pour parcourir tous les éléments d'un tableau, mais en plus, ES5 propose plusieurs méthodes plus utiles pour parcourir tout ou partie des éléments et effectuer certaines actions sur eux :

• each - renvoie true si pour chaque élément du tableau le rappel renvoie une valeur qui peut être convertie en true .
• some - renvoie true si pour au moins un élément du tableau, le rappel renvoie une valeur qui peut être convertie en true.
• filter - crée un nouveau tableau qui inclut les éléments du tableau d'origine pour lesquels le rappel renvoie true .
• map - crée un nouveau tableau composé des valeurs renvoyées par le rappel.
• réduire - réduit un tableau à une valeur unique, en appliquant un rappel à chaque élément du tableau tour à tour, en commençant par le premier (peut être utile pour calculer la somme des éléments du tableau et d'autres fonctions récapitulatives).
• réduireRight - fonctionne de la même manière que réduire, mais parcourt les éléments dans l'ordre inverse.

2. Pour la boucle Bon vieux pour les règles:

Var a = ["a", "b", "c"]; indice var ; pour (indice = 0; indice< a.length; ++index) { console.log(a); }
Si la longueur du tableau est constante tout au long de la boucle et que la boucle elle-même appartient à une section de code critique en termes de performances (ce qui est peu probable), vous pouvez alors utiliser une version « plus optimale » de for qui stocke la longueur du tableau. :

Var a = ["a", "b", "c"]; var index, len ; pour (index = 0, len = a.length; index< len; ++index) { console.log(a); }
En théorie, ce code devrait s'exécuter un peu plus vite que le précédent.

Si l'ordre des éléments n'est pas important, alors vous pouvez aller encore plus loin en termes d'optimisation et vous débarrasser de la variable de stockage de la longueur du tableau, en changeant l'ordre de recherche à l'inverse :

Var a = ["a", "b", "c"]; indice var ; pour (index = a.length - 1; index >= 0; --index) ( console.log(a); )
Cependant, dans les moteurs JavaScript modernes, de tels jeux d'optimisation ne signifient généralement rien.

3. Utilisation appropriée d'une boucle for...in S'il vous est conseillé d'utiliser une boucle for...in, rappelez-vous que parcourir des tableaux n'est pas ce à quoi elle est destinée. Contrairement à une idée fausse courante, la boucle for...in ne parcourt pas les indices d'un tableau, mais plutôt les propriétés énumérables d'un objet.

Cependant, dans certains cas, comme l'itération sur des tableaux clairsemés, for...in peut être utile, à condition de prendre des précautions, comme le montre l'exemple ci-dessous :

// a - tableau clairsemé var a = ; une = "une" ; une = "b" ; une = "c" ; for (var clé dans a) ( if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key