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

正如黑格爾所說(shuō)：“存在就是合理的。”在技術(shù)演進(jìn)的過(guò)程中，網(wǎng)絡(luò)的力量越來(lái)越強(qiáng)大。因此，對(duì)于現(xiàn)代 Web 開(kāi)發(fā)的必然語(yǔ)言JavaScript 期望也越來(lái)越高。

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

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

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

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

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

不用說(shuō)，這是一種經(jīng)典的 C 風(fēng)格方式。 如果我們?cè)敢猓覀兛梢砸恢笔褂眠@種時(shí)尚。 但它在現(xiàn)代 JavaScript 項(xiàng)目中不像以前那么流行，因?yàn)槲覀儸F(xiàn)在有更方便的方法。

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

為了使對(duì)象的迭代更容易，有一個(gè)“for...in...”語(yǔ)法，它也可以從 ES3 獲得。

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

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

應(yīng)用“for...in... ”到數(shù)組可能會(huì)導(dǎo)致一些意想不到的結(jié)果。

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

因此，為了使你的代碼沒(méi)有錯(cuò)誤，永遠(yuǎn)不要將“for...in...”應(yīng)用于數(shù)組。

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

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

迭代方法很多，適用于不同的使用場(chǎng)景：

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

由于這篇文章是在討論 for 循環(huán)，我們通過(guò)一個(gè)簡(jiǎn)單的例子來(lái)看看如何使用 Array.forEach() 方法：

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

4、ES6 中的“for...of...”語(yǔ)法

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

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

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

結(jié)論

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