关于javascript:JS遍历对象属性的7种方式

在有些开发场景下，可能须要获取一个对象的所有属性字段名，或者同时获取属性字段名和属性值，比方上面的一个一般的对象：

let obj = {
    type: 1,
    keyword: 'js'
}

这个 obj 对象只有两个属性字段：type 和 keyword，属性值为 1 和 js，理论过程中的对象可能更加简单，字段也会更多。

对于遍历一个对象的属性，最容易想到的就是应用 for 循环 这种形式，因为它更间接，而且平时应用也是比拟多，除了间接应用 for 循环这种形式外，还有其余的几种形式，这里次要分为三大类，共 7 中形式：

• for 循环形式

  • for…in
  • for…of

• Object 办法

  • Object.keys()
  • Object.entries()
  • Object.getOwnPropertyNames()
  • Object.getOwnPropertySymbols()

• Reflect 办法

  • Reflect.ownKeys()

1、for…in

for…in 语句能够用来循环一个对象所有可枚举的属性，包含继承的属性，上面的代码是用来打印 obj 对象所有的属性字段和属性值：

let obj = {type: 1, keyword: "js"};
for (let key in obj) {console.log(key, obj[key])
}

输入后果如下：

type 1
keyword js

2、for…of

for…of 语句次要用来循环一个可迭代对象的属性，要成为可迭代对象，一个对象必须实现 @@iterator 办法，这意味着对象（或者它原型链上的某个对象）必须有一个键为 @@iterator 的属性，可通过常量 Symbol.iterator 拜访该属性。

对于一般的对象，其实并不是可迭代对象，如果间接应用 for…of 遍历的话，会报错的，上面来测试一下：

let obj = {type: 1, keyword: "js"};
for (let key of obj) {console.log(key, obj[key])
}

运行后，呈现上面的谬误，间接提醒 obj 不是可迭代对象，如下：

那么如何应用 for…of 来遍历对象属性呢，首先须要做的就是将 obj 对象转换成一个可迭代对象，这里能够借助 Object.keys() 办法，调整后的代码如下：

let obj = {type: 1, keyword: "js"};
for (let key of Object.keys(obj)) {console.log(key, obj[key])
}

输入后果如下：

type 1
keyword js

3、Object.keys()

在下面的 for…of 语句中，曾经应用了 Object.keys() 办法将 obj 对象转换成了一个可迭代对象，其实也能够间接应用 Object.keys() 办法来遍历一个对象的属性，先来看看它的定义

Object.keys() 办法会返回一个由一个给定对象的本身可枚举属性组成的数组，数组中属性名的排列程序和失常循环遍历该对象时返回的程序统一

测试代码如下：

let obj = {type: 1, keyword: "js"};
Object.keys(obj).forEach(key => console.log(key, obj[key]))

输入后果如下：

type 1
keyword js

4、Object.entries()

除了上述的 Object.keys() 办法，还有应用 Object.entries() 办法，它的定义如下：

Object.entries() 办法返回一个给定对象本身可枚举属性的键值对数组，其排列与应用 for…in 循环遍历该对象时返回的程序统一（区别在于 for-in 循环还会枚举原型链中的属性）。

测试代码如下：

let obj = {type: 1, keyword: "js"};
Object.entries(obj).forEach(item => console.log(item[0], item[1]))

输入后果如下：

type 1
keyword js

这个办法和 Object.keys() 办法的区别在于，它循环返回的后果是键值对，而 Object.keys() 返回的只是对象的属性名称，并不包含值，如果只是想遍历一个对象的所有属性值，那么能够应用另外的一个办法：Object.values()

5、Object.getOwnPropertyNames()

这个办法也能够用来遍历一个对象的属性，它的定义如下：

Object.getOwnPropertyNames() 办法返回一个由指定对象的所有本身属性的属性名（包含不可枚举属性但不包含 Symbol 值作为名称的属性）组成的数组。

上面来看看测试代码：

let obj = {type: 1, keyword: "js"};
Object.getOwnPropertyNames(obj).forEach(key => console.log(key, obj[key]))

输入后果如下：

type 1
keyword js

6、Object.getOwnPropertySymbols()

这个办法也能够用来遍历一个对象的属性，它的定义如下：

Object.getOwnPropertySymbols() 办法返回一个给定对象本身的所有 Symbol 属性的数组。

从它的定义能够看出，它只能用于遍历 Symbol 属性，不能遍历非 Symbol 属性，对于一个一般对象，如果没有 Symbol 属性，那么其实是无奈应用该办法来遍历的，具体测试代码如下：

let obj = {type: 1, keyword: "js"};
Object.getOwnPropertySymbols(obj).forEach(key => console.log(key, obj[key]))

无奈输入任何后果，因为 obj 对象没有任何 Symbol 属性，应用 Object.getOwnPropertySymbols(obj) 办法，只会失去一个空数组。

上面来定义一个蕴含 Symbol 属性的对象，同时来遍历一下这个对象的属性：

let type = Symbol('type');
let keyword = Symbol('keyword');
let symbolObj = {};
symbolObj[type] = 1;
symbolObj[keyword] = 'js';
symbolObj['name'] = 'javascript';

Object.getOwnPropertySymbols(symbolObj).forEach(key => console.log(key, symbolObj[key]));

输入的后果如下：

Symbol(type) 1
Symbol(keyword) 'js'

尽管 symbolObj 对象有三个属性，然而只会输入其中的两个 Symbol 属性：Symbol(type) 和 Symbol(keyword) 属性，而不会输入一般属性 name。

7、Reflect.ownKeys()

除了应用 Object 提供的静态方法外，还能够应用 Reflect.ownKeys() 办法来遍历对象属性，首先来看看 Reflect 对象是什么：

Reflect 是一个内置的对象，它提供拦挡 JavaScript 操作的办法，不能通过 new 运算符对其进行调用，或者将 Reflect 对象作为一个函数来调用，Reflect 的所有属性和办法都是动态的（就像 Math 对象）。

再来看看 Reflect.ownKeys() 办法的定义

静态方法 Reflect.ownKeys() 返回一个由指标对象本身的属性键组成的数组。

从它的定义能够看出，它和 Object.keys() 办法差不多，测试代码如下：

let obj = {type: 1, keyword: "js"};
Reflect.ownKeys(obj).forEach(key => console.log(key, obj[key]))

输入后果如下：

type 1
keyword js

参考资料

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration
• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object
• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect