js物件的遍歷
阿新 • • 發佈:2018-11-08
- 僅遍歷物件的可列舉屬性
- for in: 遍歷的是物件本身及其原型鏈上的可列舉屬性
ES5寫法:
對於Object物件,即Object構造器構造出來的物件來說:
var obj = {name: 'zyp', age: 18} Object.defineProperty(obj, 'like', {value: 'reading', enumerable: false}) let objArr1 = [], objArr2 = [] for(let i in obj) { objArr1.push(i) } console.log('objArr1',objArr1) Object.prototype.proper1 = function() { console.log(1111)} Object.prototype.proper2 = 2 for(let i in obj) { objArr2.push(i) } console.log('objArr2',objArr2)
輸出結果為
objArr1 [“name”, “age”]
objArr2 [“name”, “age”, “proper1”, “proper2”]
對於自己自己定義的構造器構造出來的物件而言:
function Foo(name, age) { this.name = name this.age = age } var foo = new Foo('zyp', 18) Object.defineProperty(foo, 'like', { value: 'sleep', enumerable: false }) let fooArr1 = [], fooArr2 = []; for(let i in foo) { fooArr1.push(i) } console.log('fooArr1',fooArr1 ) Foo.prototype.proper1 = function() { console.log(1111) } Foo.prototype.proper2 = 2 for(let i in foo) { fooArr2.push(i) } console.log('fooArr2', fooArr2)
輸出結果為
fooArr1 [“name”, “age”]
fooArr2 [“name”, “age”, “proper1”, “proper2”]
ES6寫法:
//定義父類A class A { constructor(name, age) { this.name = name; this.age = age; } show() { console.log(22222) } } let newA = new A('zyp', 18) Object.defineProperty(newA, 'haha', {value: 'haha', enumerable: false}) let newAarr = []; for(let i in newA) { newAarr.push(i) } console.log('newAarr',newAarr)
輸出結果是newAarr [“name”, “age”] ,因為’haha’是不可列舉屬性,show函式預設定義在原型鏈上,但是這種用class定義的行為屬性是不可列舉的(我試了用建構函式方法在prototype上定義行為屬性是可以列舉的,這裡搞不懂~~)
//定義子類
class AA extends A {
constructor(like) {
super('zyp1', 188);
this.like = like;
}
showAA() {
}
}
let newAA = new AA('reading')
Object.defineProperty(newAA, 'haha2', {value: 'haha2', enumerable: false})
let newAAarr = []
for(let i in newAA) {
newAAarr.push(i)
}
console.log('newAAarr', newAAarr)
輸出的結果為 newAAarr [“name”, “age”, “like”]
因此,for in 可以迭代出物件及其圓形兩上的可列舉屬性,而hasOwnProperty可以判斷屬性是否在當前物件上,因此可用來過濾for in 從原型鏈上迴圈出來的屬性,得到物件本身的可列舉屬性。
- hasOwnProperty可以用來遍歷物件本身的可列舉和不可列舉屬性
以ES5寫法中的obj為例:
var objArr3 = []
for(let i in obj) {
if(obj.hasOwnProperty(i)) {
objArr3.push(i)
}
}
console.log('objArr3', objArr3) //objArr3 ["name", "age"]
- 用Object.keys()來獲取物件本身的可列舉屬性名
var objArr4 = Object.keys(obj)
console.log('objArr3', objArr3) //objArr3 ["name", "age"]
總結:可以用for in + hasOwnproperty 或者Object.keys()來獲取物件的可列舉屬性。
- 獲取物件本身的屬性(可列舉和不可列舉,不包括Symbol型別的屬性)
以陣列為例
var arr = ['name', 'age']
console.log(object.getOwnPropertyNames(arr)) //輸出["0", "1", "length"]
總結:可以用Object.getOwnPropertyNames()來獲取物件本身的可列舉和不可列舉屬性(不包括Symbol)。