本篇內(nèi)容介紹了“javascript遍歷對象的五種方式怎么實(shí)現(xiàn)”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
成都創(chuàng)新互聯(lián)公司是專業(yè)的日照網(wǎng)站建設(shè)公司，日照接單;提供成都做網(wǎng)站、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行日照網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
先來準(zhǔn)備一個測試對象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"
});這個是對象遍歷界的老兵了，通過這種方式可以遍歷對象自身及繼承的所有可枚舉屬性(不包括Symbol類型)。
代碼清單2
for(var attr in obj){
console.log(attr,"==",obj[attr]);
}
/*
job1 == 自有可枚舉屬性1
job2 == 自有可枚舉屬性2
name == 繼承可枚舉屬性
*/獲取對象自身所有可枚舉屬性（不包括Symbol類型）組成的數(shù)組
代碼清單3
Object.keys(obj).map((attr)=>{
console.log(attr,"==",obj[attr]);
});
/*
job1 == 自有可枚舉屬性1
job2 == 自有可枚舉屬性2
*/獲取對象自身所有類型為非Symbol的屬性名稱（包括不可枚舉）組成的數(shù)組
代碼清單4
Object.getOwnPropertyNames(obj).map((attr)=>{
console.log(attr,"==",obj[attr]);
});
/*
job1 == 自有可枚舉屬性1
job2 == 自有可枚舉屬性2
address == 自有不可枚舉屬性
*/獲取對象自身所有類型為Symbol的屬性名稱（包括不可枚舉）組成的數(shù)組
代碼清單5
Object.getOwnPropertySymbols(obj).map((attr)=>{
console.log(attr,"==",obj[attr]);
});
/*
Symbol(自有可枚舉symbol) == 自有可枚舉symbol
Symbol(自有不可枚舉symbol) == 自有不可枚舉symbol
*/獲取一個對象的自身的所有（包括不可枚舉的和Symbol類型）的屬性名稱組成的數(shù)組
代碼清單6
Reflect.ownKeys(obj).map((attr)=>{
console.log(attr,"==",obj[attr]);
});
/*
job1 == 自有可枚舉屬性1
job2 == 自有可枚舉屬性2
address == 自有不可枚舉屬性
Symbol(自有可枚舉symbol) '==' '自有可枚舉symbol'
Symbol(自有不可枚舉symbol) '==' '自有不可枚舉symbol'
*/武器庫的說明書，根據(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了，無論Symbol還是不可枚舉通吃， 簡直就是Object.getOwnPropertyNames和Object.getOwnPropertySymbols合體的效果。
獲取對象自身所有可枚舉屬性（不包括Symbol類型）的值組成的數(shù)組
代碼清單7
Object.values(obj).map((val)=>{
console.log(val);
});
/*
自有可枚舉屬性1
自有可枚舉屬性2
*/獲取對象自身所有可枚舉屬性（不包括Symbol類型）的鍵值對數(shù)組
代碼清單7
Object.entries(obj).map((val)=>{
console.log(val);
});
/*
[ 'job1', '自有可枚舉屬性1' ]
[ 'job2', '自有可枚舉屬性2' ]
*/檢測一個對象自身屬性中是否含有指定的屬性，返回boolean
引用自MDN: JavaScript 并沒有保護(hù) 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
*/檢測一個屬性在指定的對象中是否可枚舉，返回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遍歷對象的五種方式怎么實(shí)現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
