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']

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

原文地址：https://www.cnblogs.com/suihang/p/11523664.html