JS-遍历对象

JS遍历对象的五种方法

在学习了解遍历对象的方法之前，需要知道对象都有什么样的属性。
对象的属性可划分为
· 原型属性
· 对象自身的可枚举属性
· 对象自身的不可枚举属性
· Symbol属性
· 如何判断属性是不是可枚举的？ — Object.getOwnPropertyDescriptor()方法

		// 原型属性
        const obj = Object.create({
            bar: 'bar'
        })
        // 对象自身的可枚举属性
        obj.foo = 'foo'
        // 对象自身的不可枚举属性
        Object.defineProperty(obj, 'name', {
            enumerable:false,
            value: 'Katerina'
        })

        // Symbol属性
        obj[Symbol('age')] = 'age'

        console.log(obj);

JS遍历对象的方法
· for … in
· Object.keys()
· Object.getOwnPropertyNames()
· Object.getOwnPropertySymbols()
· Reflect.ownKeys()

---

for … in

· 获取对象自身的可枚举属性 + 原型链上的可枚举属性 不包括Symbol属性
· 可以配合hasOwnProperty()方法，过滤掉原型链上的属性。
· 属性顺序在Object与Map区别的文章中有所体现。

       for (var key in obj) {
        console.log(key, obj[key]);
       }

       console.log('---------------');
       for (var key in obj) {
        if(obj.hasOwnProperty(key)) {
            console.log(key, obj[key]);
        }
       }

Object.keys()

· 获取对象自身的可枚举属性
· 不包含原型链上的可枚举属性和Symbol属性
· 属性顺序同上

    //  只输出了foo foo
       
    Object.keys(obj).forEach(i => {
        console.log(i, obj[i]);
    })

---

Object.getOwnPropertyNames()

· 获取对象自身的所有属性名，包括不可枚举属性
· 不包含原型链上的属性和Symbol属性

        Object.getOwnPropertyNames(obj).forEach(i => {
            console.log(i, obj[i]);
        })
        //  foo  foo
        //  name Katerina

---

getOwnPropertySymbols()

· 获取对象自身的所有Symbol属性
· 不包括原型链上的Symbol属性

        Object.getOwnPropertySymbols(obj).forEach(i => {
            console.log(i, obj[i]);
        })
        //  Symbol(age) 'age'

---

Reflect.ownKeys()

·获取对象自身的所有属性名，包括不可枚举 + Symbol属性

        Reflect.ownKeys(obj).forEach(i => {
            console.log(i, obj[i]);
        })
        //  foo     foo
        //  name    Katerina
        //  Symbol(age) 'age'

---

小妙招：
· 凡是方法里面带有own关键字的，这个方法输出的应该就是对象自身的东西，而不包含原型上的东西

---