javascript遍歷對象的方式有哪些

本篇內容介紹了“javascript遍歷對象的方式有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

準備

先來準備一個測試對象obj。

代碼清單1

var notEnum = Symbol("繼承不可枚舉symbol");
var proto = {
    [Symbol("繼承可枚舉symbol")]: "繼承可枚舉symbol",
    name: "繼承可枚舉屬性"
};
// 不可枚舉屬性
Object.defineProperty(proto, "age", {
    value: "繼承不可枚舉屬性"
});
// 不可枚舉symbol屬性
Object.defineProperty(proto, notEnum, {
    value: "繼承不可枚舉symbol"
});

var obj = {
    job1: "自有可枚舉屬性1",
    job2: "自有可枚舉屬性2",
    [Symbol("自有可枚舉symbol")]: "自有可枚舉symbol"
};
// 繼承
Object.setPrototypeOf(obj, proto);
// 不可枚舉屬性
Object.defineProperty(obj, "address", {
    value: "自有不可枚舉屬性"
});
// 不可枚舉symbol屬性
var ownNotEnum = Symbol("自有不可枚舉symbol");
Object.defineProperty(obj, ownNotEnum, {
    value: "自有不可枚舉symbol"
});

五種武器

for…in

這個是對象遍歷界的老兵了，通過這種方式可以遍歷對象自身及繼承的所有可枚舉屬性(不包括Symbol類型)。

代碼清單2

for(var attr in obj){
    console.log(attr,"==",obj[attr]);
}
/*
job1 == 自有可枚舉屬性1
job2 == 自有可枚舉屬性2
name == 繼承可枚舉屬性
*/

Object.keys

獲取對象自身所有可枚舉屬性（不包括Symbol類型）組成的數組

代碼清單3

Object.keys(obj).map((attr)=>{
    console.log(attr,"==",obj[attr]);
});
/*
job1 == 自有可枚舉屬性1
job2 == 自有可枚舉屬性2
*/

Object.getOwnPropertyNames

獲取對象自身所有類型為非Symbol的屬性名稱（包括不可枚舉）組成的數組

代碼清單4

Object.getOwnPropertyNames(obj).map((attr)=>{
    console.log(attr,"==",obj[attr]);
});
/*
job1 == 自有可枚舉屬性1
job2 == 自有可枚舉屬性2
address == 自有不可枚舉屬性
*/

Object.getOwnPropertySymbols

獲取對象自身所有類型為Symbol的屬性名稱（包括不可枚舉）組成的數組

代碼清單5

Object.getOwnPropertySymbols(obj).map((attr)=>{
    console.log(attr,"==",obj[attr]);
});
/*
Symbol(自有可枚舉symbol) == 自有可枚舉symbol
Symbol(自有不可枚舉symbol) == 自有不可枚舉symbol
*/

Reflect.ownKeys

獲取一個對象的自身的所有（包括不可枚舉的和Symbol類型）的屬性名稱組成的數組

代碼清單6

Reflect.ownKeys(obj).map((attr)=>{
    console.log(attr,"==",obj[attr]);
});
/*
job1 == 自有可枚舉屬性1
job2 == 自有可枚舉屬性2
address == 自有不可枚舉屬性
Symbol(自有可枚舉symbol) '==' '自有可枚舉symbol'
Symbol(自有不可枚舉symbol) '==' '自有不可枚舉symbol'
*/

總結

武器庫的說明書，根據需要選擇合適的武器吧。

五種武器里最牛的就是Reflect.ownKeys了，無論Symbol還是不可枚舉通吃， 簡直就是Object.getOwnPropertyNames和Object.getOwnPropertySymbols合體的效果。

擴展

Object.values

獲取對象自身所有可枚舉屬性（不包括Symbol類型）的值組成的數組

代碼清單7

Object.values(obj).map((val)=>{
    console.log(val);
});
/*
自有可枚舉屬性1
自有可枚舉屬性2
*/

Object.entries

獲取對象自身所有可枚舉屬性（不包括Symbol類型）的鍵值對數組

代碼清單7

Object.entries(obj).map((val)=>{
    console.log(val);
});
/*
[ 'job1', '自有可枚舉屬性1' ]
[ 'job2', '自有可枚舉屬性2' ]
*/

hasOwnProperty

檢測一個對象自身屬性中是否含有指定的屬性，返回boolean

引用自MDN: JavaScript 并沒有保護 hasOwnProperty 屬性名，因此某個對象是有可能存在使用這個屬性名的屬性，所以直接使用原型鏈上的 hasOwnProperty 方法

代碼清單8

for(var attr in obj){
    if(Object.prototype.hasOwnProperty.call(obj,attr)){
        console.log("自有屬性：：",attr);
    }else{
        console.log("繼承屬性：：",attr);
    }
}
/*
自有屬性：： job1
自有屬性：： job2
繼承屬性：： name
*/

propertyIsEnumerable

檢測一個屬性在指定的對象中是否可枚舉，返回boolean

代碼清單9

Reflect.ownKeys(obj).map((attr) => {
    if (Object.prototype.propertyIsEnumerable.call(obj, attr)) {
        console.log("可枚舉屬性：：", attr);
    } else {
        console.log("不可枚舉屬性：：", attr);
    }
});
/*
可枚舉屬性：： job1
可枚舉屬性：： job2
不可枚舉屬性：： address
可枚舉屬性：： Symbol(自有可枚舉symbol)
不可枚舉屬性：： Symbol(自有不可枚舉symbol)
*/

“javascript遍歷對象的方式有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！