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
}

比較


for…in 是 ES5 的標準、for…of 是 ES6 才出現的標準,用來修正 for…in 的問題。簡而言之,就是「舊的比較大方,但給的東西不對」。

#javascript #迴圈







你可能感興趣的文章

關於 React 小書:評論功能

關於 React 小書:評論功能

前後端串接比較

前後端串接比較

資訊安全:湊雜與加密

資訊安全:湊雜與加密






留言討論