4 種在JavaScript中編寫For循環的方法

原文 | https://medium.com/techtofreedom/4-ways-to-write-for-loops-in-javascript-d0db6aa8f7b6

翻譯 | 楊小二

這些年來，JavaScript 發展得如此之快。如果你之前有其他程式設計語言經驗的話，你可能無法相信在 JavaScript 中有4種方法可以編寫for 循環。

正如黑格爾所說：“存在就是合理的。”在技術演進的過程中，網絡的力量越來越強大。是以，對于現代 Web 開發的必然語言JavaScript 期望也越來越高。

for 循環的文法就是一個很好的例子。開發人員發現老式不夠好，至少對于每個使用場景。一些第三方庫或架構開始提供一些更好的循環功能。然後，新的JavaScript 标準出現了，你需要再次更新浏覽器。

本文将按照出現的先後順序總結 JavaScript for 循環的4種編寫方式。閱讀後，你可以像專家一樣正确使用它們。

1、C 風格的“三表達式” For 循環

這是自 ECMAScript 3 (ES3) 以來可用的老式方法。我們可以用三表達式樣式來編寫 for 循環：

var a = [1,2,3,4]
for (var i=0; i<a.length; i++){
    console.log(a[i])
}      

不用說，這是一種經典的 C 風格方式。 如果我們願意，我們可以一直使用這種時尚。 但它在現代 JavaScript 項目中不像以前那麼流行，因為我們現在有更友善的方法。

2、“for…in…”循環

為了使對象的疊代更容易，有一個“for...in...”文法，它也可以從 ES3 獲得。

var author = {name: "Yang", job: "programmer"}
for (var k in author){
    console.log(k + ':' + author[k]);
}
//name:Yang
//job:programmer      

使用這種方式的最佳實踐是永遠不要将它用于數組。 由于數組也是幕後的對象，每一項的索引都被視為對象的屬性，索引順序是依賴于實作的，數組值可能不會按照你期望的順序通路。

應用“for...in... ”到數組可能會導緻一些意想不到的結果。

以下是問題“為什麼使用“for...in”進行數組疊代是個壞主意？”（位址：https://stackoverflow.com/questions/500504/why-is-using-for-in-for-array-iteration-a-bad-idea）的一個很好的例子。 在 StackOverflow 上。

// Somewhere deep in your JavaScript library...
Array.prototype.foo = 1;


// Now you have no idea what the below code will do.
var a = [1, 2, 3, 4, 5];
for (var x in a){
    // Now foo is a part of EVERY array and 
    // will show up here as a value of 'x'.
    console.log(x);
}


/* Will display:
   0
   1
   2
   3
   4
   foo
*/      

是以，為了使你的代碼沒有錯誤，永遠不要将“for...in...”應用于數組。

3、 數組上的“forEach”方法

由于“for...in...”不适用于數組。 應該有更好的疊代 JavaScript 數組的方法。 是以 ES5 引入了數組的疊代方法。 在我看來，這種改進使 JavaScript 變得優雅。

疊代方法很多，适用于不同的使用場景：

• Array.forEach()
• Array.map()
• Array.filter()
• Array.reduce()
• Array.every()
• Array.some()
• …

由于這篇文章是在讨論 for 循環，我們通過一個簡單的例子來看看如何使用 Array.forEach() 方法：

var author = [ 'Y', 'a', 'n', 'g' ];
author.forEach(function(val){
    console.log(val);
});
// Y
// a
// n
// g      

4、ES6 中的“for...of...”文法

衆所周知，ES6 是 JavaScript 的裡程碑。 這個版本引入了許多很棒的功能。 “for...of...”方法就是其中之一。 它使事情變得更加優雅。

例如，我們可以像下面這樣疊代數組的項：

let author = [ 'Y', 'a', 'n', 'g' ];
for (let char of author){
    console.log(char);
}
// Y
// a
// n
// g      

結論

JavaScript 作為一種程式設計語言，不是靜态的，而是不斷發展的。 for 循環文法的擴充是展示它的一個很好的例子。

謝謝你的閱讀。 如果你喜歡，别忘了關注我，擷取更多關于程式設計和技術的精彩文章！

學習更多技能

請點選下方公衆号

​