Quelles sont les principales boucles en javascript

Les principales boucles de JavaScript sont : 1. boucle for ; 2. boucle "for...in" ; 3. méthode map 4. boucle forEach 5. boucle de filtre ; propriétés de parcours de l’objet.

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

Dans le développement d'un projet, quel que soit le framework sur lequel il est construit, le traitement des données est nécessaire et le traitement des données est indissociable des diverses boucles de parcours. Il existe de nombreuses façons de parcourir en JavaScript. Voici quelques boucles js courantes.

1. boucle for

La boucle for devrait être la méthode de parcours de boucle la plus courante et la plus utilisée, donc sa lisibilité et sa facilité de maintenance sont relativement médiocres, mais vous pouvez en sortir. la boucle dans le temps.

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

2. for...in

La boucle for...in est principalement destinée à parcourir des objets Lorsque vous souhaitez obtenir la valeur clé correspondante de l'objet, utilisez for. ..in C'est plus pratique

//针对对象来说  
//任何对象都继承了Object对象，或者其它对象，继承的类的属性是默认不可遍历的，
//for... in循环遍历的时候会跳过，但是这个属性是可以更改为可以遍历的，那么就会造成遍历到不属于自身的属性。
//结合使用hasOwnProperty方法，在循环内部判断一下，某个属性是否为对象自身的属性。否则就可以产生遍历失真的情况。
let obj = {name: 'xiaohua', sex: 'male', age: '28'}
for(let key in obj){
    if(obj.hasOwnProperty(key)){
        console.log(obj[key])
    }
}

3. map

La méthode map transmet tour à tour tous les membres du tableau dans la fonction paramètre, puis renvoie les résultats de chaque exécution dans un nouveau tableau. La boucle ne peut pas être arrêtée au milieu et tous les membres seront toujours parcourus

let arr = [1,2,3,4,5]
let arr2 = arr.map((n)=>{
      return n+1
})
console.log(arr2) // [2,3,4,5,6]
console.log(arr) // [1,2,3,4,5]

La méthode map accepte une fonction comme paramètre. Lorsque cette fonction est appelée, la méthode map lui transmet trois paramètres : le membre actuel, la position actuelle et le tableau lui-même.

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
arrObj.map((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

4. forEach

La méthode d'utilisation de forEach est similaire à la méthode d'utilisation de map, sauf que la méthode forEach ne renvoie pas de valeur, elle est uniquement utilisée pour manipuler des données, et la boucle ne peut pas être arrêtée au milieu. Elle traversera toujours tous les membres

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
arrObj.forEach((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

5. filtrer la boucle de filtre

La méthode de filtrage est utilisée pour filtrer les membres du tableau et les membres qui remplissent les conditions. formez un nouveau tableau et renvoyez-le. Son paramètre est une fonction, tous les membres du tableau exécutent la fonction dans l'ordre et les membres dont le résultat de retour est vrai forment un nouveau tableau et le renvoient. Cette méthode ne modifie pas le tableau d'origine.

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
let arr2 = arrObj.filter((item,index,arr)=>{
    return (item.name === 'xiaohua')
})
console.log(arr2)  // [{id:1,name:'xiaohua}]

Le but de l'utilisation de la méthode filter dans la classe Array dans ECMAScirpt5 est de supprimer tous les éléments de type "faux" (false, null, undefined, 0, NaN ou une chaîne vide) :

let arr = [3, 4, 5, 2, 3, undefined, null, 0, ""];
let arrNew = arr.filter(Boolean);
console.log(arrNew)  //  [3, 4, 5, 2, 3]

Boolean est une fonction qui parcourt les éléments du tableau et renvoie vrai ou faux selon le type vrai ou faux de l'élément.

Object.keys parcourt les propriétés de l'objet

let obj = {name: 'xiaohua', sex: 'male', age: '28'}
console.log(Object.keys(obj))
// ["name", "sex", "age"]

Tutoriel avancé 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!