Rumah hujung hadapan web tutorial js JavaScript中for循环写法对运行效率有什么影响?

JavaScript中for循环写法对运行效率有什么影响?

Jul 19, 2017 pm 02:40 PM
javascript js kecekapan

for循环写法对效率的影响

总的来说对于for循环的写法有这么两种:

  1. 不写声明变量的写法:for(var i = 0;i<arr.length;i++){}

  2. 写声明变量的写法:for(var i = 0,len = arr.length;i < len;i++){}

除了for循环还有forEach() ,也有文章说forEach()效率最高,推荐用forEach()写法,那么到底哪个效率高呢?做个测试来看看吧。

测试方案

总的测试方案如下:

  1. 做一个容纳4千万的测试数组变量。

  2. 分别用两种写法的for循环和foreach对这个测试变量进行遍历。

  3. 在同一台稳定机器上,进行10次测试,最后取平均值。

  4. 测试环境:CPU:Inter(R) Core i5-3210M,RAM:12GM,system:win10(x64)

测试流程

制作测试变量

先用while循环做个测试变量出来,这个很简单,具体如下:


var testArrs = [],
 i = 0;
while(i<40000000){
 testArrs.push(i);
 i++;
}
Salin selepas log masuk

编写相应测试函数

测量和执行时间的代码,我用的是console.time()console.timeEnd()来进行测试。

针对这个三个for循环,先做出三个函数出来,他们分别是

foreach循环测试:


