【JavaScript 】for 迴圈進化史

標籤：index   key   copy   src   return   bar   -o   解決   區別   

ECMAScript 6已經逐漸普及，經過二十多年的改進，很多功能也有了更成熟的語句，比如 for 迴圈

這篇部落格將介紹一下從最初的 for 迴圈，到 ES6 的 for-of 等四種遍曆方法

先定義一個數組：

const myArray = [1, 5, 9];myArray.name = ‘wise‘

在控制台中列印這個數組，會看到這個數組的全貌：

 

一、 for

相信大部分開發工作者，最初遍曆數組的方法都是使用 for 迴圈：

for ( let i = 0; i < myArray.length; i++ ) {    console.log(myArray[i]);}

作為初代迴圈語句，for 語句僅僅解決了遍曆這一功能，但冗長的代碼還是顯得過於笨重

 

二、 for-in

相比 for 語句，for-in 就輕巧得多，但是 for-in 通常用來遍曆對象，如果遍曆數組的話...

for ( let key in myArray ) {    console.log(key);}

直接遍曆的話，會列印數組的 index，而 index 是 string 類型

如果編程的時候不注意，很可能在無意中進行了字串的計算： "1"+"1"="11"

所以使用 for-in 遍曆數組的正確姿勢應該是：

for ( let key in myArray) {    console.log(myArray[key]);}

和 for 迴圈不同，for-in 語句還將自訂屬性 "name" 的值 "wise" 列印了出來

所以用 for-in 遍曆數組這種事，還是別在開發的時候幹了

 

三、 forEach

ES5 發布之後，js 新增了內建方法 forEach，這確實是一個遍曆數組的好方法：

myArray.forEach(function (value) {     console.log(value);});

但是 forEach 的本質還是一個方法，並不是語句

所以它並不能響應 break、continue 和 return 語句

 

四、 for-of

仔細分析一下上面三種方法，如果僅限於遍曆數組的話，似乎最初的 for 語句反而最合適

直到 ES6 橫空出世，新的迴圈語句 for-of 開始嶄露頭角

for ( let key of myArray ) {     console.log(key);}

 

沒錯，for-of 就是最直接最清爽的遍曆數組的辦法

如果用一句話概括 for-in 與 for-of 的區別的話，那就是：

for-in 迴圈用來遍曆對象屬性，for-of 迴圈用來遍曆資料

 

五、 for-of 不僅如此

作為一個 ES6 新增的語句，for-of 和其他 ES6 文法的結合，才是它的強大之處

 

遍曆 Set 類型：

const mySet = new Set(‘wwiissee‘);for ( let value of mySet ) {    console.log(value);}

遍曆 Map 類型：

const myMap = new Map([  [‘name‘, ‘wise‘],  [‘info‘, ‘wrong‘],  [‘home‘, ‘cnblogs‘]]);for ( let [key, value] of myMap ) {    console.log(key + ‘ is ‘ + value);}

【JavaScript 】for 迴圈進化史