內容導讀
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;i2、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
閱讀更多 浮生偷閒 的文章
