如何遍历对象的属性?

163 阅读1分钟

1.遍历自身可枚举的属性(可枚举,非继承性)Object.keys() 方法

<script>
        // Array 对象
        let arr = ['pink', 'green', 'blue']
        console.log(Object.keys(arr))// ['0', '1', '2']

        // Object 对象
        let obj = { name: 'Alice', age: 18 }
        console.log(Object.keys(obj),)//['name', 'age']

        // 类数组对象,随机 key 排序
        let anObj = { 100: 'a', 2: 'b', 7: 'c' }
        console.log(Object.keys(anObj))//['2', '7', '100']

        // getFoo是一个不可枚举的属性
        let myObj = Object.create({}, { getFoo: { value: function () { return this.foo } } })
        myObj.foo = 1
        console.log(Object.keys(myObj))//['foo']
</script>

image.png

2.遍历自身的所有属性(可枚举,不可枚举,非继承属性)Object.getOwnPrototypeNames()方法

该方法返回一个由指定对象的所有自身属性组成的数组,包括不可枚举属性但不包括Symbol值作为名称的属性

<script>
        // Array 对象
        let arr = ['pink', 'green', 'blue']
        console.log(Object.getOwnPropertyNames(arr).sort())//['0', '1', '2', 'length']

        // Object 对象
        let obj = { name: 'Alice', age: 18 }
        console.log(Object.getOwnPropertyNames(obj).sort())//['age', 'name']

        // 类数组对象
        let anObj = { 0: 'a', 1: 'b', 2: 'c' }
        console.log(Object.getOwnPropertyNames(anObj).sort())// ['0', '1', '2']
        Object.getOwnPropertyNames(anObj).sort().forEach((val, index, arr) => {
            console.log(`${val}${anObj[val]}`)//0→a 1→b 2→c
        })

        // 不可枚举的属性
        let myObj = Object.create({}, {
            getFoo: {
                value: function () {
                    return this.foo
                }, enumerable: false
            }
        })
        myObj.foo = 1
        console.log(Object.getOwnPropertyNames(myObj).sort())//['foo', 'getFoo']
    </script>

image.png

3.遍历可枚举的自身属性和继承性(可枚举,可继承的属性)for in 循环

hasOwnProperty()方法判断对象是否有某个属性(本身的属性,不是继承的属性)

<script>
        let obj = {
            name: 'Alice',
            age: 18,
            getAge: function () {
                console.log(this.age)
            }
        }
        let newObbj = {}
        for (let key in obj) {
            if (obj.hasOwnProperty(key) && typeof obj[key] != 'function') {
                newObbj[key] = obj[key]
            }
        }
        console.log(newObbj)//{name: 'Alice', age: 18}
    </script>

image.png

4.遍历所有的自身属性和继承性

<script>
        (function () {
            let getAllPropertyNames = function (obj) {
                let props = []
                do {
                    props = props.concat(Object.getOwnPropertyNames(obj))
                } while (obj = Object.getPrototypeOf(obj))
                return props
            }
            let propertys = getAllPropertyNames(window)
            console.log(propertys.length)//1038
            console.log(propertys.join('\n'))//Object Function Array Number 等
        })()
    </script>

image.png