[[391221]]

究竟哪一種循環(huán)更快?

答案其實是：for(倒序)

最讓我感到驚訝的事情是，當我在本地計算機上進行測試之后，我不得不接受 for(倒序)是所有 for 循環(huán)中最快的這一事實。下面我會舉個對一個包含超過一百萬項元素的數(shù)組執(zhí)行一次循環(huán)遍歷的例子。

聲明：console.time() 結(jié)果的準確度在很大程度上取決于我們運行測試的系統(tǒng)配置。你可以在此處對準確度作進一步了解。

const million = 1000000;  
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('⏳'); 

造成這樣結(jié)果的原因很簡單，在代碼中，正序和倒序的 for 循環(huán)幾乎花費一樣的時間，僅僅相差了 0.1 毫秒。原因是，for(倒序)只需要計算一次起始變量 let i = arr.length，而在正序的 for 循環(huán)中，它在每次變量增加后都會檢查條件 i

而 forEach 是 Array 原型的一個方法，與普通的 for 循環(huán)相比，forEach 和 for…of 需要花費更多的時間進行數(shù)組迭代。(譯者注：但值得注意的是，for…of 和 forEach 都從對象中獲取了數(shù)據(jù)，而原型并沒有，因此沒有可比性。)

循環(huán)的類型，以及我們應(yīng)該在何處使用它們

1. For 循環(huán)(正序和倒序)

我想，也許大家都應(yīng)該對這個基礎(chǔ)循環(huán)非常熟悉了。我們可以在任何我們需要的地方使用 for 循環(huán)，按照核定的次數(shù)運行一段代碼。最基礎(chǔ)的 for 循環(huán)運行最迅速的，那我們每一次都應(yīng)該使用它，對嗎?并不然，性能不僅僅只是唯一尺度，代碼可讀性往往更加重要，就讓我們選擇適合我們應(yīng)用程序的變形即可。

2. forEach

這個方法需要接受一個回調(diào)函數(shù)作為輸入?yún)?shù)，遍歷數(shù)組的每一個元素，并執(zhí)行我們的回調(diào)函數(shù)(以元素本身和它的索引(可選參數(shù))作為參數(shù)賦予給回調(diào)函數(shù))。forEach 還允許在回調(diào)函數(shù)中使用一個可選參數(shù) this。

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

3. for…of

for…of 是在 ES6(ECMAScript 6)中實現(xiàn)標準化的。它會對一個可迭代的對象(例如 array、map、set、string 等)創(chuàng)建一個循環(huán)，并且有一個突出的優(yōu)點，即優(yōu)秀的可讀性。

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

需要注意的是，請不要在生成器中使用 for……of，即便 for……of 循環(huán)提前終止。在退出循環(huán)后，生成器被關(guān)閉，并嘗試再次迭代，不會產(chǎn)生任何進一步的結(jié)果。

4. for in

for…in 會在對象的所有可枚舉屬性上迭代指定的變量。對于每個不同的屬性，for…in 語句除返回數(shù)字索引外，還將返回用戶定義的屬性的名稱。因此，在遍歷數(shù)組時最好使用帶有數(shù)字索引的傳統(tǒng) for 循環(huán)。因為 for…in 語句還會迭代除數(shù)組元素之外的用戶定義屬性，就算我們修改了數(shù)組對象(例如添加自定義屬性或方法)，依然如此。

const details = {firstName: 'john', lastName: 'Doe'}; 
let fullName = ''; 
for (let i in details) { 
    fullName += details[i] + ' '; // fullName: john doe 
} 

for…of 和 for…in

for…of 和 for…in 之間的主要區(qū)別是它們迭代的內(nèi)容。for…in 循環(huán)遍歷對象的屬性，而 for…of 循環(huán)遍歷可迭代對象的值。

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

結(jié)論

• for 最快，但可讀性比較差
• foreach 比較快，能夠控制內(nèi)容
• for...of 比較慢，但香
• for...in 比較慢，沒那么方便