recherche
Maisoninterface WebQuestions et réponses frontalesQuelles sont les méthodes utilisées pour implémenter des boucles en javascript

Méthodes pour implémenter les boucles : 1. instruction de boucle for ; 2. instruction de boucle "for in" ; 3. instruction de boucle while ; 5. méthode forEach() ; ; 7. méthode filter() ; 8. some(); 9. each() et ainsi de suite.

Quelles sont les méthodes utilisées pour implémenter des boucles en javascript

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

12 méthodes de parcours de boucle en JavaScript

1. boucle for

let arr = [1,2,3];
for (let i=0; i<arr.length; i++){
 console.log(i,arr[i])
}
// 0 1
// 1 2
// 2 3

La boucle for est l'outil de boucle le plus couramment utilisé en JS et est souvent utilisée pour le parcours en boucle de tableaux.

2. for in loop

let obj = {name:&#39;zhou&#39;,age:&#39;**&#39;}
for(let i in obj){
 console.log(i,obj[i])
}
// name zhou
// age **

for in loop est principalement utilisé pour parcourir des objets ordinaires, i représente la valeur clé de l'objet, et obj[i] représente la valeur correspondante. Lorsque vous l'utilisez pour parcourir le tableau, dans la plupart des cas, vous pouvez obtenir le même effet, mais vous ne devriez pas le faire, c'est risqué, car i est affiché sous forme de chaîne au lieu de l'indice numérique requis par le tableau, ce qui signifie que dans certains cas, des opérations de chaîne se produiront, en tête aux erreurs de données, telles que : '52'+1 = '521' au lieu des 53 dont nous avons besoin.

De plus, lorsque la boucle for in parcourt non seulement ses propres propriétés, elle trouvera également le prototype, il est donc préférable d'ajouter un jugement dans le corps de la boucle, utilisez simplement obj[i].hasOwnProperty(i), donc afin d'éviter de traverser trop d'attributs inutiles.

3. Boucle While

Parcourez de la même manière le tableau cars, utilisez d'abord la méthode de boucle for

let cars=["BMW","Volvo","Saab","Ford"];
let i=0;
for (;cars[i];)
{
console.log(cars[i])
i++;
};
// BMW
// Volvo
// Saab
// Ford

puis la méthode de boucle while

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i])
{
console.log(cars[i] + "<br>")
i++;
};

Nous avons constaté qu'ils peuvent obtenir le même effet, en fait leur traitement sous-jacent est la même chose Oui, mais la boucle for peut mettre la définition, le jugement conditionnel et les opérations d'incrémentation et de décrémentation dans une seule condition d'exécution. Le code semble plus pratique, mais c'est tout.

4. boucle do while

let i = 3;
do{
 console.log(i)
 i--;
}
while(i>0)
// 3
// 2
// 1

La boucle do while est une variante de la boucle while. Elle effectue d'abord une opération puis effectue un jugement conditionnel si c'est vrai, elle continuera à effectuer l'opération si. c'est faux, la boucle va se terminer.

5. Boucle Array forEach

let arr = [1,2,3];
arr.forEach(function(i,index){
 console.log(i,index)
})
// 1 0
// 2 1
// 3 2

forEach boucle, parcourt chaque élément du tableau et effectue des opérations. Il n'y a pas de valeur de retour et vous n'avez pas besoin de connaître la longueur du tableau. , seul le premier est requis et représente la valeur actuelle sous l'indice.

Veuillez également noter que la boucle forEach ne peut pas être arrêtée avant que tous les éléments ne soient appelés. Elle n'a pas d'instruction break. Si vous devez vous arrêter, vous pouvez essayer une instruction try catch, qui consiste à générer une erreur lorsque vous le souhaitez. forcez une sortie catch, puis revenez dans catch, afin que la boucle puisse être terminée. Si vous utilisez souvent cette méthode, il est préférable de personnaliser une telle fonction forEach dans votre bibliothèque.

6. Méthode Array map()

let arr = [1,2,3];
let tt = arr.map(function(i){
 console.log(i)
 return i*2;
})
// [2,4,6]

map() renvoie un nouveau tableau, et les éléments du tableau sont les valeurs des éléments du tableau d'origine après l'appel de la fonction.
Remarque : les méthodes map et forEach ne peuvent être utilisées que pour parcourir des tableaux, pas des objets ordinaires.

7. Méthode Array filter()

let arr = [1,2,3];
let tt = arr.filter(function(i){
 return i>1;
})
// [2,3]

La méthode filter est une méthode intégrée de l'objet Array. Elle renverra les éléments filtrés sans modifier le tableau d'origine.

8. Méthode Array some()

let arr = [1,2,3];
let tt = arr.some(function(i){
 return i>1;
})
// true

some() est utilisée pour détecter si les éléments du tableau remplissent les conditions spécifiées (fournies par la fonction) et renvoient une valeur booléenne sans modifier le tableau d'origine.

9. Méthode Array Every()

let arr = [1,2,3];
let tt = arr.some(function(i){
 return i>1;
})
// 检测数组中元素是否都大于1
// false

every() est utilisée pour détecter si tous les éléments du tableau remplissent les conditions spécifiées (fournies via la fonction), renvoient une valeur booléenne et ne modifient pas l'original. tableau.

10. Méthode Array réduire()

let arr = [1,2,3];
let ad = arr.reduce(function(i,j){
 return i+j;
})
// 6

reduce() reçoit une fonction en tant qu'accumulateur, et chaque valeur du tableau (de gauche à droite) commence à être réduite et est finalement calculée comme une valeur.

11. Méthode Array réduireRight()

let arr = [1,2,3];
let ad = arr.reduceRight(function(i,j){
 return i+j;
})
// 6

