這些年來，JavaScript 發(fā)展得如此之快。如果你之前有其他編程語言經(jīng)驗的話，你可能無法相信在 JavaScript 中有4種方法可以編寫for 循環(huán)。

正如黑格爾所說：“存在就是合理的。”在技術演進的過程中，網(wǎng)絡的力量越來越強大。因此，對于現(xiàn)代 Web 開發(fā)的必然語言JavaScript 期望也越來越高。

for 循環(huán)的語法就是一個很好的例子。開發(fā)人員發(fā)現(xiàn)老式不夠好，至少對于每個使用場景。一些第三方庫或框架開始提供一些更好的循環(huán)功能。然后，新的JavaScript 標準出現(xiàn)了，你需要再次更新瀏覽器。

本文將按照出現(xiàn)的先后順序總結 JavaScript for 循環(huán)的4種編寫方式。閱讀后，你可以像專家一樣正確使用它們。

1、C 風格的“三表達式” For 循環(huán)

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

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

不用說，這是一種經(jīng)典的 C 風格方式。 如果我們愿意，我們可以一直使用這種時尚。 但它在現(xiàn)代 JavaScript 項目中不像以前那么流行，因為我們現(xiàn)在有更方便的方法。

2、“for…in…”循環(huán)

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

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

使用這種方式的最佳實踐是永遠不要將它用于數(shù)組。 由于數(shù)組也是幕后的對象，每一項的索引都被視為對象的屬性，索引順序是依賴于實現(xiàn)的，數(shù)組值可能不會按照你期望的順序訪問。

應用“for...in... ”到數(shù)組可能會導致一些意想不到的結果。

以下是問題“為什么使用“for...in”進行數(shù)組迭代是個壞主意?”的一個很好的例子。 在 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...”應用于數(shù)組。

3、 數(shù)組上的“forEach”方法

由于“for...in...”不適用于數(shù)組。 應該有更好的迭代 JavaScript 數(shù)組的方法。 所以 ES5 引入了數(shù)組的迭代方法。 在我看來，這種改進使 JavaScript 變得優(yōu)雅。

迭代方法很多，適用于不同的使用場景：

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

由于這篇文章是在討論 for 循環(huán)，我們通過一個簡單的例子來看看如何使用 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...”方法就是其中之一。 它使事情變得更加優(yōu)雅。

例如，我們可以像下面這樣迭代數(shù)組的項：

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

結論

JavaScript 作為一種編程語言，不是靜態(tài)的，而是不斷發(fā)展的。 for 循環(huán)語法的擴展是展示它的一個很好的例子。