枚举不理解?一文让你醍醐灌顶

一、什么是枚举?先做 1 个生活化类比(核心)

把 JavaScript 对象想象成一个抽屉,属性就是抽屉里的文件:

  • 「可枚举」的文件:贴了「可展示」标签 → 别人来翻你的抽屉(遍历),能看到这份文件;
  • 「不可枚举」的文件:没贴「可展示」标签 → 别人翻抽屉看不到,但你自己知道文件在哪,能直接拿出来用。

枚举(enumerable)就是这个「可展示」标签 ------ 唯一作用:决定属性是否能被 "遍历工具" 看到,和属性本身是否存在、能否使用无关。

二、 用 3 行极简代码,看遍枚举的所有区别

我只写最核心的代码,逐行解释,你可以直接复制到浏览器控制台运行:

js 复制代码
// 1. 创建抽屉(对象),放1个"可展示"文件(默认可枚举属性)
const drawer = {
  文件A: "购物清单" // 没特殊说明,默认贴"可展示"标签(可枚举)
};

// 2. 往抽屉里加1个"不可展示"文件(手动设为不可枚举)
Object.defineProperty(drawer, "文件B", {
  value: "私密日记", // 文件内容
  enumerable: false // 核心:撕掉"可展示"标签(不可枚举)
});

// 3. 演示:别人翻抽屉(遍历)能看到什么?
console.log("别人翻抽屉看到的:", Object.keys(drawer)); 
// 输出:别人翻抽屉看到的:['文件A'] → 只看到可枚举的文件A

// 4. 演示:你自己拿文件(直接访问)能拿到什么?
console.log("你直接拿文件A:", drawer.文件A); // 输出:购物清单
console.log("你直接拿文件B:", drawer.文件B); // 输出:私密日记 → 虽然看不到,但能直接用!

三、 再补 1 个最常用的 "遍历工具" 对比(只看枚举的影响)

还是用上面的 drawer 对象,看最常用的 for...in 遍历:

js 复制代码
// 别人翻抽屉(for...in遍历)
console.log("遍历结果:");
for (let 文件名称 in drawer) {
  console.log(文件名称); // 只输出"文件A" → 还是看不到文件B
}

四、 关键追问:为什么要搞 "不可枚举"?

举个实际开发的例子:你写了一个用户对象,想存「公开信息」和「私密信息」:

js 复制代码
const user = {
  昵称: "小明", // 公开(可枚举,别人能看到)
};
// 身份证号是私密的,设为不可枚举
Object.defineProperty(user, "身份证号", {
  value: "110xxxx",
  enumerable: false
});

// 场景1:展示用户信息(遍历)→ 只显示公开的昵称,不会泄露身份证号
console.log("用户公开信息:", Object.keys(user)); // ['昵称']

// 场景2:后台验证(直接访问)→ 能拿到身份证号做校验
console.log("验证身份:", user.身份证号); // 110xxxx

五、 总结(只记 2 个核心点,多了不记)

  1. 枚举的唯一作用 :给属性贴 "可展示" 标签,决定 Object.keys()、for...in 等「遍历工具」能不能看到这个属性;
  2. 关键区别:不可枚举的属性只是 "隐身",不是 "消失"------ 遍历看不到,但能直接访问使用。

以上就是本次的学习分享,欢迎大家在评论区讨论指正,与大家共勉。

我是 Eugene,你的电子学友。

如果文章对你有帮助,别忘了点赞、收藏、加关注,你的认可是我持续输出的最大动力~

相关推荐
Autumn_ing1 小时前
Design.md生成UI怎么验收?举例运营后台的颜色、状态和数据核对
前端·ui·ai·设计系统·paico·ai生成ui·design.md
远离UE42 小时前
UE5 Substrate Thin Film 源码拆析
开发语言·javascript·ue5
keyipatience2 小时前
JavaScript学习(1)书写位置,变量、数据类型、运算符
开发语言·前端·javascript·css·学习
朱涛的自习室2 小时前
我给 Gemini 4 和 DeepSeek 搞了套「末位淘汰」,AI 干活会更猛吗?(Day 3)
android·前端·后端
java1234_小锋4 小时前
【技术专题】HTML5 网页技术 - HTML5简介 & HTML5 文档结构
前端·html·html5
鶴哥只手遮天5 小时前
Vue 3 核心源码深度剖析系列(v3.5.44)-第 1 章 项目全景:monorepo 架构与工程化体系
前端·vue.js·开源
流星。。方5 小时前
小团队官网SEO落地:前端语义化与静态生成的工程实践
前端·状态模式
用户530429765795 小时前
盘点危化品搬运诊断的6类工具与自处理边界判断
前端
curtain5 小时前
从古法编程到 Agent:我入行这两年,AI 改变了什么
前端·openai
zyfts5 小时前
10分钟自制Codex钉钉通知Skill:AI干完活自动钉钉提醒你
前端