js遍历对象的方法

遍历对象的方法

        一、for...in       

        二、Object.keys()

        三、Object.getOwnPropertyNames()

---

一、for...in         

        for in循环是最基础的遍历对象的方式，它还会得到对象原型链上的属性

//对象
var obj = {
     name: 'Lina',
     sex: 'boy',
     age: '18',
     height: '185',
   }

for (let i in obj) {
     console.log(i, obj[i])  //i是键名，obj[i]是键值
 }

 //数组
var arr = ['Lina', 'boy', '18', '185']

 for (let i in arr) {
     console.log(i, arr[i])  //i是index，arr[i]是item
 }

二、Object.keys()

        Object.keys()是ES5新增的一个对象方法，该方法返回对象自身属性名组成的数组，他会自动过滤掉原型链上的属性，然后可以通过数组的forEach()方法来遍历。

var obj = {
       name: 'Lina',
       sex: 'boy',
       age: '18',
       height: '185',
   }

for (let item of Object.keys(obj)) {
    console.log(item)
} // 遍历返回键名

for (let item of Object.values(obj)) {
    console.log(item)
} // 遍历返回键值

for (let item of Object.entries(obj)) {
    console.log(item)
}  // 返回键值对组成的数组，如：['key', 'value']

三、Object.getOwnPropertyNames()

        也是ES5新增的一个对象方法，该方法返回对象自身属性名组成的数组，包括不可枚举的属性，也可以通过数组的forEach()方法来遍历。

var obj = {
       name: 'Lina',
       sex: 'boy',
       age: '18',
       height: '185',
   }

Object.getOwnPropertyNames(obj).forEach(key => {
     console.log(key, obj[key])
 })

只有 for in 循环会得到对象原型链上的属性，其它方法都只适用于对象自身的属性ES 语言后续添加的新特性不会对以前的代码产生副作用，比如在 ES2015 之前就存在的 for in 循环。

Object.keys() 和 Object.getOwnPropertyNames() 是肯定不会返回 Symbol 属性的。

Object.getOwnPropertyNames() 和 Object.getOwnPropertySymbols() 互补，一个得到普通属性，一个得到 Symbol 属性，都包括不可枚举的属性。

除此之外还有：Object.getOwnPropertySymbols()、Reflect.ownKeys等，详细讲解见JS遍历对象的几种方法_这片林子好大的博客-CSDN博客_js对象遍历（如有侵权请联系删除）