Comprendre les 3 styles de boucle for en javascript et quand les utiliser

Lors de l'apprentissage d'un langage de développement, la boucle for est une syntaxe essentielle, et tous les développeurs l'utiliseront probablement. C'est tellement classique que chaque langage de développement inclut au moins une version de la syntaxe des boucles. Cependant, JavaScript contient trois syntaxes de boucles différentes (si vous y prêtez plus attention, cela peut être compté pour quatre).

La façon dont ils sont utilisés n'est pas exactement la même, par exemple :

l Syntaxe classique des boucles For

l For….of et For…in

l Une version plus voyante : .forEach

Ensuite, je voudrais présenter les similitudes et les différences dans l'utilisation de ces trois syntaxes, et quand et comment les utiliser pour obtenir les meilleurs résultats. Bon, commençons.

Boucle For classique

Nous devrions tous être très clairs sur cette syntaxe. Dans la boucle for, vous pouvez définir des compteurs internes, définir les conditions d'interruption correspondantes et des stratégies pas à pas flexibles (généralement, cela peut être l'un ou l'autre). augmentant ou diminuant).

La syntaxe est :

for([计数器定义];[中断条件];[步进策略]){
   //... 
    TODO
}

Je suis sûr que même sans mon introduction, vous devez avoir déjà écrit des déclarations similaires, par exemple :

