前言

我根據(jù)阮老師的《ES6標(biāo)準(zhǔn)入門》學(xué)習(xí)并總結(jié)了七種遍歷對象的方法，我會將分別介紹這七種方法并進(jìn)行詳細(xì)的區(qū)分，并將從屬性可枚舉性問題與遍歷方法兩個大方面講述全文，其中可枚舉性是掌握遍歷對象之前的的鋪墊，請讀者耐心學(xué)習(xí)，掌握遍歷對象的七種方法！

屬性的可枚舉性

為什么要先說屬性的可枚舉性問題，因為一些方法會根據(jù)屬性的可枚舉型進(jìn)行操作，其中遍歷就是一種，遍歷的一些方法會忽略掉可枚舉屬性值為false的屬性，我知道到這里讀者可能會有一些繞圈子：什么叫可枚舉屬性值為false的屬性？下面我?guī)Т蠹襾硪惶骄烤?/p>

對象中的所有屬性都具有一個描述對象，對你沒有看錯，其實在我們看到的一個普通對象中的每一個屬性值都包含一對象，即描述對象，它是用來控制屬性的行為

let obj = {
 ? ?name:"豬痞惡霸",
 ? ?age:20
}

比如上面聲明了一個普通的對象，含有name與age屬性，這兩個屬性都具有一個描述對象，那我們怎么能拿到這個描述對象呢？

來看看這個方法：Object.getOwnPropertyDescriptor()，它可以拿到指定對象的某屬性的描述對象，所以參數(shù)有兩個，一個是指定對象，一共是指定對象的某屬性

Object.getOwnPropertyDescriptor(obj,"name")

如上圖，我們拿到了obj對象name屬性的描述對象，描述對象內(nèi)就包含了我們想知道的東西，enumerable就是描述對象可枚舉屬性，那么在這個例子中值為true，所以就能解釋上面那句看不懂的話：可枚舉屬性值為false的屬性，在這里的解釋就為：obj對象內(nèi)的name屬性的描述對象內(nèi)的可枚舉屬性值為true。

遍歷對象

for...in

for...in可以遍歷對象的所有可枚舉屬性，包括對象本身的和對象繼承來的屬性

let obj = {
 ? ?name:"ned",
 ? ?like:"man"
}
Object.defineProperty(obj, 'age', {
 ?value: "18",
 ?enumerable: false
});
for(item in obj) {
 ? ?console.log(item)
}

看一看上面的例子，我們使用Object.defineProperty的形式來設(shè)置對象的描述對象，將其可枚舉屬性值設(shè)為false，使用for...in遍歷，其沒有被打印出來

其實for...in的特性會導(dǎo)致一個問題，其繼承的屬性會被遍歷到，所以當(dāng)我們不想要遍歷被繼承的屬性，那么我們就可以使用Object.keys()

Object.keys()

Object.leys()方法可以遍歷到所有對象本身的可枚舉屬性，但是其返回值為數(shù)組

let obj = {
 ? ?name:"ned",
 ? ?like:"man"
}
Object.keys(obj) // ?['name', 'like']

到這里我們一般是使用Object.keys()來代替for...in遍歷操作，除此之外，為了代替for...in，又新增了與Object.keys()配套的遍歷方法，下面我們來看看

Object.values()

Object.values()與Object.keys()遍歷對象的特性是相同的，但是其返回的結(jié)構(gòu)是以遍歷的屬性值構(gòu)成的數(shù)組

let obj = {
 ? ?name:"cornd",
 ? ?age:10
}
Object.values(obj) // ['cornd', 10]
Object.defineProperty(obj, 'like', {
 ?value: "coding",
 ?enumerable: false
});
Object.values(obj) // ['cornd', 10] 

聲明了一個對象，使用Object.values()返回對象的所有自身可枚舉屬性的屬性值，通過設(shè)置新的屬性值并將其描述對象內(nèi)的enumerable設(shè)置為false，就可以看到Object.values()的特性

Object.entries()

Object.entries()的返回值為Object.values()與Object.keys()的結(jié)合，也就是說它會返回一個嵌套數(shù)組，數(shù)組內(nèi)包括了屬性名與屬性值

let obj = {
 ? ?name:"cornd",
 ? ?age:10
}
Object.entries(obj) // [['name', 'cornd'],['age', 10]]

其遍歷特性與Object.values()和Object.keys()相同，不再贅述。

Object.getOwnPropertyNames()

其返回結(jié)果與Object.keys()對應(yīng)，但是他得特性與其相反，會返回對象得所有屬性，包括了不可枚舉屬性

var arr = [];
console.log(Object.getOwnPropertyNames(arr)); // ['length']
Object.getOwnPropertyDescriptor(arr,"length").enumerable // false

上面我聲明了一個空數(shù)組，而使用Object.getOwnPropertyNames()方法，返回了length，而length屬性的enumerable正是false

Object.getOwnPropertySymbols()

Object.getOwnPropertySymbols()會返回對象內(nèi)的所有Symbol屬性，返回形式依舊是數(shù)組，值得注意的是，在對象初始化的時候，內(nèi)部是不會包含任何Symbol屬性

let obj = {
 ? ?name:"obj"
}
Object.getOwnPropertySymbols(obj) // []

所以我初始化一個對象，通過這個方法返回的是一個空數(shù)組

let sym = Symbol()
console.log(sym)
obj[sym] = "hogskin" 
Object.getOwnPropertySymbols(obj) // Symbol()

我在后面新建symbol，再為上面聲明好的對象添加進(jìn)去，通過遍歷得到Symbol()

Reflect.ownKeys()

Reflect.ownKeys()返回的是一個大雜燴數(shù)組，即包含了對象的所有屬性，無論是否可枚舉還是屬性是symbol，還是繼承，將所有的屬性返回

let arr = [0,31,2]
Reflect.ownKeys(arr) // ['0', '1', '2', 'length']

上面的例子聲明了一個數(shù)組，返回的是數(shù)組下標(biāo)和length屬性。

到此這篇關(guān)于JavaScript遍歷對象的七種方法匯總的文章就介紹到這了,更多相關(guān)JS遍歷對象內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論