enumerable 和 configurable 属性详解
enumerable 和 configurable 属性详解
在 JavaScript 中，Object.defineProperty() 方法的配置项 enumerable 和 configurable 控制着对象属性的基本行为。下面我将详细解释这两个关键配置项。
可视化对比表
| 特性 | enumerable | configurable |
|---|---|---|
| 控制内容 | 属性是否可枚举 | 属性是否可配置 |
| 默认值 | false | false |
| 影响操作 | for...in、Object.keys()、JSON.stringify() | delete、属性重定义、特性修改 |
设置为 true 时 | 属性出现在枚举操作中 | 属性可删除、可修改特性 |
设置为 false 时 | 属性在枚举操作中不可见 | 属性不可删除、特性不可修改 |
| 在 Vue 中的应用 | 确保属性在模板渲染中可见 | 允许 Vue 动态修改响应式属性 |
详细说明
1. enumerable（可枚举性）
enumerable 控制属性是否出现在对象的属性枚举中。
-
默认值：
false -
设置为
true时：- 属性会出现在
for...in循环中 - 属性会被
Object.keys()包含 - 属性会被
JSON.stringify()序列化 - 属性会被
Object.assign()和扩展运算符 (...) 复制
- 属性会出现在
-
设置为
false时：- 属性不会出现在上述操作中
- 但仍可通过直接访问属性名获取 (
obj.property) - 可用
Object.getOwnPropertyNames()获取
const obj = {};// 添加可枚举属性
Object.defineProperty(obj, 'visible', {value: 'I am visible',enumerable: true
});// 添加不可枚举属性
Object.defineProperty(obj, 'hidden', {value: 'I am hidden',enumerable: false
});console.log(Object.keys(obj)); // ['visible']
console.log(JSON.stringify(obj));