JavaScript遍歷對象的七種方法匯總

Posted on by

前言

我根據阮老師的《ES6標準入門》學習並總結瞭七種遍歷對象的方法，我會將分別介紹這七種方法並進行詳細的區分，並將從屬性可枚舉性問題與遍歷方法兩個大方面講述全文，其中可枚舉性是掌握遍歷對象之前的的鋪墊，請讀者耐心學習，掌握遍歷對象的七種方法！

屬性的可枚舉性

為什麼要先說屬性的可枚舉性問題，因為一些方法會根據屬性的可枚舉型進行操作，其中遍歷就是一種，遍歷的一些方法會忽略掉可枚舉屬性值為false的屬性，我知道到這裡讀者可能會有一些繞圈子：什麼叫可枚舉屬性值為false的屬性？下面我帶大傢來一探究竟

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

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

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

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

Object.getOwnPropertyDescriptor(obj,"name")

如上圖，我們拿到瞭obj對象name屬性的描述對象，描述對象內就包含瞭我們想知道的東西，enumerable就是描述對象可枚舉屬性，那麼在這個例子中值為true，所以就能解釋上面那句看不懂的話：可枚舉屬性值為false的屬性，在這裡的解釋就為：obj對象內的name屬性的描述對象內的可枚舉屬性值為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的形式來設置對象的描述對象，將其可枚舉屬性值設為false，使用for...in遍歷，其沒有被打印出來

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

Object.keys()

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

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()遍歷對象的特性是相同的，但是其返回的結構是以遍歷的屬性值構成的數組

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()返回對象的所有自身可枚舉屬性的屬性值，通過設置新的屬性值並將其描述對象內的enumerable設置為false，就可以看到Object.values()的特性

Object.entries()

Object.entries()的返回值為Object.values()與Object.keys()的結合，也就是說它會返回一個嵌套數組，數組內包括瞭屬性名與屬性值

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

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

Object.getOwnPropertyNames()

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

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

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

Object.getOwnPropertySymbols()

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

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

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

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

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

Reflect.ownKeys()

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

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

上面的例子聲明瞭一個數組，返回的是數組下標和length屬性。

到此這篇關於JavaScript遍歷對象的七種方法匯總的文章就介紹到這瞭,更多相關JS遍歷對象內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：