本篇內(nèi)容主要講解“JS中遍歷對(duì)象的方法有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JS中遍歷對(duì)象的方法有哪些”吧!

成都創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)專家,致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷，專業(yè)領(lǐng)域包括成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、電商網(wǎng)站制作開發(fā)、微信平臺(tái)小程序開發(fā)、微信營(yíng)銷、系統(tǒng)平臺(tái)開發(fā)，與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開發(fā)公司不同，我們的整合解決方案結(jié)合了恒基網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營(yíng)銷的理念，并將策略和執(zhí)行緊密結(jié)合，且不斷評(píng)估并優(yōu)化我們的方案，為客戶提供全方位的互聯(lián)網(wǎng)品牌整合方案！

 1 簡(jiǎn)介

對(duì)象是在編程中最常見的部分，很多情況下需要遍歷該對(duì)象上的屬性，那么有幾種方式可以幫助我們遍歷該對(duì)象上的屬性呢?下面一起來了解九種方法。

下面測(cè)試方法所用的對(duì)象如下所示：

const parentObj = {     a: 'aaaaa',     b: Symbol('bbbbb'),     c: 'ccccc' };  const Obj = Object.create(parentObj, {     d: {         value: 'ddddd',         enumerable: true     },     e: {         value: 'eeeee',         enumerable: false     },     [Symbol('f')]: {         value: 'fffff',         enumerable: true     } });

Object.keys(obj)

Object.keys  返回一個(gè)所有元素為字符串的數(shù)組，其元素來自于從給定的object上面可直接枚舉的屬性(不含Symbol屬性)。這些屬性的順序與手動(dòng)遍歷該對(duì)象屬性時(shí)的一致。

console.log('Object.keys()', Object.keys(Obj)); // Object.keys() [ 'd' ]

Object.values(obj)

Object.values()返回一個(gè)數(shù)組，其元素是在對(duì)象上找到的可枚舉屬性值。屬性的順序與通過手動(dòng)循環(huán)對(duì)象的屬性值所給出的順序相同。

console.log('Object.values()', Object.values(Obj)); // Object.values() [ 'ddddd' ]

Object.entries(obj)

Object.entries()返回一個(gè)數(shù)組，其元素是與直接在object上找到的可枚舉屬性鍵值對(duì)相對(duì)應(yīng)的數(shù)組。屬性的順序與通過手動(dòng)循環(huán)對(duì)象的屬性值所給出的順序相同。

console.log('Object.entries()', Object.entries(Obj)); // Object.entries() [ [ 'd', 'ddddd' ] ]

Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames()方法返回一個(gè)由指定對(duì)象的所有自身屬性的屬性名(包括不可枚舉屬性但不包括Symbol值作為名稱的屬性)組成的數(shù)組。

console.log('Object.getOwnPropertyNames()', Object.getOwnPropertyNames(Obj)); // Object.getOwnPropertyNames() [ 'd', 'e' ]

Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols() 方法返回一個(gè)給定對(duì)象自身的所有 Symbol 屬性的數(shù)組。

console.log('Object.getOwnPropertySymbols()', Object.getOwnPropertySymbols(Obj)); // Object.getOwnPropertySymbols() [ Symbol(f) ]

for……in

遍歷所有可枚舉的屬性(包括原型上的)，然后可利用hasOwnProperty判斷對(duì)象是否包含特定的自身(非繼承)屬性，其具有以下特點(diǎn)：

(1)index索引為字符串型數(shù)字，不能直接進(jìn)行幾何運(yùn)算

(2)遍歷順序有可能不是按照實(shí)際數(shù)組的內(nèi)部順序

(3)會(huì)遍歷數(shù)組的所有可枚舉屬性，包括原型

(4)for...in更適合便利對(duì)象，不要使用for...in遍歷數(shù)組

for(let key in Obj) {     // for in: d     // for in: a     // for in: b     // for in: c     console.log('for in:', key); }

for……of

必須部署了Iterator接口后才能使用。使用范圍：數(shù)組、Set和Map結(jié)構(gòu)、類數(shù)組對(duì)象(arguments、DOMNodeList對(duì)象……)、Generator對(duì)象以及字符串

for(let value of Object.values(Obj)) {     // for of: ddddd     console.log('for of:', value); }

forEach

使用break不能中斷循環(huán)使用

Object.values(Obj).forEach(value => {     // forEach: ddddd     console.log('forEach:', value); });

Reflect.ownKeys(obj)

返回一個(gè)數(shù)組，包含對(duì)象自身的所有屬性，不管屬性名是Symbol還是字符串，也不管是否可枚舉。

console.log('Reflect.ownKeys()', Reflect.ownKeys(Obj)); // Reflect.ownKeys() [ 'd', 'e', Symbol(f) ]

2 特點(diǎn)總結(jié)

類型	特點(diǎn)
Object.keys(obj)	返回對(duì)象本身可直接枚舉的屬性(不含Symbol屬性）
Object.values(obj)	返回對(duì)象本身可直接枚舉的屬性值(不含Symbol屬性）
Object.entries(obj)	返回對(duì)象本身可枚舉屬性鍵值對(duì)相對(duì)應(yīng)的數(shù)組(不含Symbol屬性）
Object.getOwnPropertyNames(obj)	返回對(duì)象所有自身屬性的屬性名（不包括Symbol值作為名稱的屬性）
Object.getOwnPropertySymbols(obj)	返回一個(gè)給定對(duì)象自身的所有 Symbol 屬性的數(shù)組
for……in	所有可枚舉的屬性（包括原型上的）
for……of	必須部署了Iterator接口后才能使用，例如數(shù)組、Set和Map結(jié)構(gòu)、類數(shù)組對(duì)象、Generator對(duì)象以及字符串
forEach	break不能中斷循環(huán)
Reflect.ownKeys(obj)	對(duì)象自身所有屬性

3 遍歷順序

上述遍歷對(duì)象的屬性時(shí)都遵循同樣的屬性遍歷次序規(guī)則：

• 首先遍歷所有屬性名為數(shù)值的屬性，按照數(shù)字排序

• 其次遍歷所有屬性名為字符串的屬性，按照生成時(shí)間排序

• 最后遍歷所有屬性名為Symbol值的屬性，按照生成時(shí)間排序

用下面代碼來驗(yàn)證上述遍歷規(guī)則

const Obj = {     [Symbol(0)]: 'symbol',     1 : '1',     'c': 'c',     '1a1': '11',     22223333: '2',     'd': 'd' };  console.log(Reflect.ownKeys(Obj)); // [ '1', '22223333', 'c', '1a1', 'd', Symbol(0) ]

到此，相信大家對(duì)“JS中遍歷對(duì)象的方法有哪些”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

當(dāng)前文章：JS中遍歷對(duì)象的方法有哪些
URL網(wǎng)址：http://jinyejixie.com/article30/iieeso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、品牌網(wǎng)站建設(shè)、建站公司、軟件開發(fā)、企業(yè)建站、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)