這些年來(lái)，JavaScript 發(fā)展得如此之快。如果你之前有其他編程語(yǔ)言經(jīng)驗(yàn)的話，你可能無(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)：

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

不用說(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 獲得。

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

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

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

以下是問(wèn)題“為什么使用“for...in”進(jìn)行數(shù)組迭代是個(gè)壞主意?”的一個(gè)很好的例子。 在 StackOverflow 上。

1. // Somewhere deep in your JavaScript library...
2. Array.prototype.foo = 1;
5. // Now you have no idea what the below code will do.
6. var a = [1, 2, 3, 4, 5];
7. for (var x in a){
8. // Now foo is a part of EVERY array and
9. // will show up here as a value of 'x'.
10. console.log(x);
11. }
14. /* Will display:
15. 0
16. 1
17. 2
18. 3
19. 4
20. foo
21. */

因此，為了使你的代碼沒(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() 方法：

1. var author = [ 'Y', 'a', 'n', 'g' ];
2. author.forEach(function(val){
3. console.log(val);
4. });
5. // Y
6. // a
7. // n
8. // g

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

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

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

1. let author = [ 'Y', 'a', 'n', 'g' ];
2. for (let char of author){
3. console.log(char);
4. }
5. // Y
6. // a
7. // n
8. // g

結(jié)論

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

原文鏈接：https://www.toutiao.com/a7045097719052026379/