內容導讀

for...of 一種用於遍歷數據結構的方法。它可遍歷的對象包括數組，對象，字符串，set和map結構等具有iterator 接口的數據結構。for...in循環更常用於對象的循環，如果用於數組的循環，那麼就要注意了，上述代碼中每次循環中得到的i是字符串類型，而不是預料中的數字類型，要想對它進行運算，那得先要進行類型轉換，造成不方便。寫法比for循環簡潔很多； 可以用break來終止整個循環，或者continute來跳出當前循環，繼續後面的循環； 結合keys( )獲取到循環的索引，並且是數字類型，而不是字符串類型。用break實現了終止整個循環，不會繼續後面的遍歷，所以打印結果為：1 2。用continue跳過當前循環，繼續後面的循環，所以打印結果為：1 2 4 5。

for...of 一種用於遍歷數據結構的方法。它可遍歷的對象包括數組，對象，字符串，set和map結構等具有iterator 接口的數據結構。

傳統遍歷方式與for...of優缺

1、for 循環

var arr = [1,2,3,4,5];
 for(let i = 0;i<arr.length> //...
 }
//缺點：代碼不夠簡潔。
/<arr.length>

2、forEach

var arr = [1,2,3,4,5];
arr.forEach(function (value,index) {
 //...
});
//缺點：無法中斷停止整個循環。

3、for...in

var arr = [1,2,3,4,5];
 for(let i in arr){
 //...
 } 

for...in循環更常用於對象的循環，如果用於數組的循環，那麼就要注意了，上述代碼中每次循環中得到的i是字符串類型，而不是預料中的數字類型，要想對它進行運算，那得先要進行類型轉換，造成不方便。

4、for...of

var arr = [1,2,3,4,5];
for(let value of arr){
 console.log(value);
}
//打印結果：依次輸出：1 2 3 4 5

寫法比for循環簡潔很多；

可以用break來終止整個循環，或者continute來跳出當前循環，繼續後面的循環；

結合keys( )獲取到循環的索引，並且是數字類型，而不是字符串類型。

循環可以終止

var arr = [1,2,3,4,5];
 for(let value of arr){
 if(value == 3){
 //終止整個循環
 break;
 }
 console.log(value);
 }
 //打印結果：1 2

用break實現了終止整個循環，不會繼續後面的遍歷，所以打印結果為：1 2。

可跳過當前循環

var arr = [1,2,3,4,5];
 for(let value of arr){
 if(value == 3){
 //跳過當前循環，繼續後面的循環
 continue; 

 }
 console.log(value);
 }
 //打印結果：1 2 4 5

用continue跳過當前循環，繼續後面的循環，所以打印結果為：1 2 4 5。

得到數字類型的索引

var arr = [1,2,3,4,5];
 for(let index of arr.keys()){
 console.log(index);
 }
 //打印結果：依次輸出:0 1 2 3 4

遍歷字符串

let word = "我愛吃花生";
 for(let w of word){
 console.log(w);
 }
 //打印結果：我 愛 吃 花 生

遍歷DOM List

 
1

 
2

 
3

 //假設有3個p元素
 let pList = document.getElementsByTagName('p');
 for(let p of pList){
 console.log(p);
 }
 // 打印結果： 
1

 // 
2

 // 
3