1. 程式人生 > >js物件的遍歷

js物件的遍歷

  1. 僅遍歷物件的可列舉屬性
  • 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()來獲取物件的可列舉屬性。

  1. 獲取物件本身的屬性(可列舉和不可列舉,不包括Symbol型別的屬性)

以陣列為例

var arr = ['name', 'age']
console.log(object.getOwnPropertyNames(arr)) //輸出["0", "1", "length"]

總結:可以用Object.getOwnPropertyNames()來獲取物件本身的可列舉和不可列舉屬性(不包括Symbol)。