JS遍历对象属性（4种方法）

在编写 JavaScript 应用程序时，经常需要把对象中的所有属性和值取出来，这时候可以先通过获取对象中的所有属性名，然后通过遍历属性名获取对应的值。

1) Object.keys()

JavaScript 内置的 Object 对象中提供了 keys() 方法，用于获取一个对象的所有属性名，它接收一个对象作为参数，返回一个数组，里边保存了参数对象自身所有的属性。

请看下面的例子：

const blogPost={
     id:1,
     title: "JavaScript教程",
     getSlug: function(){
          return "/post/"+this.title;
     },
     author: "李明",
     comments: ["很好","受教了","加油"],
     "update-at": "2020-10-26"
};
console.log(Object.keys(blogPost));
Object.keys(blogPost).forEach((key)=>{
     console.log(`${key}:${blogPost[key]}`);
});

输出结果为：

['id','title','getSlug','author','comments','update-at']
id:1
title:JavaScript教程
getSlug:function(){
     return "/post/"+title;
}
author:李明
comments:很好,受教了,加油
update-at:2020-10-26

第一行输出了 Object.keys(blogPost) 的值，可以看到对象中的属性名以数组的形式返回了，后面代码遍历了这个数组，并用遍历到的元素作为属性名去对象中获取属性值，并打印出了字符串结果。

2) for...in

除了使用 Object.keys() 获取属性外，还可以使用 for...in 循环，它与 for...of 循环的语法类似，在 for 后边的括号中，定义接收属性名的变量，后面使用 in 关键字跟上对象的名字。

同样访问上例中 blogPost 的所有属性，代码如下：

//...省略blogPost定义
for(let key in blogPost){
     console.log(`${key}:${blogPost[key]}`);
}

输出结果与上例一样。

需要注意的是，Object.keys() 和 for...in 循环只能获取可枚举（Enumerable）的属性，并且 Object.keys() 只能获取对象自身的属性，而 for...in 可以获取继承的属性。

3) Object.getOwnPropertyNames()

最后，使用 Object.getOwnPropertyNames() 可以获取对象自身的所有属性，无论是否为可枚举的，它接收要获取的属性的对象作为参数，然后返回属性名数组。不过 Object.getOwnPropertyNames() 不能获取 Symbol 类型的属性。

下面示例展示了使用 Object.getOwnPropertyNames() 遍历 blogPost 对象的方式，代码如下：

Object.getOwnPropertyNames(blogPost).forEach(key=>{
     console.log(`${key}:${blogPost[key]}`);
})

4) Object.getOwnPropertySymbols()

如果要获取 Symbol 类型的属性，则可以使用 Object.getOwnPropertySymbols()，它接收要获取属性的对象作为参数，然后返回 Symbol 类型的属性名数组，但是不包括普通字符串的属性名，代码如下：

const obj={
     a:1,
     [Symbol('b')]:2,
     [Symbol('c')]:3,
}
Object.getOwnPropertySymbols(obj);  //[Symbol(b),Symbol(c)]