2. 程式人生 > >JS之for迴圈優化

JS之for迴圈優化

阿新 • • 發佈：2019-02-16
眾所周知Js中的迴圈大致可以分為4中： 
1.for迴圈 
Javascript程式碼  收藏程式碼
  1. for(var i=0;i<10;i++){  
  2.   //迴圈主題  
  3. }  

其中for迴圈是最常見的迴圈結構，由四部分組成：初始化、前測條件、後執行體、迴圈體。當代碼執行遇到for迴圈時，先執行初始化程式碼，然後進入前側條件。如果前側條件為true，則執行迴圈體。迴圈體執行完後，後執行程式碼開始執行。 
2. while 迴圈  
while迴圈是最簡單的前測迴圈，有一個前測條件和一個迴圈體構成： 
Javascript程式碼  收藏程式碼
  1. var  i = 0;  
  2. while(i < 10){  
  3.    //迴圈主題
      
  4.    i++;  
  5. }  

3. do..while迴圈  
do-while 迴圈是js中唯一一種後測迴圈，由兩部分組成，迴圈體和後測條件 
Javascript程式碼  收藏程式碼
  1. var i = 0;  
  2. do{  
  3.     //迴圈體  
  4. }while(i++ < 10)  

在do-while中至少會執行一次迴圈體 
4 for-in迴圈 
該迴圈有一個特別的用途：可以列舉任何物件的屬性名。 
Javascript程式碼  收藏程式碼
  1. for(var prop in object){  
  2.    //迴圈體  
  3. }  

迴圈體每次執行時，prop變數被賦值為object的一個屬性名，直到所有屬性遍歷完成才返回。所返回的屬性包括物件例項屬性和從原型鏈中繼承而來的屬性 


以後對4中迴圈進行了大致的介紹，接下來說說如何在進行相關係能提升 
4中迴圈型別中，只有for-in迴圈比其他幾種明顯要慢：主要原因在於每次迭代操作會同時搜尋例項或原型屬性，每次迭代都會產生更多開銷。 

如果迴圈型別與效能無關，可以從以下兩個可選因素來提高整體效能 
1.每次迭代處理的事務 
2.迭代的次數 

減少迭代的工作量 
很明顯，如果一次迴圈迭代要花很長時間去執行，那麼多次迴圈需要花更多的時間。一個提升迴圈整體速度的好方法就是限制迴圈中耗時的運算元量。 
一個典型的陣列處理迴圈可以採用三種迴圈中的任何一種。最常見的寫法如下： 
Javascript程式碼  收藏程式碼
  1. for(var i = 0; i < items.length; i++){  
  2.     process(items[i]);  
  3. }  
  4. var j = 0;  
  5. while(j < items.length){  
  6.     process(items[j]);  
  7. }  
  8. var k = 0;  
  9. do{  
  10.    process(items[k]);  
  11. }while(k < items.length);  

   上面的每個迴圈中，每次進行迴圈體時都會產生如下操作： 
   1. 一次控制條件中的屬性查詢（items.length） 
   2. 一次控制條件中的數值大小的比較（i<items.length） 
   3. 一次控制條件結果是否為true的比較（i<items.length == true） 
   4. 一次自增操作（i++） 
   5. 一次陣列查詢（items[i]） 
   6. 一次函式呼叫（ process(items[j]);） 

   這些簡單迴圈中，儘管程式碼不多，但每次迭代都要進行許多操作。程式碼執行速度很大晨讀上取決於函式process()對每個陣列項的操作，儘管如此，減少每次迭代中的操作能大幅提高迴圈的整體效能。 
   優化迴圈的第一步就是減少物件成員及陣列項的查詢次數。前面例子中每次迴圈都要查詢items.length，這樣做很耗時，由於該值在迴圈執行過程中從未變過，因此產生了不必要的效能損失，提高整個迴圈的效能很簡單，只查詢一次屬性，並把值儲存到一個區域性變數中，然後在控制條件中使用整個變數 
