Welche Art von Schleife ist in JavaScript am schnellsten? Vergleich mehrerer for-Schleifen

JavaScript ist der „immergrüne Baum“ im Bereich der Webentwicklung. Ob es sich um JavaScript-Frameworks (wie Node.js, React, Angular, Vue usw.) oder natives JavaScript handelt, sie alle haben eine sehr große Fangemeinde. Lassen Sie uns über modernes JavaScript sprechen. Schleifen waren schon immer ein wichtiger Bestandteil der meisten Programmiersprachen, und modernes JavaScript bietet uns viele Möglichkeiten, Werte zu iterieren oder zu durchlaufen.

Aber die Frage ist, wissen wir wirklich, welche Schleife oder Iteration für unsere Bedürfnisse am besten ist? Es gibt viele Variationen der for-Schleife, wie zum Beispiel for, for (umgekehrte Reihenfolge), for…of , forEach, for…in, for…await. In diesem Artikel werden diese besprochen. for 循环有很多变形，例如 for、for（倒序）、for…of、forEach、for…in、for…await。本文将围绕这些展开讨论。

了解哪一种 for 循环或迭代器适合我们的需求，防止我们犯下一些影响应用性能的低级错误。

究竟哪一种循环更快？

答案其实是： for（倒序）

最让我感到惊讶的事情是，当我在本地计算机上进行测试之后，我不得不接受 for（倒序）是所有 for 循环中最快的这一事实。下面我会举个对一个包含超过一百万项元素的数组执行一次循环遍历的例子。

声明：console.time() 结果的准确度在很大程度上取决于我们运行测试的系统配置。你可以在此处对准确度作进一步了解。

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;);

造成这样结果的原因很简单，在代码中，正序和倒序的 for 循环几乎花费一样的时间，仅仅相差了 0.1 毫秒。原因是，for（倒序）只需要计算一次起始变量 let i = arr.length，而在正序的 for 循环中，它在每次变量增加后都会检查条件 i<arr.length>。这个细微的差别不是很重要，你可以忽略它。（译者注：在数据量小或对时间不敏感的代码上，我们大可忽略它，但是根据译者的测试，当数据量扩大，例如十亿，千亿等的数量级，差距就显著提升，我们就需要考虑时间对应用程序性能的影响了。）</arr.length>

而 forEach 是 Array 原型的一个方法，与普通的 for 循环相比，forEach 和 for…of 需要花费更多的时间进行数组迭代。（译者注：但值得注意的是，for…of 和 forEach 都从对象中获取了数据，而原型并没有，因此没有可比性。）

循环的类型，以及我们应该在何处使用它们

1. For 循环（正序和倒序）

我想，也许大家都应该对这个基础循环非常熟悉了。我们可以在任何我们需要的地方使用 for 循环，按照核定的次数运行一段代码。最基础的 for 循环运行最迅速的，那我们每一次都应该使用它，对吗？并不然，性能不仅仅只是唯一尺度，代码可读性往往更加重要，就让我们选择适合我们应用程序的变形即可。

2. forEach

这个方法需要接受一个回调函数作为输入参数，遍历数组的每一个元素，并执行我们的回调函数（以元素本身和它的索引（可选参数）作为参数赋予给回调函数）。forEach 还允许在回调函数中使用一个可选参数 this。

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

需要注意的是，如果我们要使用 forEach，我们不能使用 JavaScript 的短路运算符（||、&&……），即不能在每一次循环中跳过或结束循环。

3. for…of

for…of 是在 ES6（ECMAScript 6）中实现标准化的。它会对一个可迭代的对象（例如 array、map、set、string 等）创建一个循环，并且有一个突出的优点，即优秀的可读性。

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'
}

需要注意的是，请不要在生成器中使用 for……of，即便 for……of 循环提前终止。在退出循环后，生成器被关闭，并尝试再次迭代，不会产生任何进一步的结果。

4. for inVerstehen Sie, welche for-Schleife oder welcher Iterator für unsere Anforderungen geeignet ist, um zu verhindern, dass wir einige Fehler auf niedriger Ebene machen, die sich auf die Anwendungsleistung auswirken.

Welche Schleife ist schneller?

