遍歷對象的幾種方式

遍歷對象的幾種方式

for in

for in應該是最常見的遍歷對象的方式

var obj = {
    name: 'Tracy',
    age: 26,
    height: 178
}
for (let k in obj) {
    console.log(k);
}

// print:
    // name
    // age
    // height

其實還有幾種遍歷對象的方式：

1. Object.keys()：遍歷對象的鍵
2. Object.values()：遍歷對象的值
3. Object.entries(): 遍歷對象返回鍵值對數組

Object.keys() + Object.values()：

var obj = {
    name: 'Tracy',
    age: 26,
    height: '178cm'
}
// 遍歷對象的鍵
var key = Object.keys(obj);
console.log(key);     // [ 'name', 'age', 'height' ]

// 遍歷對象的值
var val = Object.values(obj);
console.log(val);     // [ 'Tracy', 26, '176cm' ]
console.log(val[2]);  // 176cm

for(let key in obj) {
    console.log(obj[key]);
}
// Tracy
// 26
// 178cm

Object.entries()

Object.entries()方法返回一個給定對象自身可枚舉屬性的鍵值對數組，其排列與使用 for...in 循環遍歷該對象時返回的順序一致（區別在於 for-in 循環也枚舉原型鏈中的屬性）。

var hero = {
    emperor: '曹操',
    general: '周瑜',
    worrory: '馬超'
}
console.log(Object.entries(hero));   // [ [ 'emperor', '曹操' ], [ 'general', '周瑜' ], [ 'worrory', '馬超' ] ]

for(let [key, val] of Object.entries(hero)) {
    console.log(key + '-' + val);
}

// emperor-曹操
// general-周瑜
// worrory-馬超