JS枚举对象属性的方法及其区别

时间:2023-03-09 03:59:57
JS枚举对象属性的方法及其区别

  愉快的中秋节要过去了,国庆倒计时两个周!!!

  闲话不多说,那今天我们来看一看JS中枚举对象属性的方法有哪些以及他们的区别

  首先在JS里面枚举对象属性一共有三种方法

    for in: 会遍历对象中所有的可枚举属性(包括自有属性和继承属性)

    Object.keys(): 会返回一个包括所有的可枚举的自有属性的名称组成的数组

    Object.getOwnPropertyNames(): 会返回自有属性的名称 (不管是不是可枚举的)

   下面我们一个一个的拆解开来看一下

  for in:

     会遍历对象中所有的可枚举属性(包括自有属性和继承属性)

  例:

        var obj = {
itemA: 'itemA',
itemB: 'itemB'
}
var newObj = Object.create(obj) // 使用Object.create创建一个原型为obj的对象
newObj.newItemA = 'newItemA'
newObj.newItemB = 'newItemB'
for(i in newObj){
console.log(i)
}

  输出结果为:

newItemA
newItemB
itemA
itemB

  现在我们将其中的一个属性变为不可枚举属性

        var obj = {
itemA: 'itemA',
itemB: 'itemB'
}
var newObj = Object.create(obj) // 使用Object.create创建一个原型为obj的对象
newObj.newItemA = 'newItemA'
newObj.newItemB = 'newItemB'
Object.defineProperty(newObj,'newItemA',{
enumerable: false
}) for(i in newObj){
console.log(i)
}

  输出结果:

newItemB
itemA
itemB

  Object.keys():

    会返回一个包括所有的可枚举的自有属性的名称组成的数组

    例:

        var obj = {
itemA: 'itemA',
itemB: 'itemB'
}
var newObj = Object.create(obj) // 使用Object.create创建一个原型为obj的对象
newObj.newItemA = 'newItemA'
newObj.newItemB = 'newItemB'
Object.defineProperty(newObj,'newItemA',{
enumerable: false
})
var result = Object.keys(newObj)
console.log(result)

    结果:

['newItemB']

  

   Object.getOwnPropertyNames():

    会返回自有属性的名称 (不管是不是可枚举的)

    例:

        var obj = {
itemA: 'itemA',
itemB: 'itemB'
}
var newObj = Object.create(obj) // 使用Object.create创建一个原型为obj的对象
newObj.newItemA = 'newItemA'
newObj.newItemB = 'newItemB'
Object.defineProperty(newObj,'newItemA',{
enumerable: false
})
var result = Object.getOwnPropertyNames(newObj)
console.log(result)

    结果:

['newItemA','newItemB']

 搞定收工,明天又要去上班喽,老铁们,得劲吗