Maison > Article > interface Web > Méthodes de parcours couramment utilisées pour les tableaux javascript (exemples de code)
Ce que cet article vous apporte concerne les méthodes de traversée couramment utilisées (exemples de code) des tableaux JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Avant-propos
Cet article présente principalement les méthodes courantes de parcours de tableau : forEach , mapper, filtrer, trouver, chacun, certains, réduire, ils ont tous un point commun : ils ne modifieront pas le tableau d'origine.
1. forEach : parcourir le tableau
var colors = ["red","blue","green"]; // ES5遍历数组方法 for(var i = 0; i <pre class="brush:php;toolbar:false">// ES6 forEach colors.forEach(function(color){ console.log(color);//red blue green });
Regardons un autre exemple : parcourir les valeurs du tableau et calculer la somme
var numbers = [1,2,3,4,5]; var sum = 0; numbers.forEach(number=>sum+=number) console.log(sum)//15
2. Map : mapper un tableau dans un autre tableau
map traite chaque élément du tableau via la fonction spécifiée et renvoie le nouveau tableau après le traitement de la carte. ne changera pas le tableau d'origine.
La différence entre forEach et map est que forEach n'a pas de valeur de retour.
la carte doit renvoyer une valeur. Si aucun retour n'est donné, elle renverra un défini par défaut
Scénario d'utilisation 1
Supposons qu'il existe un tableau numérique (A) et les valeurs dans le tableau A est doublé sous la forme d'un tableau B
var numbers = [1,2,3]; var doubledNumbers = []; // es5写法 for(var i = 0; i <pre class="brush:php;toolbar:false">// es6 map方法 var doubled = numbers.map(function(number){ return number * 2; }) console.log(doubled);//[2,4,6]
Scénario d'utilisation 2 Supposons qu'il existe un tableau d'objets (A) et stockons la valeur d'un certain attribut de l'objet du tableau A dans le tableau B
var cars = [ {model:"Buick",price:"CHEAP"}, {model:"BMW",price:"expensive"} ]; var prices = cars.map(function(car){ return car.price; }) console.log(prices);//["CHEAP", "expensive"]
3. Filtre : recherchez tous les éléments qui répondent aux conditions spécifiées dans le tableau
filter() détecte. éléments numériques et renvoie un tableau de tous les éléments qui remplissent les conditions. filter() ne modifie pas le tableau d'origine.
Scénario d'utilisation 1 : supposons qu'il existe un tableau d'objets (A), récupérez le type d'objet spécifié dans le tableau et placez-le dans le tableau B
var porducts = [ {name:"cucumber",type:"vegetable"}, {name:"banana",type:"fruit"}, {name:"celery",type:"vegetable"}, {name:"orange",type:"fruit"} ]; // es5写法 var filteredProducts = []; for(var i = 0; i <pre class="brush:php;toolbar:false">// es6 filter var filtered2 = porducts.filter(function(product){ return product.type === "vegetable"; }) console.log(filtered2);
Scénario d'utilisation 2 : Supposons qu'il existe un tableau d'objets (A), filtrez les objets qui ne remplissent pas les conditions suivantes
Condition : La quantité de légumes est supérieure à 0 et le prix est inférieur à 10
var products = [ {name:"cucumber",type:"vegetable",quantity:0,price:1}, {name:"banana",type:"fruit",quantity:10,price:16}, {name:"celery",type:"vegetable",quantity:30,price:8}, {name:"orange",type:"fruit",quantity:3,price:6} ]; products = products.filter(function(product){ return product.type === "vegetable" && product.quantity > 0 && product.price <p><strong>Scénario d'utilisation 3</strong> : Supposons qu'il y ait deux tableaux (A, B). En fonction de la valeur d'identification dans A, filtrez les données qui ne correspondent pas au tableau B </p>. <pre class="brush:php;toolbar:false">var post = {id:4,title:"Javascript"}; var comments = [ {postId:4,content:"Angular4"}, {postId:2,content:"Vue.js"}, {postId:3,content:"Node.js"}, {postId:4,content:"React.js"}, ]; function commentsForPost(post,comments){ return comments.filter(function(comment){ return comment.postId === post.id; }) } console.log(commentsForPost(post,comments));//[{postId:4,content:"Angular4"},{postId:4,content:"React.js"}]
4. find : Retour pour réussir le test (juger au sein de la fonction) La valeur du premier élément du tableau
Son paramètre est une fonction de rappel, et tous les membres du tableau exécutent la fonction de rappel dans l'ordre jusqu'à ce que le premier membre dont la valeur de retour est vraie soit trouvé, puis renvoie ce membre. S’il n’y a aucun membre correspondant, undefined est renvoyé.
Scénario d'utilisation 1
Supposons qu'il existe un tableau d'objets (A), recherchez l'objet qui remplit les conditions
var users = [ {name:"Jill"}, {name:"Alex",id:2}, {name:"Bill"}, {name:"Alex"} ]; // es5方法 var user; for(var i = 0; i <pre class="brush:php;toolbar:false">// es6 find user = users.find(function(user){ return user.name === "Alex"; }) console.log(user);// {name:"Alex",id:2}找到后就终止循环
Scénario d'utilisation 2 : Supposons qu'il y ait est un tableau d'objets (A), trouvez l'objet dans le tableau qui remplit les conditions selon les conditions de l'objet spécifié
var posts = [ {id:3,title:"Node.js"}, {id:1,title:"React.js"} ]; var comment = {postId:1,content:"Hello World!"}; function postForComment(posts,comment){ return posts.find(function(post){ return post.id === comment.postId; }) } console.log(postForComment(posts,comment));//{id: 1, title: "React.js"}
5. Every&some
each : indique si chaque élément du tableau satisfait à la condition spécifiée
some : indique s'il y a des éléments dans le tableau qui remplissent la condition spécifiée
Scénario d'utilisation 1 : calcule si chaque système d'exploitation informatique de l'objet le tableau est disponible. Un système d'exploitation supérieur à 16 bits signifie disponible. Sinon il est indisponible
//ES5方法 var computers = [ {name:"Apple",ram:16}, {name:"IBM",ram:4}, {name:"Acer",ram:32} ]; var everyComputersCanRunProgram = true; var someComputersCanRunProgram = false; for(var i = 0; i <pre class="brush:php;toolbar:false">//ES6 some every var every = computers.every(function(computer){ return computer.ram > 16; }) console.log(every);//false var some = computers.some(function(computer){ return computer.ram > 16; }) console.log(some);//true
En un mot : Chaque : Un vrai est vrai Certains : Un faux est faux ;
Utiliser le scénario 2 : Supposons qu'il existe une page d'inscription, déterminez si la longueur de tout le contenu d'entrée est supérieure à 0
function Field(value){ this.value = value; } Field.prototype.validate = function(){ return this.value.length > 0; } //ES5方法 var username = new Field("henrywu"); var telephone = new Field("18888888888"); var password = new Field("my_password"); console.log(username.validate());//true console.log(telephone.validate());//true console.log(password.validate());//true //ES6 some every var fields = [username,telephone,password]; var formIsValid = fields.every(function(field){ return field.validate(); }) console.log(formIsValid);//true if(formIsValid){ // 注册成功 }else{ // 给用户一个友善的错误提醒 }
6. réduire : combiner le tableau en une valeur
reduce() reçoit une méthode comme accumulateur, et chaque valeur du tableau (de gauche à droite) est fusionnée en une seule valeur. Scénario d'utilisation 1 : Calculer la somme de toutes les valeurs du tableauvar numbers = [10,20,30]; var sum = 0; //es5 方法 for(var i = 0; i <pre class="brush:php;toolbar:false">// es6 reduce var sumValue = numbers.reduce(function(sum2,number2){ console.log(sum2);//0 10 30 60 return sum2 + number2; },0);//sum2初始值为0 console.log(sumValue);
Scénario d'utilisation 2 : Modifier un certain attribut de l'objet dans le tableau Extraire dans un autre tableau
var primaryColors = [ {color:"red"}, {color:"yellow"}, {color:"blue"} ]; var colors = primaryColors.reduce(function(previous,primaryColor){ previous.push(primaryColor.color); return previous; },[]); console.log(colors);//["red", "yellow", "blue"]
Scénario d'utilisation 3 : Déterminer si les crochets dans la chaîne sont symétriques
function balancedParens(string){ return !string.split("").reduce(function(previous,char){ if(previous <p class="comments-box-content"></p>
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!