Javascript程式碼  收藏程式碼
  1. for(var i = 0,len = item.length; i < len; i++){  
  2.     process(items[i]);  
  3. }  
  4. var j = 0,  
  5.     len = items.length;  
  6. while(j < len ){  
  7.     process(items[j]);  
  8. }  
  9. var k = 0,  
  10.     num = items.length;  
  11. do{  
  12.    process(items[k]);  
  13. }while(k < num);  


   還可以通過倒序迴圈來進行。 

減少迭代次數 

   即使是迴圈體中最快的程式碼，累計迭代上千次也會慢下來。此外，迴圈體執行時也會帶來小效能開銷，不僅僅是增加總體執行時間。減少迭代次數能獲得更加顯著的效能提升。下面介紹一種廣為人知的限制迴圈迭代次數的模式被稱為“達夫裝置（Duff's Device）”: 
   Duff's Device 是一個迴圈體展開技術，使得一次迭代實際執行了多次迭代的操作 
Javascript程式碼  收藏程式碼
  1. var iterations = Math.floor(items.length/8),  
  2.     startAt = items.length%8,  
  3.     i = 0;  
  4. do{  
  5.     switch(startAt){  
  6.         case 0 : process(items[i++]);  
  7.         case 7 : process(items[i++]);  
  8.         case 6 : process(items[i++]);  
  9.         case 5 : process(items[i++]);  
  10.         case 4 : process(items[i++]);  
  11.         case 3 : process(items[i++]);  
  12.         case 2 : process(items[i++]);  
  13.         case 1 : process(items[i++]);  
  14.     }  
  15.     startAt =  0;  
  16.  }while(--iterations);  

相關推薦

JS之for迴圈優化

