目錄

• 準備
• 五種武器
• for…in
  
• Object.keys
  
• Object.getOwnPropertyNames
  
• Object.getOwnPropertySymbols
  
• Reflect.ownKeys
  
• 總結
• 擴充套件
• Object.values
  
• Object.entries
  
• hasOwnProperty
  
• propertyIsEnumerable
  
• 總結

準備

先來準備一個測試物件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 == 自有可列舉屬性2www.cppcns.com
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 == 自有不可列舉屬性
S客棧ymbol(自有可列舉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: 並沒有保護 hasOwnProperty 屬性名，因此某個物件是有可能存在使用這個屬性名的屬性，所以直接使用原型鏈上的 hasOwnProperty 方法

程式碼lSVOSJ清單8

for(var attr in obj){
    if(Object.prototype.hasOwnProperty.call(obj,attr)){
        console.log("自有屬http://www.cppcns.com性：：",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)
*/

參考

MDN Object

總結

到此這篇關於script遍歷物件的五種方式的文章就介紹到這了,更多相關javascript遍歷物件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！