for...in、for...of

用 for…in 跟 for…of 都可以遍歷資料，兩者雖可互通，但各有較適合的使用時機。

for…in

「for…in」不限於可疊代的資料類型，如物件等也可使用，但若不經設定，輸出的為索引值：

//可疊代資料

//不經設定：輸出索引值
let arr1 = [10,20,30];
for(let i in arr1){
    console.log(i);           //0 \n 1 \n 2
    }

//欲輸出值：用索引值對照
let arr2 = [10,20,30];
for(let i in arr2){
    console.log(arr2[i]);    //10 \n 20 \n 30
    }

==================================================

//不可疊代資料

//不經設定：輸出鍵值
let obj1 = {
    first:100,
    second:200,
    third:300
};
for(let i in obj1){
    console.log(i);         //first \n second \n third
}

//欲輸出值：用鍵值對照
let obj2 = {
    first:100,
    second:200,
    third:300
};
for(let i in obj2){
    console.log(obj2[i]);    //100 \n 200 \n 300
}

for…of

「for...of」與「for…in」有一樣的功能，但僅限於可疊代資料類型，如字串、陣列、NodeList 等，輸出的為值；若要套用於不可疊代的資料類型，須套用「Object.keys()」：

//可疊代資料

//不經設定：輸出值
let arr1 = [10,20,30];
for(let i of arr1){
    console.log(i);                    //10 \n 20 \n 30
}

//欲輸出索引值：用indexOf()
let arr2 = [10,20,30];
for(let i of arr2){
    console.log(arr2.indexOf(i));      //0 \n 1 \n 2
}

==================================================

//不可疊代資料：用Object.keys()

//不經設定：輸出鍵值
let obj1 = {
    first:100,
    second:200,
    third:300
};
for(let i of Object.keys(obj1)){
    console.log(i);                     //first \n second \n third
}

//欲輸出值：用鍵值對照
let obj2 = {
    first:100,
    second:200,
    third:300
};
for(let i of Object.keys(obj2)){
    console.log(obj2[i]);                //100 \n 200 \n 300
}