天天看點

使用for和forEach周遊數組哪個更快?

使用for和forEach周遊數組哪個更快?

前言

for語句和forEach()方法相信學習前端的朋友并不陌生,但我們在面試的時候,你能回答面試官的這個問題嗎? 接下來,就一起來驗證一下吧!

要知道哪個更快,首先我們需要了解這兩者是如何使用的。

1.for

for 語句用于建立一個循環,該循環由括在括号中并用分号分隔的三個可選表達式組成,然後是要在循環中執行的語句(通常是塊語句)。

文法:

for ([initialization]; [condition]; [final-expression]){
  statement  
}      

初始化:一個表達式(包括一個指派語句)或一個變量聲明。通常用于初始化計數器。表達式可以使用 var 或 let 關鍵字來聲明一個新變量。使用 var 聲明的變量不是循環的局部變量,而是與 for 循環在同一範圍内。用 let 聲明的變量是語句的局部變量。這個表達式的結果是沒有意義的。

條件:條件表達式用于判斷循環的每次疊代是否可以執行。如果表達式的計算結果為真,則将執行該語句。此表達式是可選的。如果忽略,則認為始終為真。如果評估結果為假,則執行流程将跳到for語句結構之後的第一條語句。

final-expression:每個循環結束時要執行的表達式。執行時間是在評估下一個條件之前。通常用于更新或增加計數器變量。

statement:隻要條件的結果為真,就會執行的語句。要在循環體内執行多個語句,請使用塊語句 ({ ... }) 将要執行的語句括起來。沒有要執行的語句,請使用空語句 (;)。

All expressions in the for statement are optional      

2.forEach()

forEach() 方法對數組的每個元素執行一次提供的函數。

文法:

arr.forEach(callback[, thisArg])      

範圍:

callback:對數組中每個元素執行的函數,函數接收三個參數:

currentValue: The current element in the array being processed.
index optional value: the index of the current element in the array being processed.
array optional value: the array that the forEach() method is operating on.      

thisArg:可選參數。 執行回調函數時用作 this 的值(引用對象)。

傳回值:未定義

說明:forEach 方法對數組中每個具有有效值的項按升序執行一次回調函數,那些已删除或未初始化的項将被跳過(例如在稀疏數組上)。 回調函數會依次傳遞三個參數:

1).數組中目前項的值

2).目前項在數組中的索引

3).數組對象本身

3. for VS forEach(周遊數組誰更塊)

事不宜遲,讓我們比較一下代碼。 誰會赢?

const arr = []
 // Create an array with a million elements
 for (let i = 0; i < 100 * 10000; i++) {
   arr.push(i)
 }


 const length = arr.length


 // Use for to walk through the array and print the time
 console.time('for')


 let n1 = 0
 for (let o = 0; o < length; o++) {
   n1++
 }
 console.timeEnd('for') // for: 2.639ms


 // Use forEach to traverse and print the time
 console.time('forEach')
 let n2 = 0
 arr.forEach(() => {
   n2++
 })
 console.timeEnd('forEach') // forEach: 14.059ms      

這兩種方法控制台。 web 開發人員可以使用 time 和 console.timeEnd 來測量執行 javascript 腳本所消耗的時間。 

注意:控制台 time() 方法是電腦的開始方法,結束方法是 console.timeEnd()。 該方法執行後,控制台會顯示執行時間。

使用for和forEach周遊數組哪個更快?

4. 文末總結

畢竟,for 語句赢得了這場比賽。 讓我們總結一下原因:

1).for不建立函數

2).forEach建立每次調用的函數

3).函數現在需要單獨的作用域,這會産生額外的開銷

注意:日常開發中不要隻考慮性能,forEach的代碼更具可讀性。

最後,感謝你的閱讀,如果你覺得有用的話,請記得點贊我,關注我,并分享給你身邊的朋友,謝謝,祝你程式設計愉快!

學習更多技能

請點選下方公衆号