快捷導(dǎo)航

javascript遍歷對(duì)象的五種方式實(shí)例代碼

更新時(shí)間：2021年10月24日 11:30:08 作者：照物華

在我們?nèi)粘９ぷ鬟^(guò)程中,我們對(duì)于javaScript遍歷對(duì)象、數(shù)組的操作是十分的頻繁的,這篇文章主要給大家介紹了關(guān)于javascript遍歷對(duì)象的五種方式,需要的朋友可以參考下

準(zhǔn)備

先來(lái)準(zhǔn)備一個(gè)測(cè)試對(duì)象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

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

代碼清單2

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

Object.keys

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

代碼清單3

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

Object.getOwnPropertyNames

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

代碼清單4

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

Object.getOwnPropertySymbols

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

代碼清單5

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

Reflect.ownKeys

獲取一個(gè)對(duì)象的自身的所有（包括不可枚舉的和Symbol類型）的屬性名稱組成的數(shù)組

代碼清單6

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

總結(jié)

武器庫(kù)的說(shuō)明書(shū)，根據(jù)需要選擇合適的武器吧。

api	操作	自身屬性	不可枚舉屬性	繼承屬性	Symbol屬性
for…in	遍歷	yes	no	yes	no
Object.keys	返回屬性數(shù)組	yes	no	no	no
Object.getOwnPropertyNames	返回非Symbol屬性數(shù)組	yes	yes	no	no
Object.getOwnPropertySymbols	返回Symbol屬性數(shù)組	yes	yes	no	yes
Reflect.ownKeys	返回屬性數(shù)組	yes	yes	no	yes

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

擴(kuò)展

Object.values

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

代碼清單7

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

Object.entries

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

代碼清單7

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

hasOwnProperty

檢測(cè)一個(gè)對(duì)象自身屬性中是否含有指定的屬性，返回boolean

引用自MDN: JavaScript 并沒(méi)有保護(hù) hasOwnProperty 屬性名，因此某個(gè)對(duì)象是有可能存在使用這個(gè)屬性名的屬性，所以直接使用原型鏈上的 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

檢測(cè)一個(gè)屬性在指定的對(duì)象中是否可枚舉，返回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