前言

for語句和forEach()方法相信學(xué)習(xí)前端的朋友并不陌生，但我們在面試的時(shí)候，你能回答面試官的這個(gè)問題嗎？ 接下來，就一起來驗(yàn)證一下吧！

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

1.for

for 語句用于創(chuàng)建一個(gè)循環(huán)，該循環(huán)由括在括號中并用分號分隔的三個(gè)可選表達(dá)式組成，然后是要在循環(huán)中執(zhí)行的語句（通常是塊語句）。

語法：

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

初始化：一個(gè)表達(dá)式（包括一個(gè)賦值語句）或一個(gè)變量聲明。通常用于初始化計(jì)數(shù)器。表達(dá)式可以使用 var 或 let 關(guān)鍵字來聲明一個(gè)新變量。使用 var 聲明的變量不是循環(huán)的局部變量，而是與 for 循環(huán)在同一范圍內(nèi)。用 let 聲明的變量是語句的局部變量。這個(gè)表達(dá)式的結(jié)果是沒有意義的。

條件：條件表達(dá)式用于判斷循環(huán)的每次迭代是否可以執(zhí)行。如果表達(dá)式的計(jì)算結(jié)果為真，則將執(zhí)行該語句。此表達(dá)式是可選的。如果忽略，則認(rèn)為始終為真。如果評估結(jié)果為假，則執(zhí)行流程將跳到for語句結(jié)構(gòu)之后的第一條語句。

final-expression：每個(gè)循環(huán)結(jié)束時(shí)要執(zhí)行的表達(dá)式。執(zhí)行時(shí)間是在評估下一個(gè)條件之前。通常用于更新或增加計(jì)數(shù)器變量。

statement：只要條件的結(jié)果為真，就會執(zhí)行的語句。要在循環(huán)體內(nèi)執(zhí)行多個(gè)語句，請使用塊語句 ({ ... }) 將要執(zhí)行的語句括起來。沒有要執(zhí)行的語句，請使用空語句 (;)。

All expressions in the for statement are optional

2.forEach()

forEach() 方法對數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)。

語法：

arr.forEach(callback[, thisArg])

范圍：

callback：對數(shù)組中每個(gè)元素執(zhí)行的函數(shù)，函數(shù)接收三個(gè)參數(shù)：

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：可選參數(shù)。 執(zhí)行回調(diào)函數(shù)時(shí)用作 this 的值（引用對象）。

返回值：未定義

說明：forEach 方法對數(shù)組中每個(gè)具有有效值的項(xiàng)按升序執(zhí)行一次回調(diào)函數(shù)，那些已刪除或未初始化的項(xiàng)將被跳過（例如在稀疏數(shù)組上）。 回調(diào)函數(shù)會依次傳遞三個(gè)參數(shù)：

1).數(shù)組中當(dāng)前項(xiàng)的值

2).當(dāng)前項(xiàng)在數(shù)組中的索引

3).數(shù)組對象本身

3. for VS forEach（遍歷數(shù)組誰更塊）

事不宜遲，讓我們比較一下代碼。 誰會贏？

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 開發(fā)人員可以使用 time 和 console.timeEnd 來測量執(zhí)行 javascript 腳本所消耗的時(shí)間。  

注意：控制臺 time() 方法是計(jì)算器的開始方法，結(jié)束方法是 console.timeEnd()。 該方法執(zhí)行后，控制臺會顯示執(zhí)行時(shí)間。

4. 文末總結(jié)

畢竟，for 語句贏得了這場比賽。 讓我們總結(jié)一下原因：

1).for不創(chuàng)建函數(shù)

2).forEach創(chuàng)建每次調(diào)用的函數(shù)

3).函數(shù)現(xiàn)在需要單獨(dú)的作用域，這會產(chǎn)生額外的開銷

注意：日常開發(fā)中不要只考慮性能，forEach的代碼更具可讀性。

最后，感謝你的閱讀，如果你覺得有用的話，請記得點(diǎn)贊我，關(guān)注我，并分享給你身邊的朋友，謝謝，祝你編程愉快！