????for...of 一種用于遍歷數(shù)據(jù)結(jié)構(gòu)的方法。它可遍歷的對象包括數(shù)組灯帮，對象崖技，字符串，set和map結(jié)構(gòu)等具有iterator 接口的數(shù)據(jù)結(jié)構(gòu)钟哥。
傳統(tǒng)遍歷方式與for...of優(yōu)缺
1迎献、for 循環(huán)
var arr = [1,2,3,4,5];
for(let i = 0;i<arr.length;i++){
//...
}
//缺點(diǎn)：代碼不夠簡潔。
2腻贰、forEach
var arr = [1,2,3,4,5];
arr.forEach(function (value,index) {
//...
});
//缺點(diǎn)：無法中斷停止整個循環(huán)吁恍。
3、for...in
var arr = [1,2,3,4,5];
for(let i in arr){
//...
}
for...in循環(huán)更常用于對象的循環(huán)，如果用于數(shù)組的循環(huán)冀瓦，那么就要注意了伴奥，上述代碼中每次循環(huán)中得到的i是字符串類型，而不是預(yù)料中的數(shù)字類型翼闽，要想對它進(jìn)行運(yùn)算拾徙，那得先要進(jìn)行類型轉(zhuǎn)換，造成不方便肄程。
4锣吼、for...of
var arr = [1,2,3,4,5];
for(let value of arr){
console.log(value);
}
//打印結(jié)果：依次輸出：1 2 3 4 5
寫法比for循環(huán)簡潔很多；
可以用break來終止整個循環(huán)蓝厌，或者continute來跳出當(dāng)前循環(huán)玄叠，繼續(xù)后面的循環(huán)；
結(jié)合keys( )獲取到循環(huán)的索引拓提，并且是數(shù)字類型读恃，而不是字符串類型。
循環(huán)可以終止
var arr = [1,2,3,4,5];
for(let value of arr){
if(value == 3){
//終止整個循環(huán)
break;
}
console.log(value);
}
//打印結(jié)果：1 2
用break實(shí)現(xiàn)了終止整個循環(huán)代态，不會繼續(xù)后面的遍歷寺惫，所以打印結(jié)果為：1 2。
可跳過當(dāng)前循環(huán)
var arr = [1,2,3,4,5];
for(let value of arr){
if(value == 3){
//跳過當(dāng)前循環(huán)蹦疑，繼續(xù)后面的循環(huán)
continue;
}
console.log(value);
}
//打印結(jié)果：1 2 4 5
用continue跳過當(dāng)前循環(huán)西雀，繼續(xù)后面的循環(huán)，所以打印結(jié)果為：1 2 4 5歉摧。
得到數(shù)字類型的索引
var arr = [1,2,3,4,5];
for(let index of arr.keys()){
console.log(index);
}
//打印結(jié)果：依次輸出:0 1 2 3 4
遍歷字符串
let word = "我愛吃花生";
for(let w of word){
console.log(w);
}
//打印結(jié)果：我 愛 吃 花 生
遍歷DOM List
<p>1</p>
<p>2</p>
<p>3</p>
//假設(shè)有3個p元素
let pList = document.getElementsByTagName('p');
for(let p of pList){
console.log(p);
}
// 打印結(jié)果：<p>1</p>
// <p>2</p>
// <p>3</p>
json數(shù)組循環(huán)
var arr1 = [{a:1},{a:2},{a:3}];
for (var val of arr1.keys()) {
console.log(val,arr1[val].a)
}
// 0 1
// 1 2
// 2 3
var arr1 = [{a:1},{a:2},{a:3}];
for (var val of arr1) {
console.log(val)
}
// 1
// 2
// 3
for of不能遍歷對象艇肴，因?yàn)槟軌虮籪or...of正常遍歷的，都需要實(shí)現(xiàn)一個遍歷器Iterator叁温。而數(shù)組再悼、字符串、Set膝但、Map結(jié)構(gòu)冲九，早就內(nèi)置好了Iterator（迭代器），它們的原型中都有一個Symbol.iterator方法跟束，而Object對象并沒有實(shí)現(xiàn)這個接口莺奸，使得它無法被for...of遍歷。例如：
Array.prototype[Symbol.iterator];
// ? values() { [native code] }
String.prototype[Symbol.iterator];
// ? [Symbol.iterator]() { [native code] }
Set.prototype[Symbol.iterator];
// ? values() { [native code] }
Map.prototype[Symbol.iterator];
// ? entries() { [native code] }
Object.prototype[Symbol.iterator];
// undefined
