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多渠道发布