JavaScript对象属性可枚举性详解

文章的更新路线：JavaScript基础知识-Vue2基础知识-Vue3基础知识-TypeScript基础知识-网络基础知识-浏览器基础知识-项目优化知识-项目实战经验-前端温习题（HTML基础知识和CSS基础知识已经更新完毕）

正文

在 JavaScript 中，对象的属性分为可枚举和不可枚举两种，这涉及到对象属性遍历、序列化等方面的行为。

可枚举性（Enumerable）

可枚举属性是指能够通过对象的属性遍历方法（如 for...in 循环）访问到的属性。大多数内建对象的原型属性都是可枚举的。

示例：

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

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

for (let key in obj) {
  console.log(key); // 输出：a, b
}

console.log(Object.keys(obj)); // 输出：['a', 'b']
console.log(Object.getOwnPropertyNames(obj)); // 输出：['a', 'b', 'c']

优缺点：

• 优点： 可以通过遍历方法轻松访问和操作属性。
• 缺点： 在某些场景下，可能会意外遍历到不想要的属性，导致潜在的问题。

不可枚举性（Non-enumerable）

不可枚举属性是指无法通过对象的属性遍历方法访问到的属性。通常，使用 Object.defineProperty 或 Object.defineProperties 可以将属性设置为不可枚举。

示例：

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

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

for (let key in obj) {
  console.log(key); // 输出：a, b
}

console.log(Object.keys(obj)); // 输出：['a', 'b']
console.log(Object.getOwnPropertyNames(obj)); // 输出：['a', 'b', 'c']

// 获取所有属性，包括不可枚举属性
console.log(Object.getOwnPropertyNames(obj)); // 输出：['a', 'b']

优缺点：

• 优点： 不会被遍历到，更适合存储一些内部使用的属性，避免意外的外部访问和修改。
• 缺点： 需要使用特殊方法获取不可枚举属性，可能增加一些额外的复杂性。

影响因素

• 默认行为： 大多数对象的属性默认是可枚举的，但也有例外，如原型链上的属性默认是不可枚举的。
• Object.keys() 和 for...in 循环： 这两者只会枚举可枚举的属性。
• JSON.stringify： 不会序列化不可枚举的属性。
• Object.assign： 会复制所有可枚举的自有属性。

如何判断属性的枚举性

可以使用 Object.getOwnPropertyDescriptor(obj, prop) 方法获取属性的描述符，从而判断属性是否可枚举。

示例：

const obj = { a: 1 };

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

const descriptorA = Object.getOwnPropertyDescriptor(obj, 'a');
const descriptorB = Object.getOwnPropertyDescriptor(obj, 'b');

console.log(descriptorA.enumerable); // 输出：true
console.log(descriptorB.enumerable); // 输出：false

总结

可枚举性在 JavaScript 中是一个重要的概念，它影响着属性的遍历和序列化行为。通过合理地设置属性的可枚举性，可以更好地控制对象的行为，使其更符合实际需求。在实际开发中，根据具体情况选择是否将属性设置为可枚举，以便更好地管理和维护代码。

结束语

分享1：Python爬取股票数据（回复 股票），运行不成功或不会执行的可以留言。

分享2：有需要的自行获取（回复 11）。

分享3：AI资料大全，仅分享，不做购买推荐，有需要的自行获取（回复 AI）。

分享4：基于Springboot+Vue的开源小项目 适合新手入门练习（回复 医疗）

分享5：前端技术知识思维导图（回复 12）

本文由 mdnice 多平台发布