js 遍历对象的几种方式

第一种： for......in

const obj = {
            id:1,
            name:'zhangsan',
            age:18
}

 for(let key  in obj){
        console.log(key + '---' + obj[key])
  }

输出结果：

 

使用for in会遍历对象的所有属性，还可以遍历到原型上的属性和方法

 

1 2 3 4 5 6 7 8 9 10 11 12 13

const obj = {       id:1,       name:'zhangsan',       age:18  }  Object.prototype.sex = '男'  Object.prototype.get = function() {       console.log('这是原型上的方法');  }        for(let key in obj) {       console.log(key + '---' + obj[key]);  }

输出结果：

 

解决：可以在循环内部判断一下，使用hasOwnProperty()方法可以判断某属性是不 是该对象的实例属性。

1 2 3 4 5 6

for(let key in obj) {       // console.log(key + '---' +obj[key]);      if(obj.hasOwnProperty(key)) {         console.log(key + '---' +obj[key]);       }  }

　输出结果：

 

 

第二种：

1）、Object.keys（obj）

2）、Object.values（obj）

参数：

obj：要返回其枚举自身属性的对象

返回值：

一个表示给定对象的所有可枚举属性的字符串数组。

const obj = {
　　　　id:1,
　　　　name:'zhangsan',
　　　　age:18
}

 console.log(Object.keys(obj))

console.log(Object.values(obj))

输出结果： obj对象的key组成的数组

['id','name','age']

 

输出结果：obj对象的value组成的数组

['1','zhangsan','18']

 

 

第三种：使用Object.getOwnPropertyNames(obj)

返回一个数组，包含对象自身的所有属性（包含不可枚举属性）
遍历可以获取key和value

const obj = {
            id:1,
            name:'zhangsan',
            age:18
    }
    Object.getOwnPropertyNames(obj).forEach(function(key){
        console.log(key+ '---'+obj[key])
    })

输出结果：