function testForeach(testArrs){
 console.time(&#39;foreach&#39;);
 var newArrs = [];
 testArrs.forEach(function(i){
 newArrs.push(i);
 });
 console.timeEnd(&#39;foreach&#39;);
}
Salin selepas log masuk

没有声明变量的for循环:


function testNoDeclare(testArrs){
 console.time(&#39;no declare&#39;);
 var newArrs = [];
 for(var i = 0;i<testArrs.length;i++){
 newArrs.push(i);
 }
 console.timeEnd(&#39;no declare&#39;);
}
Salin selepas log masuk

有变量声明的写法


function testUseDeclare(testArrs){
 console.time(&#39;use declare&#39;);
 var newArrs = [];
 for(var i = 0,len = testArrs.length;i<len;i++){
 newArrs.push(i);
 }
 console.timeEnd(&#39;use declare&#39;);
}
Salin selepas log masuk

执行测试函数

执行测试函数这里很简单啦,就是调用函数就可以了


testForeach(testArrs);
testNoDeclare(testArrs);
testUseDeclare(testArrs);
Salin selepas log masuk

测试结果

经过10次测试,得到了以下结果

foreach不写声明写声明
2372.891ms672.530ms743.974ms
2431.821ms710.275ms805.676ms
2422.448ms729.287ms741.014ms
2330.894ms730.200ms755.390ms
2423.186ms703.255ms769.674ms
2379.167ms689.811ms741.040ms
2372.944ms712.103ms710.524ms
2316.005ms726.518ms726.522ms
2535.289ms733.826ms747.427ms
2560.925ms793.680ms817.098ms
平均值平均值平均值
2414.56ms720.15ms755.83ms

不知道结果有没有让你出乎意料呢?没想到最平常的写法效率最高,为什么?我也没想明白,谁知道就告诉我吧,但我估计写声明的写法是没有意义的。因为len = arr.length这个arr.length可能已经缓存起来了,所以我们在声明个len变量来存储是没有意义的。

for循环的特殊写法

for循环的基本语法是:


for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
Salin selepas log masuk
  1. 语句1:在循环(代码块)开始前执行

  2. 语句2:定义运行循环(代码块)的条件

  3. 语句3:在循环(代码块)已被执行之后执行

如果我们用for循环要输出1到10,我们可以这么写:


for(var i=0;i<10;i++){
console.log(i);
}
Salin selepas log masuk

但是!根据上面的语法说明,我们也可以写成这样


for(var i=10;i--;){
console.log(i);
}
Salin selepas log masuk

刚开始看的时候我也很疑惑,怎么能这么写?语句2放的是循环条件,i–是什么判断条件。其实不然,在语句2中,如果返回true循环会继续执行。在js中0,null,undefined,false,'',””作为条件判断时,其结果为false,也就说当i–到0的时候就是false,循环就终止了。

再回到文章开头的代码


for (var i = 0, rule; rule = rules[i++];) {
 //do something
}
Salin selepas log masuk

这个rule = rules[i++]就是判断条件,当成为undefined时就会终止循环啦。所以这段代码换成普通写法就是这样的:


for(var i = 0;i < rules.length;i++){
 var rule = rules[i]
}
Salin selepas log masuk

其实就是把判断和赋值放到一起了,一边循环一边赋值。是不是挺简单?

Atas ialah kandungan terperinci JavaScript中for循环写法对运行效率有什么影响?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Apr 03, 2024 am 11:55 AM

Teknologi pengesanan dan pengecaman muka adalah teknologi yang agak matang dan digunakan secara meluas. Pada masa ini, bahasa aplikasi Internet yang paling banyak digunakan ialah JS Melaksanakan pengesanan muka dan pengecaman pada bahagian hadapan Web mempunyai kelebihan dan kekurangan berbanding dengan pengecaman muka bahagian belakang. Kelebihan termasuk mengurangkan interaksi rangkaian dan pengecaman masa nyata, yang sangat memendekkan masa menunggu pengguna dan meningkatkan pengalaman pengguna termasuk: terhad oleh saiz model, ketepatannya juga terhad. Bagaimana untuk menggunakan js untuk melaksanakan pengesanan muka di web? Untuk melaksanakan pengecaman muka di Web, anda perlu biasa dengan bahasa dan teknologi pengaturcaraan yang berkaitan, seperti JavaScript, HTML, CSS, WebRTC, dll. Pada masa yang sama, anda juga perlu menguasai visi komputer yang berkaitan dan teknologi kecerdasan buatan. Perlu diingat bahawa kerana reka bentuk bahagian Web

Panduan Praktikal Pembangunan Jauh PyCharm: Tingkatkan Kecekapan Pembangunan Panduan Praktikal Pembangunan Jauh PyCharm: Tingkatkan Kecekapan Pembangunan Feb 23, 2024 pm 01:30 PM

PyCharm ialah persekitaran pembangunan bersepadu (IDE) Python yang berkuasa yang digunakan secara meluas oleh pembangun Python untuk penulisan kod, penyahpepijatan dan pengurusan projek. Dalam proses pembangunan sebenar, kebanyakan pembangun akan menghadapi masalah yang berbeza, seperti cara meningkatkan kecekapan pembangunan, cara bekerjasama dengan ahli pasukan dalam pembangunan, dsb. Artikel ini akan memperkenalkan panduan praktikal untuk pembangunan jauh PyCharm untuk membantu pembangun menggunakan PyCharm dengan lebih baik untuk pembangunan jauh dan meningkatkan kecekapan kerja. 1. Kerja penyediaan dalam PyCh

Penggunaan peribadi Stable Diffusion untuk bermain dengan lukisan AI Penggunaan peribadi Stable Diffusion untuk bermain dengan lukisan AI Mar 12, 2024 pm 05:49 PM

StableDiffusion ialah model pembelajaran dalam sumber terbuka Fungsi utamanya adalah untuk menjana imej berkualiti tinggi melalui penerangan teks, dan menyokong fungsi seperti penjanaan graf, penggabungan model dan latihan model. Antara muka operasi model boleh dilihat dalam rajah di bawah. Bagaimana untuk menghasilkan gambar. Berikut adalah pengenalan kepada proses membuat gambar air minuman rusa Apabila menghasilkan gambar, ia dibahagikan kepada kata gesaan dan kata gesaan negatif jelas dan cuba terangkan pemandangan, objek, gaya dan warna yang anda inginkan secara terperinci. Sebagai contoh, daripada hanya mengatakan "rusa minum air", ia berkata "sebatang sungai, di sebelah pokok yang lebat, dan terdapat rusa minum air di sebelah anak sungai". tiada bangunan, tiada orang , tiada jambatan, tiada pagar, dan penerangan yang terlalu kabur boleh membawa kepada keputusan yang tidak konsisten.

Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Jan 05, 2024 pm 06:08 PM

Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest

Hubungan antara js dan vue Hubungan antara js dan vue Mar 11, 2024 pm 05:21 PM

Hubungan antara js dan vue: 1. JS sebagai asas pembangunan Web; 2. Kebangkitan Vue.js sebagai rangka kerja hadapan 3. Hubungan pelengkap antara JS dan Vue; Vue.

Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah Jan 05, 2024 pm 01:37 PM

Pengenalan kepada kaedah mendapatkan kod status HTTP dalam JavaScript: Dalam pembangunan bahagian hadapan, kita selalunya perlu berurusan dengan interaksi dengan antara muka bahagian belakang, dan kod status HTTP adalah bahagian yang sangat penting daripadanya. Memahami dan mendapatkan kod status HTTP membantu kami mengendalikan data yang dikembalikan oleh antara muka dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan memberikan contoh kod khusus. 1. Apakah kod status HTTP bermakna kod status HTTP apabila penyemak imbas memulakan permintaan kepada pelayan, perkhidmatan tersebut

Kuasai Python untuk meningkatkan kecekapan kerja dan kualiti hidup Kuasai Python untuk meningkatkan kecekapan kerja dan kualiti hidup Feb 18, 2024 pm 05:57 PM

Tajuk: Python menjadikan kehidupan lebih mudah: Kuasai bahasa ini untuk meningkatkan kecekapan kerja dan kualiti hidup Sebagai bahasa pengaturcaraan yang berkuasa dan mudah dipelajari, Python semakin popular dalam era digital hari ini. Bukan hanya untuk menulis program dan melakukan analisis data, Python juga boleh memainkan peranan yang besar dalam kehidupan seharian kita. Menguasai bahasa ini bukan sahaja dapat meningkatkan kecekapan kerja, tetapi juga meningkatkan kualiti hidup. Artikel ini akan menggunakan contoh kod khusus untuk menunjukkan aplikasi Python yang luas dalam kehidupan dan membantu pembaca

Subnet mask: peranan dan kesan ke atas kecekapan komunikasi rangkaian Subnet mask: peranan dan kesan ke atas kecekapan komunikasi rangkaian Dec 26, 2023 pm 04:28 PM

Peranan subnet mask dan kesannya terhadap kecekapan komunikasi rangkaian Pengenalan: Dengan populariti Internet, komunikasi rangkaian telah menjadi bahagian yang amat diperlukan dalam masyarakat moden. Pada masa yang sama, kecekapan komunikasi rangkaian juga menjadi salah satu tumpuan perhatian orang ramai. Dalam proses membina dan mengurus rangkaian, subnet mask ialah pilihan konfigurasi yang penting dan asas, yang memainkan peranan penting dalam komunikasi rangkaian. Artikel ini akan memperkenalkan peranan topeng subnet dan kesannya terhadap kecekapan komunikasi rangkaian. 1. Definisi dan fungsi subnet mask Subnet mask (subnetmask)

See all articles