JS中遍历对象属性的几种方式

原创已于 2022-08-25 16:27:03 修改 · 1.1w 阅读

14 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaScript

于 2022-06-22 15:01:14 首次发布

本文详细探讨了JavaScript中遍历对象属性的四种方法：Object.keys()、Object.getOwnPropertyNames()、for-in循环以及它们在遍历Person.prototype和person实例时的不同表现。文章通过实例展示了这些方法如何获取实例属性，包括可枚举和不可枚举属性，并突出了它们在处理原型链属性时的区别。

为了彻底搞定对象遍历的方法，我不得不翻出我的红宝书，找到“面向对象的程序设计—创建对象”的内容，仔细的研究了一下（起因来源于，突发奇想，想彻底搞懂原型链相关的知识，结果发现了对象属性遍历的几种方式，O哈哈~）

我们先创建一个对象

function Person() {
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function () {
  alert(this.name);
};

let person = new Person();
person.like = 'apple'

peson实例上有like属性，其他的name 、age 、job 、sayName 为原型上的属性

1. `Object.keys`

这个方法接收一个对象作为参数，返回一个包含所有可枚举实例属性的字符串数组

Object.keys()：返回包含对象键名的数组
Object.values()：返回包含对象键值的数组
Object.entries()：返回包含对象键名和键值的数组

2. `Object.getOwnPropertyNames()`

如果你想要得到所有实例属性，无论它是否可枚举，都可以使用 Object.getOwnPropertyNames()方法。

3. `for-in` 循环

用 for-in 循环时，返回的是所有能够通过对象访问的、可枚举的属性，其中既包括存在于实例中的属性，也包括存在于原型中的属性

4. 代码

遍历Person.prototype对象

console.log('=========遍历Person.prototype对象===========')
// 方法一
var keys1 = Object.keys(Person.prototype);
console.log('keys1: ', keys1); // keys1:  (4) ['name', 'age', 'job', 'sayName']
// 方法二
var keys2 = Object.getOwnPropertyNames(Person.prototype);
console.log('keys2: ', keys2); // keys2:  (5) ['constructor', 'name', 'age', 'job', 'sayName']
// 方法三
let keys3 = []
for (var prop in Person.prototype) {
  keys3.push(prop)
}
console.log('keys3: ', keys3); // keys3:  (4) ['name', 'age', 'job', 'sayName']

注意遍历Person.prototype时，结果中包含了不可枚举的 constructor 属性

遍历person对象

console.log('=========遍历person对象===========')
// 方法一
var personKeys1 = Object.keys(person);
console.log('personKeys1: ', personKeys1); // personKeys1:  ['like']
// 方法二
var personKeys2 = Object.getOwnPropertyNames(person);
console.log('personKeys2: ', personKeys2); // personKeys2:  ['like']
// 方法三
let personKeys3 = []
for (var prop in person) {
  personKeys3.push(prop)
}
console.log('personKeys3: ', personKeys3); // personKeys3:  (5) ['like', 'name', 'age', 'job', 'sayName']