JavaScript中遍历对象的方法，你掌握了几种？

目录

前言

正文

定义对象

for…in…

Object.entries()/Object.keys()/Object.values()

Object.getOwnPropertyNames(targetObj)

Object.getOwnPropertySymbols(targetObj) 

Reflect.ownKeys(targetObj)

总结

---

前言

对象是 JavaScript 中一种非常常用的数据类型，由一个个属性名和属性值一 一对应的键值对组成。在实际开发中，我们经常需要遍历对象去获取我们需要的属性或进行其他操作，看了各路大佬撰写的技术博客以及查阅 MDN 之后，想自己也记录一下这 5 种常用的遍历对象的方法。

正文

定义对象

// 以对象 { protokey: 'proto-key' } 作为原型创建一个新对象
let obj = Object.create({
  protoKey: 'proto-key'
});
// 给新对象自身添加属性
obj.user = 'ostuthere';
obj.age = 20;
obj.gender = 'female';
// 添加Symbol属性
obj[Symbol('mother')] = 'user1';
obj[Symbol('father')] = 'user2';
// 添加不可枚举属性
Object.defineProperty(obj, 'key1', {
  value: 'non-enumerable',
  writable: true,
  enumerable: false
});
console.log(obj);

查看控制台打印，这个简单的对象拥有三个可枚举属性，依次名为 user、age、gender；两个Symbol 属性，分别为 mother、father；一个不可枚举属性，名为 key1。原型上还有一个属性，名为 protoKey。

for…in…

for…in… 会以任意顺序遍历出对象自身以及原型链上的可枚举属性（不包括 Symbol 属性）。代码如下。

for (let key in obj) {
  console.log(key);
}
// 结果依次打印出 user age gender protokey

我们发现 for…in… 不仅遍历出了对象自身的三个可枚举属性，还将其原型上的可枚举属性也遍历了出来。如果我只想拿到对象自身的可枚举属性该怎么办呢？这时候 hasOwnProperty() 方法登场了，它能判断对象的自身属性中是否存在指定的属性，若是则返回 true，否则返回 false。我们可以通过 for…in… + hasOwnProperty() 获取到对象本身的可枚举属性，代码如下。

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key);
  }
}
// 结果依次打印出 user age gender

Object.entries()/Object.keys()/Object.values()

Object.entries(targetObj) 是 ES5 中增加的对象方法，该方法返回一个数组，由对象自身的所有可枚举属性（不包括 Symbol 属性）的键值对组成，Object.keys(targetObj)、Object.values(targetObj) 同理，不过返回的数组分别由属性名、属性值组成。由于返回的是数组，所以我们可以使用数组的方法对结果进行遍历获取需要的值，代码如下。

Object.entries(obj).forEach((item)=>{
  console.log(item);
});
// 结果依次打印出 ['user', 'ostuthere'] ['age', 20] ['gender', 'female']
Object.keys(obj).forEach((key)=>{
  console.log(key);
});
// 结果依次打印出 user age gender
Object.values(obj).forEach((value)=>{
  console.log(value);
});
// 结果依次打印出 ostuthere 20 female

Object.getOwnPropertyNames(targetObj)

Object.getOwnPropertyNames(targetObj) 也是 ES5 中增加的对象方法，该方法返回一个数组，由对象自身的所有属性（包括不可枚举属性，但不包括 Symbol 属性）的属性名组成。同样的，由于返回的是数组，我们可以对返回结果使用数组方法进行遍历或其他操作。

Object.getOwnPropertyNames(obj).forEach((value)=>{
  console.log(value);
});
// 结果依次打印出 user age gender key1

我们还可以只获取不可枚举的属性，通过 propertyIsEnumerable() 方法可以判断指定的属性是否可枚举，若是则返回 true，否则返回 false。数组的 filter(function(){}) 方法返回一个数组，由所有通过测试函数测试的元素组成。

let nonenum_only = Object.getOwnPropertyNames(obj).filter((value)=>{
  return !obj.propertyIsEnumerable(value);
});
console.log(nonenum_only);
// ['key1']

Object.getOwnPropertySymbols(targetObj) 

ES6 中新增了 Symbol 基本数据类型，可以用来标识对象的属性，相应地增加了一个对象方法来获取 Symbol 属性 —— Object.getOwnPropertySymbols(targetObj) 。与上个方法类似，但该方法返回的数组由对象自身的所有 Symbol 属性的属性名组成。若对象上不存在 Symbol 属性，该方法返回一个空数组。

Object.getOwnPropertyNames(obj).forEach((value)=>{
  console.log(value);
});
// [Symbol(mother), Symbol(father)]

Reflect.ownKeys(targetObj)

Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。与大多数全局对象不同，Reflect 不是一个构造函数，所以不能通过 new 运算符对其进行调用，也不允许将 Reflect 对象作为一个函数来调用。Reflect 的所有属性和方法都是静态的（就像Math对象），其中的方法 Reflect.ownKeys(targetObj) 返回一个数组，由对象自身的所有属性名（包括 Symbol 属性和不可枚举属性）组成，它的返回值等同于Object.getOwnPropertyNames(targetObj).concat(Object.getOwnPropertySymbols(targetObj))。

Reflect.ownKeys(obj).forEach((value)=>{
  console.log(value);
});
// 结果依次打印出 user age gender key1 Symbol(mother) Symbol(father)

总结

下面通过表格列出上述 5 种方法是否可以遍历出目标对象中的基本属性、不可枚举属性、Symbol 属性以及其原型链中的属性。

原文：今日前端小知识——遍历对象的方法_ostuthere的博客-CSDN博客_前端遍历对象