ECMAScript définit 5 méthodes d'itération pour les tableaux. Chaque méthode reçoit deux paramètres : une fonction à exécuter avec chaque élément comme argument et un objet scope facultatif comme contexte dans lequel la fonction est exécutée (affectant la valeur de ceci dans la fonction). La fonction passée à chaque méthode reçoit trois paramètres : l'élément du tableau, l'index de l'élément et le tableau lui-même. Selon la méthode spécifique, les résultats de cette fonction peuvent ou non affecter la valeur de retour de la méthode. Les 5 méthodes d'itération du tableau sont les suivantes.
1. Méthode Map : exécutez la fonction passée sur chaque élément du tableau et renvoyez un tableau composé des résultats de chaque appel de fonction.
Cela peut également être compris comme : après avoir effectué un traitement spécial sur chaque élément du tableau, renvoyez un nouveau tableau. .
Par exemple :
avant de simplifier le tableau des prix :
soit prix=[50,80,90]
prix=prix.map((article,index)=>{
retourner l'article + "yuans"
})
Après l'abréviation de
console.log(prices):
let price=[50,80,120] //Ajouter "yuan" après le prix unitaire price=price.map(item=>item+"yuan") console.log(price)//Le résultat est ['50 yuans', '80 yuans', '90 yuans']
Son scénario d'application est par exemple : L'applet WeChat Douban Film Review
utilise la méthode map pour remplacer xxx par www
replace( ) méthode Utilisée pour remplacer certains caractères par d'autres caractères dans une chaîne ou pour remplacer une sous-chaîne qui correspond à une expression régulière.
let movies=[{id:1,name:"Shawshank Redemption",imgUrl:"http://xxx.douban.com/1.jpg"},{id:2,name:"Shawshank Redemption",imgUrl :" http://xxx.douban.com/2.jpg"},{id:3,name:"Shawshank Redemption",imgUrl:"http://xxx.douban.com/1.jpg"}]
films=films.map(item=>{
item.imgUrl=item.imgUrl.replace("xxx","www")
retourner l'article
})
console.log(movies) 2. Méthode de filtrage : exécutez la fonction transmise sur chaque élément du tableau. Les éléments que la fonction renvoie true formeront un tableau et renverront.
Cela peut également être compris comme : filtrer les éléments du tableau qui répondent aux exigences et renvoyer un nouveau tableau
let scores=[80,59,10,55,90,88]
let arr=scores.filter(item=>{
si (élément> 60) {
retourner vrai
}
})
console.log(arr)//La sortie est comme indiqué ci-dessous : la sortie est comme indiqué ci-dessous et filtre les tableaux inférieurs à 60
Après l'abréviation :
soit scores=[80,59,10,55,90,88] laissez arr=scores.filter(item=>item>=60) console.log(arr)//(3) [80, 90, 88]
Dans son scénario d'application, vous pouvez placer un tableau de noms de villes, puis rechercher des mots-clés, uniquement lorsque les données sont petites. un livre sur l'exemple plus tard. Les scénarios d'application du système de gestion incluront des recherches par mots clés pour référence.
Some est traduit en anglais par some, et each est traduit par all, each, donc la méthode some retournera true tant que l'une d'entre elles est vraie. Au contraire, each(). Les méthodes doivent toutes renvoyer vrai avant de pouvoir renvoyer vrai, même s'il y en a un faux, faux sera renvoyé.
Au cours du processus de jugement du tableau, il est jugé si chaque élément de l'ensemble répond à une exigence de base :
une méthode vraie et une. vrai, tant que l'un d'entre eux correspond, il retournera vrai.
chaque méthode : un faux est faux, tant que l'un d'eux ne répond pas aux exigences, il retournera faux
//laissez les scores de tous les élèves d'une classe pour voir si tout le monde a réussi let scores=[80,49,12 ,50,69 ]
laissez result=scores.every(item=>item>=60)
console.log(result)//Return false Tous ne sont pas réussis. Scénarios d'utilisation : avant que le validateur frontal ne soumette une requête AJAX, il a généralement besoin que toutes les vérifications soient réussies avant de pouvoir être envoyée. article sur les exemples de code.
5. Méthode de réduction : ECMAScript fournit deux méthodes de fusion pour les tableaux : réduire() et réduireRight(). Les deux méthodes parcourent tous les éléments du tableau et construisent une valeur de retour finale basée sur celle-ci. La méthode réduire() passe du premier élément au dernier élément du tableau. Et réduireRight() passe du dernier élément au premier élément. Cela peut aussi être simplement compris comme : intégrer les éléments dans le tableau et renvoyer un nouveau contenu.
Les deux méthodes acceptent deux paramètres : une fonction de fusion à exécuter sur chaque élément et une valeur initiale facultative à partir de laquelle démarrer la fusion. Les fonctions passées à réduire() et réduireRight() reçoivent quatre paramètres : la valeur fusionnée précédente, l'élément actuel, l'index de l'élément actuel et le tableau lui-même. Toute valeur renvoyée par cette fonction sera utilisée comme premier argument lors du prochain appel à la même fonction. Si le deuxième paramètre facultatif (comme valeur de départ de la fusion) n'est pas transmis à ces deux méthodes, la première itération commencera à partir du deuxième élément du tableau, donc le premier paramètre passé à la fonction de fusion est le premier élément du tableau. le deuxième paramètre est le deuxième élément du tableau.
Comprenez d'abord le concept à travers le code suivant :
la signification des quatre paramètres dans le code suivant :
prev : le résultat retourné par l'
élément de l'opération précédente : l'élément de cette opération
index : la valeur d'index de l'élément de cette opération
tableau : le tableau de l'opération en cours
let arr =[20,40,50,21]
let valeurs=arr.reduce((prev,item,index,array)=>{
console.log("préc"+préc)
console.log("élément"+élément)
console.log("index"+index)
console.log("tableau"+tableau)
console.log("____________________")
}) Le résultat est :
Pourquoi ne boucle-t-il que trois fois ? Prev peut définir une valeur par défaut. Si la valeur par défaut n'est pas définie, le premier élément sera le premier prev.
Pourquoi prev n'est-il pas défini dans les deuxième et troisième boucles ? Dans la deuxième boucle, vous devez obtenir la valeur de retour de la première boucle car le retour n'a pas été défini la première fois, donc vous obtenez undefined. Et ainsi de suite.
Si vous comprenez ce qui précède, alors nous commençons à implémenter la sommation de tableau :
let. arr=[20,40,50,21]
let valeurs=arr.reduce((prev,item,index,array)=>{
console.log("préc"+préc)
retourner l'article précédent +
//Donnez un retour et une boucle quatre fois. La première fois, la prév de sortie est 20, la deuxième fois 40+20 est 60, la troisième fois est 110 et la dernière fois, elle produit 131.
})
console.log(values) //131 Quand la valeur par défaut de prev doit-elle être définie ?
Ajoutez <li> </li> à chaque élément du tableau
let arr=["Eason Chan","Miriam Yeung","Juji Ku","Hacken Lee"]
//Définissez une valeur par défaut pour prev : Fonction 1. Tous les éléments participent à la boucle 2. Déterminez le contenu de retour let result=arr.reduce((prev,item)=>{
//console.log(préc)
return prev+"<li>"+item+"</li>"
},"")//Ajouter une chaîne vide console.log(result)//<li>Eason Chan</li><li>Miriam Yeung</li><li>Juji Ku</li><li>Keqin Li</li> li> Prenons un autre cas :
utilisez réduire pour réaliser la déduplication du tableau, créez un tableau vide, parcourez le tableau d'origine en séquence, insérez ce qui n'est pas dans le tableau vide, et ce qui n'est pas inséré ne sera plus inséré
let arr=["Zhang San"," Li Si","Li Si","Wang Er","Li Si","Mazi","Zhang San"]
let result=arr.reduce((prev,item)=>{
//Includes détermine s'il existe un élément spécifié et renvoie t, sinon il renvoie f.
if(!prev.includes(item)){
prev.push(item) //.push() ajoute un nouvel élément au tableau}
retour précédent
},[])//Définir un tableau vide par défaut console.log(result)//(4) ['Zhang San', 'Li Si', 'Wang Er', 'Mazi'] Autre cas : (réduire la méthode You peut faire beaucoup de choses)
compter le nombre d'occurrences de caractères : voir le code ci-dessous
let arr=["a","b","a","c","b","a","c"]
//Renvoie un objet pour compter le nombre d'occurrences de chaque caractère {a:2,w:3}
let result=arr.reduce((prev,item)=>{
// //Déterminez si l'objet a les attributs correspondants if(item in prev){
//Trouver la valeur d'attribut correspondante++
prev[item]++ //Si vous souhaitez définir ou obtenir des attributs d'objet à l'avenir, cet attribut sera représenté par une variable sous forme de crochets []++, s'il l'est directement. Le nom de l'attribut sera dans la forme de.}autre{
précédent[élément]=1
}
retour précédent
},{})
console.log(result)//{a : 3, b : 2, c : 2}