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 tableau

 var 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!