javascript遍歷對(duì)象的五種方式實(shí)例代碼
準(zhǔn)備
先來準(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ì)象遍歷界的老兵了,通過這種方式可以遍歷對(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ù)的說明書,根據(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 并沒有保護(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) */
參考
總結(jié)
到此這篇關(guān)于javascript遍歷對(duì)象的五種方式的文章就介紹到這了,更多相關(guān)javascript遍歷對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Javascript實(shí)時(shí)柱狀圖實(shí)現(xiàn)代碼
js實(shí)現(xiàn)的實(shí)時(shí)柱狀圖,非常有創(chuàng)意的想法。2008-10-10layui頁(yè)面級(jí)彈出框的實(shí)現(xiàn)
本文主要介紹了layui頁(yè)面級(jí)彈出框的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02無(wú)間斷滾動(dòng)marquee的詳細(xì)用法解析
無(wú)間斷滾動(dòng)marquee的詳細(xì)用法解析...2006-08-08js動(dòng)態(tài)改變select選擇變更option的index值示例
今天刪除多個(gè)select值的時(shí)候出現(xiàn)了問題,搞了半天原來是索引引起的(即刪除的時(shí)候要從索引大的開始刪,然后再 刪除索引小的2014-07-07