眾所周知Js中的迴圈大致可以分為4中： 1.for迴圈  Javascript程式碼   for(var i=0;i<10;i++){     //迴圈主題   }   其中for迴圈是最常見的迴圈結構，由四部分組成：初始化、前測條件、後執行體、迴圈體。當代碼執

Js之for迴圈

定義等腰三角形的行數 var num = 10; //每一行的空格數為總行數減去當前第幾行 //每一行的星星個數為 當前行*2-1； //迴圈條件行數小於等於10 for(var i=1;i<=num;i++){ for(var j=num-i;j

菜鳥要做架構師——java效能優化之for迴圈

完成同樣的功能，用不同的程式碼來實現，效能上可能會有比較大的差別，所以對於一些效能敏感的模組來說，對程式碼進行一定的優化還是很有必要的。今天就來說一下java程式碼優化的事情，今天主要聊一下對於for（while等同理）迴圈的優化。 作為三大結構之一的迴圈，在我們編寫程式碼的時候會經常用到。

JS中for迴圈之斐波拉切數列-兔子問題

兔子問題： 有個人想知道，一年之內一對兔子能繁殖多少對？於是就築了一道圍牆把一對兔子關在裡面。已知一對兔子每個月可以生一對小兔子，而一對兔子從出生後第3個月起每月生一對小兔子。假如一年內沒有發生死亡現象，那麼，一對兔子一年內（12個月）能繁殖成多少對？（兔子的規律為數列，1，1，2，3，5，8，

用9種辦法解決 JS 閉包經典面試題之 for 迴圈取 i

閉包 正確的說,應該是指一個閉包域,每當聲明瞭一個函式,它就產生了一個閉包域(可以解釋為每個函式都有自己的函式棧),每個閉包域(Function 物件)都有一個 function scope(不是屬性),function scope內預設有個名為 Globe 的全域性引用(有了這個引用,就可以直接

迴圈與閉包 之 for迴圈經典問題解釋 / 結合《你不知道的JS》與《高程》案例

案例一 for (var i = 1; i <= 5; i++) { setTimeout( function timer() { console.log(i); }, i*1000) } 輸出結果： 當時間是固定的數，如0、1

js 變數的作用域之for迴圈

var funcs = [] for (var i = 0; i < 10; i++) { funcs.push(function() { console.log(i) }) } funcs.forEach(function(func) { func()

Python基礎（六）之 for 迴圈

全部測試程式碼、 #！/usr/bin/env python3 # _*_ conding:utf-8 _*_ #計算1+2+3 count=1+2+3 print('count--',count) #計算1+2+3+...+10; sum=0 for i in [1,2,

JAVA演算法習題集合—第一階段2：基礎演算法練習之for迴圈的練習

  知識點：for迴圈、for迴圈和if語句的巢狀使用 8、輸出1到100 描述：輸出從1到100 執行結果: 1 2 3 4...100 for(int i=1;i<=100;i++){ Syste

JS獲取for迴圈中i的實時值

最近在完成燈箱效果時，需要獲取for迴圈中i的實時值來定位大圖輪播的索引，但最初獲得的是i的最大值 幾種獲取for迴圈中i的實時值方法： 自調： for (var i = 0; i < itemli.length; i++) { (function (arg) {

python迴圈之for迴圈

python還有個迴圈是for迴圈。 for迴圈一般用於遍歷元組、集合、列表這種資料型別裡面的所有元素。（字典只會遍歷索引） #簡單的for迴圈結構（不同於while迴圈容易變成無限迴圈，for迴圈遍歷完或中止便會結束執行）# a = ('ppap','hello,world','pho

js在for迴圈裡新增事件後獲取i

1 <ul> 2 <li index="1">1</li> 3 <li index="2">1</li> 4 <li index="3">1</l

JS中for迴圈如何令變數每次增量不是1？

for迴圈的常見格式是for（var i=0;i<arr.length;i++){……}。對於有些情況下，需要間隔獲取物件，採用加1的迴圈雖然可以通過設定條件來實現，但是直接從for迴圈的變數增量著手也可以一步到位。 for迴圈增量為2的程式碼： for(var i

js中for迴圈內的匿名函式使用i的問題及解決方案

問題描述 js中由於作用域鏈及js執行機制導致的for迴圈中匿名函式使用i的問題 <!--現有html結構程式碼如下--> <ul> <li>VueJs</li> <li>AngularJs<

js裡面for迴圈的++i與i++

首先我們應該都知道++i與i++的區別是： ++i 是先執行 i=i+1 再使用 i 的值，而 i++ 是先使用 i 的值再執行 i=i+1； 然後我們也知道for迴圈的執行順序如下： for(A;B;C){ 　　D;}進入迴圈執行A;//只是進入的時候執行.執行B;//條件為真才執行D,不然就跳出for

批處理命令之For迴圈詳解

批處理for命令詳解 FOR這條命令基本上都被用來處理文字,但還有其他一些好用的功能! 看看他的基本格式(這裡我引用的是批處理中的格式,直接在命令列只需要一個%號) FOR 引數 %%變數名 IN (相關檔案或命令) DO 執行的命令 引數:FOR有4個引數 /d /l /r

java基礎之for迴圈與while迴圈

2018年11月15日 17:11:12 塔城就是個弟弟 閱讀數：2 標籤： for迴圈 while迴圈

C++11之for迴圈

簡單使用： 輸出每個元素： string s = "biu biu biu"; for(auto i : s) { cout<<i<<endl; } 順帶

python 入門之 – for 迴圈（十三）

Python 的 for迴圈 可以遍歷任何序列的專案，如一個列表陣列或者一個字串。 語法： for 代理變數 in 物件 : 執行操作(代理變數) 如，我現在要遍歷迴圈一個字串，把每個字元單獨輸出： string = '123456' for i

Scala之for迴圈和函式進階

1、for迴圈 //for迴圈 for(i <- 1 to 2; j<- 1 to 2){ print(100*i+j + " "); } println(); //for迴圈 for(i <- 1