這些年來，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
- 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”進行數組迭代是個壞主意?”的一個很好的例子。 在 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 循環語法的擴展是展示它的一個很好的例子。
原文鏈接：https://www.toutiao.com/a7045097719052026379/
