Quel type de boucle est le plus rapide en JavaScript ? Comparaison de plusieurs boucles for

JavaScript est « l'arbre à feuilles persistantes » dans le domaine du développement Web. Qu’il s’agisse de frameworks JavaScript (comme Node.js, React, Angular, Vue, etc.) ou de JavaScript natif, ils ont tous une très large base de fans. Parlons du JavaScript moderne. Les boucles ont toujours été une partie importante de la plupart des langages de programmation, et le JavaScript moderne nous offre de nombreuses façons d'itérer ou de parcourir des valeurs.

Mais la question est de savoir si nous savons vraiment quelle boucle ou itération convient le mieux à nos besoins. Il existe de nombreuses variantes de la boucle for, telles que for, for (ordre inverse), for…of, forEach, for…in, for…await. Cet article en discutera.

Comprenez quelle boucle ou quel itérateur est adapté à nos besoins pour nous éviter de commettre des erreurs de bas niveau qui affectent les performances de l'application.

Quel cycle est le plus rapide ?

La réponse est en fait : for(Ordre inversé)

La chose la plus surprenante pour moi est qu'après l'avoir testé sur mon ordinateur local, j'ai dû accepter que for(Ordre inversé) est le plus rapide de tous for boucles Ce fait. Ci-dessous, je vais donner un exemple d'exécution d'une boucle à travers un tableau contenant plus d'un million d'éléments.

Avertissement : console.time() L'exactitude des résultats dépend fortement de la configuration du système sur lequel nous exécutons les tests. Vous pouvez en savoir plus sur la précision ici.

const million = 1000000; 
const arr = Array(million);

// 注：这是稀疏数组，应该为其指定内容，否则不同方式的循环对其的处理方式会不同：
// const arr = [...Array(million)]

console.time('⏳');
for (let i = arr.length; i > 0; i--) {} // for(倒序)  :- 1.5ms
for (let i = 0; i < arr.length; i++) {} // for          :- 1.6ms
arr.forEach(v => v)                     // foreach      :- 2.1ms
for (const v of arr) {}                 // for...of     :- 11.7ms
console.timeEnd(&#39;⏳&#39;);

La raison de ce résultat est simple. Dans le code, les boucles avant et arrière for prennent presque le même temps, avec seulement une différence de 0,1 milliseconde. La raison en est que for (ordre inverse) n'a besoin de calculer la variable de départ let i = arr.length qu'une seule fois, alors que dans la boucle d'ordre direct for, il vérifie la condition i<arr.length après chaque incrément de variable. Cette subtile différence n’est pas très importante et vous pouvez l’ignorer. (Note du traducteur : nous pouvons l'ignorer lorsque le volume de données est petit ou que le code n'est pas sensible au temps. Cependant, selon le test du traducteur, lorsque le volume de données augmente, par exemple en milliards, en centaines de milliards, etc., l'écart augmente considérablement. , nous devons prendre en compte l'impact du temps sur les performances de l'application)

Et forEach est une méthode de Array prototype Par rapport aux boucles for ordinaires, forEach et for…of doivent consacrer plus de temps à l'itération du tableau. (Note du traducteur : mais il convient de noter que for…of et forEach obtiennent tous deux des données de l'objet, mais pas le prototype, il n'y a donc pas de comparaison.)

Types de boucles et où les utiliser

1. Boucle For (ordre avant et arrière)

Je pense que tout le monde devrait peut-être être très familier avec cette boucle de base. Nous pouvons utiliser des boucles for partout où nous avons besoin d'exécuter un morceau de code un nombre de fois approuvé. La boucle for la plus basique est la plus rapide, nous devrions donc l'utiliser à chaque fois, n'est-ce pas ? Non, la performance n'est pas le seul critère. La lisibilité du code est souvent plus importante. Choisissons la variante qui convient à notre application.

2. forEach

Cette méthode doit accepter une fonction de rappel comme paramètre d'entrée, parcourir chaque élément du tableau et exécuter notre fonction de rappel (avec l'élément lui-même et son index (paramètre facultatif ) En tant que paramètre de la fonction de rappel). forEach Permet également un paramètre facultatif this dans la fonction de rappel.

const things = ['have', 'fun', 'coding'];
const callbackFun = (item, idex) => {
    console.log(`${item} - ${index}`);
}
things.foreach(callbackFun); 
/* 输出   have - 0
        fun - 1
        coding - 2 */

Il est à noter que si nous voulons utiliser forEach, nous ne pouvons pas utiliser les opérateurs de court-circuit de JavaScript (||, &&...), c'est-à-dire que nous ne pouvons pas sauter ou terminer la boucle dans chaque boucle.

3. for…of

for…of est standardisé en ES6 (ECMAScript 6). Il crée une boucle sur un objet itérable (tel que array, map, set, string, etc.) et présente un avantage exceptionnel, à savoir une excellente lisibilité.

const arr = [3, 5, 7];
const str = 'hello';
for (let i of arr) {
   console.log(i); // 输出 3, 5, 7
}
for (let i of str) {
   console.log(i); // 输出 'h', 'e', 'l', 'l', 'o'
}

Il est à noter qu'il convient de ne pas utiliser for……of dans le générateur, même si la boucle for……of se termine plus tôt. Après avoir quitté la boucle, le générateur est fermé et une nouvelle tentative est effectuée sans produire d'autres résultats.

4. for in

for…in 会在对象的所有可枚举属性上迭代指定的变量。对于每个不同的属性，for…in 语句除返回数字索引外，还将返回用户定义的属性的名称。 因此，在遍历数组时最好使用带有数字索引的传统 for 循环。 因为 for…in 语句还会迭代除数组元素之外的用户定义属性，就算我们修改了数组对象（例如添加自定义属性或方法），依然如此。

const details = {firstName: 'john', lastName: 'Doe'};
let fullName = '';
for (let i in details) {
    fullName += details[i] + ' '; // fullName: john doe
}

<span style="font-size: 16px;">for…of</span> 和 <span style="font-size: 16px;">for…in</span>

for…of 和 for…in 之间的主要区别是它们迭代的内容。for…in 循环遍历对象的属性，而 for…of 循环遍历可迭代对象的值。

let arr= [4, 5, 6];
for (let i in arr) {
   console.log(i); // '0', '1', '2'
}
for (let i of arr) {
   console.log(i); // '4', '5', '6'
}

结论

• for 最快，但可读性比较差
• foreach 比较快，能够控制内容
• for...of 比较慢，但香
• for...in 比较慢，没那么方便

最后，给你一条明智的建议 —— 优先考虑可读性。尤其是当我们开发复杂的结构程序时，更需要这样做。当然，我们也应该专注于性能。尽量避免增添不必要的、多余的花哨代码，因为这有时可能对你的程序性能造成严重影响。祝你编码愉快。

译者注

在译者的实际测试中，发现：

• 不同浏览器甚至不同版本，结果会有不一样（颠倒，例如 Firefox 对原生 for-loop 似乎不太友好，Safari 极度喜欢 while）
• 不同平台操作系统处理器，结果会有不一样

英文原文地址：https://medium.com/javascript-in-plain-english/which-type-of-loop-is-fastest-in-javascript-ec834a0f21b9

原文作者：kushsavani

本文转载自：https://juejin.cn/post/6930973929452339213

译者：霜羽 Hoarfroster

更多编程相关知识，请访问：编程入门！！

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!