JS遍历对象属性的方法（可枚举和不可枚举的区别）

本文例举JavaScript中遍历对象属性的方法，文末介绍可枚举和不可枚举的区别。

JS遍历对象属性的常用方法：

1. for...in 循环：用于遍历对象的可枚举属性，包括继承的属性。

const obj = {a: 1, b: 2, c: 3};

for (let key in obj) {
  console.log(key, obj[key]);
}
// 输出:
// a 1
// b 2
// c 3

注意：使用 for…in 循环时，可能会遍历到对象原型链上的属性，因此可以通过 hasOwnProperty 方法来过滤掉继承的属性

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}

2. Object.keys() 方法：返回一个包含对象自身的可枚举属性（不包括继承的属性）的数组。

const obj = {a: 1, b: 2, c: 3};
const keys = Object.keys(obj);

for (let key of keys) {
  console.log(key, obj[key]);
}
// 输出:
// a 1
// b 2
// c 3

3. Object.entries() 方法：返回一个包含对象自身的可枚举属性的键值对数组。

const obj = {a: 1, b: 2, c: 3};
const entries = Object.entries(obj);

for (let [key, value] of entries) {
  console.log(key, value);
}
// 输出:
// a 1
// b 2
// c 3

4. Object.getOwnPropertyNames() 方法：返回一个包含对象自身的所有属性（包括不可枚举属性）的数组。

const obj = {a: 1, b: 2, c: 3};
const properties = Object.getOwnPropertyNames(obj);

for (let property of properties) {
  console.log(property, obj[property]);
}
// 输出:
// a 1
// b 2
// c 3

可枚举和不可枚举的区别：

在JavaScript中，每个对象属性都有一个属性描述符（property descriptor），其中之一就是enumerable（可枚举）属性。

可枚举属性是指那些可以通过对象属性枚举（例如通过 for…in 循环）访问到的属性。当一个属性是可枚举的时候，它将会被枚举出来，可以被遍历到。

不可枚举属性是指那些不能通过对象属性枚举访问到的属性。通常这些属性是一些内部属性，不会出现在通常的遍历中。例如，对象的内置方法（例如 Object.prototype.toString）的属性通常是不可枚举的。

默认情况下，通过字面量创建的对象的属性都是可枚举的，而通过构造函数创建的对象的属性通常是不可枚举的，但可以通过 Object.defineProperty() 或者类似的方法来定义为不可枚举的。

例如，下面的示例展示了可枚举属性和不可枚举属性的区别：

const obj = {
  a: 1,
  b: 2,
};

Object.defineProperty(obj, 'c', {
  value: 3,
  enumerable: false, // 将属性 c 定义为不可枚举
});

for (let key in obj) {
  console.log(key); // 输出: a 和 b，不包括 c
}

console.log(Object.keys(obj)); // 输出: ['a', 'b']，不包括 c
console.log(Object.getOwnPropertyNames(obj)); // 输出: ['a', 'b', 'c']，包括 c

在这个示例中，属性 c 被定义为不可枚举，因此它不会出现在 for…in 循环或者 Object.keys() 的结果中，但会出现在 Object.getOwnPropertyNames() 的结果中。