Jenis gelung yang manakah paling pantas dalam JavaScript? Perbandingan beberapa untuk gelung

JavaScript ialah "pokok malar hijau" dalam bidang pembangunan web. Sama ada rangka kerja JavaScript (seperti Node.js, React, Angular, Vue, dll.) atau JavaScript asli, semuanya mempunyai pangkalan peminat yang sangat besar. Mari bercakap tentang JavaScript moden. Gelung sentiasa menjadi bahagian penting dalam kebanyakan bahasa pengaturcaraan, dan JavaScript moden memberi kita banyak cara untuk mengulang atau menggelung nilai.

Tetapi persoalannya, adakah kita benar-benar tahu gelung atau lelaran mana yang terbaik untuk keperluan kita. Terdapat banyak variasi gelung for, seperti for, for (tertib terbalik), for…of, forEach, for…in, for…await. Artikel ini akan membincangkan perkara ini.

Fahami untuk gelung atau iterator yang sesuai untuk keperluan kita untuk menghalang kita daripada membuat beberapa kesilapan peringkat rendah yang menjejaskan prestasi aplikasi.

Kitaran manakah yang lebih pantas?

Jawapannya sebenarnya: for (dalam susunan terbalik)

Perkara yang paling mengejutkan saya ialah selepas saya mengujinya pada tempatan saya komputer, saya perlu menerima hakikat bahawa for (dalam susunan terbalik) adalah gelung for terpantas. Di bawah saya akan memberikan contoh melaksanakan gelung melalui tatasusunan yang mengandungi lebih daripada sejuta elemen.

Penafian: console.time() Ketepatan keputusan sangat bergantung pada konfigurasi sistem tempat kami menjalankan ujian. Anda boleh mengetahui lebih lanjut tentang ketepatan di sini.

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

Sebab untuk hasil ini mudah dalam kod, gelung ke hadapan dan belakang for mengambil masa yang hampir sama, dengan hanya perbezaan 0.1 milisaat. Sebabnya ialah for (dalam susunan terbalik) hanya perlu mengira pembolehubah permulaan let i = arr.length sekali, manakala dalam gelung for dalam susunan hadapan ia menyemak keadaan i<arr.length selepas setiap kenaikan pembolehubah. Perbezaan halus ini tidak begitu penting dan anda boleh mengabaikannya. (Nota penterjemah: Kita boleh mengabaikannya apabila volum data kecil atau kod tidak sensitif masa. Walau bagaimanapun, menurut ujian penterjemah, apabila volum data mengembang, seperti berbilion, ratusan bilion, dll., jurang itu meningkat dengan ketara. , kita perlu mempertimbangkan kesan masa pada prestasi aplikasi)

dan forEach ialah kaedah prototaip Array, berbanding dengan gelung for biasa, forEach dan for…of Ia mengambil lebih banyak masa untuk melelaran melalui tatasusunan. (Nota Penterjemah: Tetapi perlu diperhatikan bahawa kedua-dua for…of dan forEach memperoleh data daripada objek, tetapi prototaip tidak, jadi tiada perbandingan.)

Jenis gelung, Dan di manakah kita harus menggunakannya

1 Untuk gelung (urutan hadapan dan belakang)

Saya rasa, mungkin semua orang Anda patut. semua sangat mengenali kitaran asas ini. Kita boleh menggunakan gelung for di mana-mana sahaja kita perlu menjalankan sekeping kod beberapa kali yang diluluskan. Gelung for paling asas berjalan paling pantas, jadi kita harus menggunakannya setiap masa, bukan? Tidak, prestasi bukan sahaja satu-satunya kriteria kebolehbacaan kod selalunya lebih penting.

2 forEach

Kaedah ini perlu menerima fungsi panggil balik sebagai parameter input dan berulang melalui setiap elemen tatasusunan elemen dan laksanakan fungsi panggil balik kami (melalui elemen itu sendiri dan indeksnya (pilihan) sebagai argumen). forEach juga membenarkan parameter pilihan this digunakan dalam fungsi panggil balik.

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

Perlu diingatkan bahawa jika kami ingin menggunakan forEach, kami tidak boleh menggunakan operator litar pintas JavaScript (||, &&...), iaitu, kami tidak boleh melangkau atau berakhir dengan setiap kitaran gelung.

3 for…of

for…of diseragamkan dalam ES6 (ECMAScript 6). Ia mencipta gelung untuk objek boleh lelar (seperti array, map, set, string, dll.) dan mempunyai kelebihan yang luar biasa, iaitu kebolehbacaan yang sangat baik.

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

Perlu diingatkan bahawa sila jangan gunakan for……of dalam penjana, walaupun gelung for……of ditamatkan lebih awal. Selepas keluar dari gelung, penjana ditutup dan percubaan dibuat untuk lelaran semula tanpa menghasilkan sebarang keputusan lanjut.

4.

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

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

Atas ialah kandungan terperinci Jenis gelung yang manakah paling pantas dalam JavaScript? Perbandingan beberapa untuk gelung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!