游乐游手机版
首页/前端开发/文章详情

JavaScript中判断对象是否为空的常用方法与技巧详解

时间:2026-07-23 20:03
判断对象是否为空需检查自身可枚举属性,推荐使用Object keys(obj) length===0,该方法仅检查自身属性,且需先处理null或undefined。避免使用JSON stringify(忽略不可枚举且对null报错)或for in(遍历原型链)等易出错方式。
判断一个对象是否为“空”,核心在于它是否拥有“自身的可枚举属性”。这个概念看似简单,但在实际开发中经常有人踩坑。最稳妥、也最推荐的做法,就是直接使用 `Object.keys(obj).length === 0` —— 该方法只检查对象自身的属性,原型链上的属性不会干扰,连 `constructor` 这种不可枚举的属性也会自动被忽略。 ### 使用 Object.keys() 检查自身可枚举属性 这是业内公认的“标准答案”。空对象 `{}` 会返回 `[]`,长度自然为 0;有属性的对象(如 `{a: 1}`)数组非空,长度大于 0。不过有个小坑:如果 `obj` 是 `null` 或 `undefined`,直接调用会报错。因此,在使用前最好先判断一下类型。 ### 处理 null 和 undefined 的安全写法 线上环境中的变量常常会莫名其妙变成 `null`,或者尚未初始化。直接使用 `Object.keys(obj)` 很容易导致程序报红。可以这样加固: - `obj !== null && typeof obj === 'object' && Object.keys(obj).length === 0` - 更滴水不漏的写法:`obj && typeof obj === 'object' && !Array.isArray(obj) && Object.keys(obj).length === 0`(顺便把数组也排除掉) ### 其他方法的适用场景与局限 有些方法看起来也能用,但细节上各有各的麻烦: - `JSON.stringify(obj) === '{}'`:能跑,但性能较差。遇到 `undefined`、函数、Symbol 属性,要么丢失信息,要么直接报错,不太靠谱。 - `for...in` 循环 + `hasOwnProperty`:也能实现,但代码啰嗦,而且容易忘记 `hasOwnProperty` 判断,导致误把原型链上的属性也算进去。 - `Object.entries(obj).length === 0`:效果与 `Object.keys` 一样,ES2017+ 才支持,语义更明确(从键值对角度判断),但兼容性稍弱一些。 ### 简单封装成工具函数 如果项目里经常需要判断空对象,不如封装成一个函数,省得每次写一堆条件: ```ja vascript function isEmptyObject(obj) { return obj !== null && typeof obj === 'object' && !Array.isArray(obj) && Object.keys(obj).length === 0; } ``` 这样既清晰又安全,团队里其他人一看就懂。
来源:https://www.php.cn/faq/2803440.html
上一篇HTML5扫码相机自动对焦完整实践指南 下一篇Dropzone单文件上传限制与手动重置方法
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
JavaScript数组字面量与构造函数创建稀疏数组的差异
前端开发 · 2026-07-25

JavaScript数组字面量与构造函数创建稀疏数组的差异

数组字面量创建稠密数组,空位默认为undefined;Array()构造函数传入单个数字参数会生成稀疏数组,索引不存在且遍历方法跳过,多参数或非数字参数则行为与字面量一致。初始化稠密数组应使用Array from或fill。

如何优化Bootstrap按钮的焦点状态环CSS样式方法详解
前端开发 · 2026-07-25

如何优化Bootstrap按钮的焦点状态环CSS样式方法详解

Bootstrap按钮焦点样式优化需将内阴影改为外发光,覆盖所有焦点选择器避免原生蓝边闪烁。使用:focus-visible区分键盘与鼠标交互,同时处理按钮组圆角、父容器溢出及浏览器兼容性,确保焦点反馈清晰且符合无障碍标准。

Less中强制转换CSS单位适配不同移动端方案详解
前端开发 · 2026-07-25

Less中强制转换CSS单位适配不同移动端方案详解

Less单位转换需手动完成:用unit()剥离单位,通过变量控制基准值,再拼接目标单位。px2rem函数须区分输入类型(纯数字、带px单位等),基准值@base-font-size需全局定义且不可在媒体查询中重定义。所有运算发生在编译期,适配需提前编译多套CSS文件。

Vue 插件开发与使用完整指南
前端开发 · 2026-07-25

Vue 插件开发与使用完整指南

Vue插件通过install方法为应用注入全局属性、组件、指令、混入和provide等扩展能力,注册时机须在createApp之后、mount之前。插件支持对象或函数形式,使用app use()注册。开发时需注意命名冲突、配置默认值及错误处理,确保工程健壮性。

CSS响应式视频全屏黑边排版问题解决方案
前端开发 · 2026-07-25

CSS响应式视频全屏黑边排版问题解决方案

CSS响应式视频全屏黑边源于盒子模型、定位与加载策略缺失。需重置body边距及溢出,父容器用position:fixed与100dvh,video设为block+object-fit:cover。autoplay需加muted、playsinline。移动端用100dvh防地址栏抖动,低端机分辨率不超1倍。