🎜Die Antwort lautet eigentlich: 🎜 für (umgekehrte Reihenfolge) 🎜🎜Das Überraschendste für mich ist, dass ich nach dem Testen auf meinem lokalen Computer The akzeptieren musste Tatsache ist, dass for (in umgekehrter Reihenfolge) die schnellste aller for-Schleifen ist. Im Folgenden gebe ich ein Beispiel für die Durchführung einer Schleife durch ein Array mit mehr als einer Million Elementen. 🎜🎜Haftungsausschluss🎜: console.time() Die Genauigkeit der Ergebnisse hängt stark von der Systemkonfiguration ab, auf der wir den Test ausführen. Sie können die Genauigkeit hier überprüfen. Erfahren Sie mehr. 🎜

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

🎜Der Grund für dieses Ergebnis ist einfach. Im Code dauern die Vorwärts- und Rückwärts-for-Schleifen fast gleich lange, mit einem Unterschied von nur 0,1 Millisekunden. Der Grund dafür ist, dass for (umgekehrte Reihenfolge) die Startvariable let i = arr.length nur einmal berechnen muss, während in der Vorwärtssequenz for Schleife, die die Bedingung i<arr.length> jedes Mal überprüft, wenn die Variable erhöht wird. Dieser subtile Unterschied ist nicht sehr wichtig und Sie können ihn ignorieren. (Anmerkung des Übersetzers: Wir können es ignorieren, wenn das Datenvolumen klein ist oder der Code nicht zeitkritisch ist. Laut dem Übersetzertest besteht jedoch eine Lücke, wenn das Datenvolumen zunimmt, z. B. Milliarden, Hunderte von Milliarden usw erhöht sich erheblich. Wir müssen die Auswirkungen der Zeit auf die Anwendungsleistung berücksichtigen)🎜🎜Und <code>forEach ist eine Methode des Array-Prototyps, die sich vom gewöhnlichen for Im Vergleich zu Schleifen benötigen <code>forEach und for…of mehr Zeit, um das Array zu durchlaufen. (Anmerkung des Übersetzers: Es ist jedoch erwähnenswert, dass sowohl for…of als auch forEach Daten vom Objekt erhalten, der Prototyp jedoch nicht, daher gibt es keinen Vergleich.) 🎜

Arten von Schleifen und wo wir sie verwenden sollten 🎜

🎜1 Für Schleife (Vorwärts- und Rückwärtsreihenfolge)🎜🎜🎜🎜Ich denke, vielleicht sollte jeder mit dieser grundlegenden Schleife sehr vertraut sein. Wir können die for-Schleife überall dort verwenden, wo wir einen Codeabschnitt eine genehmigte Anzahl von Malen ausführen müssen. Die einfachste for-Schleife ist die schnellste, wir sollten sie also jedes Mal verwenden, oder? Nein, die Leistung ist nicht nur das einzige Kriterium, sondern oft ist es wichtiger, die Variante zu wählen, die zu unserer Anwendung passt. 🎜🎜2. 🎜forEach🎜🎜🎜🎜Diese Methode muss eine Rückruffunktion als Eingabeparameter akzeptieren und durchlaufen das Array für jedes Element und führen Sie unsere Rückruffunktion aus (übergeben Sie das Element selbst und seinen Index (optionale Parameter) an die Rückruffunktion). forEach ermöglicht außerdem die Verwendung eines optionalen Parameters this in der Rückruffunktion. 🎜

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'
}

🎜Es sollte beachtet werden, dass wir, wenn wir forEach verwenden möchten, die Kurzschlussoperatoren (||, &&...) von JavaScript nicht verwenden können, das heißt, wir können die Schleife nicht überspringen oder beenden in jeder Schleife. 🎜🎜3. 🎜for…of🎜🎜🎜🎜for…of ist in Standardisiert in ES6 (ECMAScript 6). Es erstellt eine Schleife über ein iterierbares Objekt (z. B. array, map, set, string usw.). , und hat einen herausragenden Vorteil, nämlich eine hervorragende Lesbarkeit. 🎜rrreee🎜Es ist zu beachten, dass Sie for…of bitte nicht im Generator verwenden, auch wenn die for…of-Schleife vorzeitig beendet wird. Nach dem Verlassen der Schleife wird der Generator geschlossen und es wird versucht, erneut zu iterieren, ohne dass weitere Ergebnisse erzielt werden. 🎜🎜4. 🎜für 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

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

Das obige ist der detaillierte Inhalt vonWelche Art von Schleife ist in JavaScript am schnellsten? Vergleich mehrerer for-Schleifen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!