la méthode reduceRight() a la même fonction que réduire(), elle démarre le calcul à partir de la fin du tableau.

12. boucle for of

let arr = [&#39;name&#39;,&#39;age&#39;];
for(let i of arr){
 console.log(i)
}
// name
// age

La boucle for of est une nouvelle instruction dans Es6, utilisée pour remplacer for in et forEach. Elle vous permet de parcourir des tableaux (tableaux), des chaînes (chaînes), des cartes (cartes). , Ensembles (ensembles) et autres structures de données itérables (données itérables), faites attention à sa compatibilité.

【Recommandations associées : Tutoriel d'apprentissage Javascript

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!

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Qu'est-ce que la différence entre la classe et le sélecteur d'ID?Qu'est-ce que la différence entre la classe et le sélecteur d'ID?May 12, 2025 am 12:13 AM

ClassSelectorSaversaLileAndreusable, whileidSelectorSareUniquedSpecific.1) UseclassSelectors (dénoté par)

CSS IDS vs Classes: les vraies différencesCSS IDS vs Classes: les vraies différencesMay 12, 2025 am 12:10 AM

IdsareUniqueIdentifiantsforsingleelements, tandis que les éléments de laMultuliplements.

CSS: Et si j'utilise juste des cours?CSS: Et si j'utilise juste des cours?May 12, 2025 am 12:09 AM

L'utilisation d'un sélecteur de classe uniquement peut améliorer la réutilisabilité du code et la maintenabilité, mais nécessite la gestion des noms et des priorités des classes. 1. Améliorer la réutilisabilité et la flexibilité, 2. combinant plusieurs classes pour créer des styles complexes, 3. Il peut conduire à de longs noms de classe et priorités, 4. L'impact des performances est petit, 5. Suivez les meilleures pratiques telles que la dénomination concise et les conventions d'utilisation.

ID et sélecteurs de classe dans CSS: un guide du débutantID et sélecteurs de classe dans CSS: un guide du débutantMay 12, 2025 am 12:06 AM

Les sélecteurs d'identification et de classe sont utilisés dans CSS pour les paramètres de style unique et multi-éléments respectivement. 1. Le sélecteur d'ID (#) convient à un seul élément, comme un menu de navigation spécifique. 2. Le sélecteur de classe (.) Est utilisé pour plusieurs éléments, tels que le style de bouton unifié. Les ID doivent être utilisés avec prudence, éviter une spécificité excessive et hiérarchiser la classe pour améliorer la réutilisabilité et la flexibilité du style.

Comprendre la spécification HTML5: objectifs et avantages clésComprendre la spécification HTML5: objectifs et avantages clésMay 12, 2025 am 12:06 AM

Les objectifs clés et les avantages de HTML5 incluent: 1) une structure sémantique Web améliorée, 2) un support multimédia amélioré et 3) la promotion de la compatibilité multiplateforme. Ces objectifs mènent à une meilleure accessibilité, à une expérience utilisateur plus riche et à des processus de développement plus efficaces.

Objectifs de HTML5: Guide d'un développeur sur l'avenir du WebObjectifs de HTML5: Guide d'un développeur sur l'avenir du WebMay 11, 2025 am 12:14 AM

L'objectif de HTML5 est de simplifier le processus de développement, d'améliorer l'expérience utilisateur et d'assurer le réseau dynamique et accessible. 1) Simplifier le développement du contenu multimédia en prenant en charge nativement les éléments audio et vidéo; 2) Introduire des éléments sémantiques tels que, etc. pour améliorer la structure du contenu et la convivialité SEO; 3) Améliorer les fonctions hors ligne via le cache d'application; 4) Utiliser des éléments pour améliorer l'interactivité des pages; 5) Optimiser la compatibilité mobile et soutenir la conception sensible; 6) Améliorer les fonctions de forme et simplifier le processus de vérification; 7) Fournir des outils d'optimisation des performances tels que les attributs asynchronisés et différés.

HTML5: Transformer le Web avec de nouvelles fonctionnalités et capacitésHTML5: Transformer le Web avec de nouvelles fonctionnalités et capacitésMay 11, 2025 am 12:12 AM

HTML5TRANSFORMSWEBDEVELOPMENTSBYINTRODUCTINGSEMANTIMANDELlements, MultimeDiacapability, PowerdApis, andPerformanceOptimizationTools.1) SemanticElements comme ,,, AntenhanceseoandAccessibility.2) MultimediaElementsandallowDirecEredDeddings withoutplugins, ImprominguSU

ID vs classe dans CSS: une comparaison complèteID vs classe dans CSS: une comparaison complèteMay 11, 2025 am 12:12 AM

TherealDiFFERSEBetweenusinganidverssUsAclassincsShatidshatids areupique and haveHiGhersecificity, tandis que les éléments de l'Incolare

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

<🎜>: Bubble Gum Simulator Infinity - Comment obtenir et utiliser les clés royales
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
Nordhold: Système de fusion, expliqué
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers of the Witch Tree - Comment déverrouiller le grappin
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

VSCode Windows 64 bits Télécharger

VSCode Windows 64 bits Télécharger

Un éditeur IDE gratuit et puissant lancé par Microsoft

mPDF

mPDF

mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) ​​et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),

MantisBT

MantisBT

Mantis est un outil Web de suivi des défauts facile à déployer, conçu pour faciliter le suivi des défauts des produits. Cela nécessite PHP, MySQL et un serveur Web. Découvrez nos services de démonstration et d'hébergement.

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

Adaptateur de serveur SAP NetWeaver pour Eclipse

Adaptateur de serveur SAP NetWeaver pour Eclipse

Intégrez Eclipse au serveur d'applications SAP NetWeaver.