for(let counter = 0; counter <p> Exécutons-le dans Chrome après depuis un moment, les résultats obtenus sont également conformes aux attentes, mais est-ce juste la boucle for ? <br></p><p><img src="https://img.php.cn/upload/image/758/933/751/1606383516520600.png" title="1606383516520600.png" alt="Comprendre les 3 styles de boucle for en javascript et quand les utiliser"></p><p> Vous pouvez considérer la boucle for comme trois expressions </p><pre class="brush:php;toolbar:false">for(
[在循环开始时只执行一次的表达式];
[其中每一个逻辑判断都需吻合的表达式];
[循环每一步都被执行的表达式]
)

La signification de cette expression est que vous pouvez utiliser plusieurs compteurs pour exécuter le for loop , ou exécuter le code qui doit être exécuté à chaque fois dans une expression step sans affecter le compteur, par exemple :

for(let a = 0, b = 0; a <p><img src="https://img.php.cn/upload/image/156/104/357/160638352246070Comprendre%20les%203%20styles%20de%20boucle%20for%20en%20javascript%20et%20quand%20les%20utiliser" title="160638352246070Comprendre les 3 styles de boucle for en javascript et quand les utiliser" alt="Comprendre les 3 styles de boucle for en javascript et quand les utiliser"></p><p>On peut aller plus loin et laisser it Cela devient plus conforme aux scénarios d'application réels : </p><pre class="brush:php;toolbar:false">for(let a = 0, b = 0; a <p><img src="https://img.php.cn/upload/image/534/927/536/160638352761244Comprendre%20les%203%20styles%20de%20boucle%20for%20en%20javascript%20et%20quand%20les%20utiliser" title="160638352761244Comprendre les 3 styles de boucle for en javascript et quand les utiliser" alt="Comprendre les 3 styles de boucle for en javascript et quand les utiliser"></p><p> De plus, vous pouvez même remplacer l'expression intermédiaire par un appel de fonction, à condition de vous rappeler que le retour la valeur de la fonction doit être de type booléen ou une valeur pouvant être convertie en valeur booléenne suffit, par exemple : </p><pre class="brush:php;toolbar:false">function isItDone(a) {
 console.log("函数被调用！")
 return a <p><img src="https://img.php.cn/upload/image/985/386/873/160638353227285Comprendre%20les%203%20styles%20de%20boucle%20for%20en%20javascript%20et%20quand%20les%20utiliser" title="160638353227285Comprendre les 3 styles de boucle for en javascript et quand les utiliser" alt="Comprendre les 3 styles de boucle for en javascript et quand les utiliser"></p><p>Alors, comment gérer les fonctions asynchrones du code dans une boucle for classique ? Comment s’assurer de ne pas tomber dans le piège de l’asynchrone ? </p><p>Je voudrais vous présenter un nouvel ami : async / wait, qui rendra les choses plus faciles et plus contrôlables lorsque nous traiterons du code asynchrone, par exemple : </p><pre class="brush:php;toolbar:false">const fs = require("fs")

async function read(fname) {
    return new Promise( (resolve, reject) => {
        fs.readFile(fname, (err, content) => {
            if(err) return reject(err)
            resolve(content.toString())
        })
    })
}

(async () => {
    let files = ['file1.json', 'file2.json']

    for(let i = 0; i <h2>Pour... dans Et Pour… de</h2><p> Ils se ressemblent beaucoup, mais ce ne sont pas le même type de boucle. </p><p>Essayons de les expliquer le plus brièvement possible : </p><p>For…in boucle à travers les propriétés énumérables d'un objet, c'est-à-dire lorsque votre objet personnalisé est utilisé comme table de hachage ou dictionnaire, il sera très simple de les parcourir en utilisant For...in. </p><p>Mais veuillez noter que l'ordre de parcours est exécuté dans l'ordre des éléments, veuillez donc ne pas vous fier à l'ordre des boucles. </p><pre class="brush:php;toolbar:false">let myMap {
  uno: 1,
  dos: 2,
  tres: 3
}
for(let key in myMap) {
  console.log(key, "=", myMap[key]);
}

Cela semble très simple, mais n'oubliez pas que For...in ne peut traverser qu'un objet entité. Si vous facilitez une non-entité, comme la traversée d'une chaîne, ce qui suit se produira :

for(let k in "Hello World!") {
   console.log(k)
}

Comme vous pouvez le voir d'après les résultats, toutes les lettres ne sont pas parcourues, mais chaque attribut est parcouru. Comme vous pouvez le voir, les nombres parcourus ne sont pas inutiles, car "Hello World. !"[1] peut également renvoyer les lettres correspondantes.

En revanche, si vous souhaitez parcourir chaque caractère, vous devez utiliser d'autres variantes : For…of

for(let char of "Hello World!") {
  console.log(char)
}

Cette façon de boucler a l'air bien pour les types de chaîne sont plus efficaces et le même cas d'utilisation, car en utilisant cette syntaxe, peut renvoyer la valeur correspondante dans l'élément. Nous savons donc, d'après les cas d'utilisation ci-dessus, que le contenu parcouru par For...of est la valeur de l'objet.

À travers les exemples ci-dessus, nous pouvons voir qu'ils traversent des attributs et des valeurs. Existe-t-il donc un moyen d'obtenir à la fois les attributs et les valeurs ? La réponse est oui, en utilisant la méthode des entrées, vous pouvez les obtenir en même temps ? time. Propriétés et valeurs, comme ceci :

let myArr = ["hello", "world"]
for([idx, value] of myArr.entries()) {
    console.log(idx, '=', value)
}

Enfin, à quoi cela ressemble-t-il lorsque l'on traite du code asynchrone ? La réponse est bien sûr la même que pour la boucle for.

const fs = require("fs")

async function read(fname) {
    return new Promise( (resolve, reject) => {
        fs.readFile(fname, (err, content) => {
            if(err) return reject(err)
            resolve(content.toString())
        })
    })
}



(async () => {
    let files = ['file2.json', 'file2.json']

    for(fname of files) {
        let fcontent = await read(fname)
        console.log(fcontent)
        console.log("-------")
    }

    for(idx in files) {
        let fcontent = await read(files[idx])
        console.log(fcontent)
        console.log("-------")
    }
})()

Enfin, nous utiliserons un moyen court pour résumer la différence entre For…in et For…of

For…in——Attributs de traversée

For … of - Boucle à travers les valeurs

.forEach boucle

C'est probablement ma préférée, tout simplement parce que j'aime beaucoup la syntaxe déclarative ou la manière déclarative d'écrire du code via des impératifs.

De plus, bien que la syntaxe de boucle ci-dessus soit également très utile et présente de bons cas d'utilisation, forEach est très utile lorsque nous devons nous concentrer sur les données elles-mêmes.

不管怎样，先撇开哲学上的争论不谈，.foreach方法是for循环的另一个版本，但是这个方法是数组对象的一部分，它的目的是接收一个函数和一个额外的可选参数，以便在执行函数时重新定义该函数的上下文。

对于数组中的每个元素，我们的函数都将被执行，并且它将收到三个参数（是的，就是三个，而不是一个，因为您已经习惯了使用它）。它们分别是：

• 正在处理的当前元素。

• 元素的索引，这已经简化了我们试图用for…of循环实现的任务

• 正在处理的实际数组。以防万一你需要做点什么。

那么，让我们看一个简单的示例：

a = ["hello", "world"]

a.forEach ( (elem, idx, arr) => {
   console.log(elem, "at: ", idx, "inside: ", arr)
})

更快更简单，不是吗？

但是你可以看到我们如何在函数中很容易地使用所有属性。下面是一个您希望在foreach方法上使用第二个可选参数的示例：

class Person {
    constructor(name)  {
        this.name = name
    }
}

function greet(person) {
    console.log(this.greeting.replace("$", person.name))
}

let english = {
    greeting: "Hello there, $"
}
let spanish = {
    greeting: "Hola $, ¿cómo estás?"
}

let people = [new Person("Fernando"), new Person("Federico"), new Person("Felipe")]


people.forEach( greet, english)
people.forEach( greet, spanish)

通过重写被调用函数greet的上下文，我可以在不影响其代码的情况下更改其行为。

最后，显示此方法也可以与异步代码一起使用，下面是示例：

const fs = require("fs")

async function read(fname) {
    return new Promise( (resolve, reject) => {
        fs.readFile(fname, (err, content) => {
            if(err) return reject(err)
            resolve(content.toString())
        })
    })
}

let files = ['file1.json', 'file2.json']

files.forEach( async fname => {
    let fcontent = await read(fname)
    console.log(fcontent)
    console.log("-------")
})

结论

这就是我想要分享的关于JavaScript中关于循环的全部内容，我希望现在您对它们有了更清晰的理解，并且可以根据这些知识和我们当前的实际需求来选择您喜欢的循环。

原文地址：https://blog.bitsrc.io/3-flavors-of-the-for-loop-in-javascript-and-when-to-use-them-f0fb5501bdf3

更多编程相关知识，请访问：编程学习网站！！

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!