JavaScript中判断对象是否为空的常用方法与技巧详解
判断对象是否为空需检查自身可枚举属性,推荐使用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
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。
相关推荐
补充同频道和同主题内容,方便继续浏览更多相关内容。
同类最新
继续查看同栏目最近更新的文章。
JavaScript数组字面量与构造函数创建稀疏数组的差异
数组字面量创建稠密数组,空位默认为undefined;Array()构造函数传入单个数字参数会生成稀疏数组,索引不存在且遍历方法跳过,多参数或非数字参数则行为与字面量一致。初始化稠密数组应使用Array from或fill。
如何优化Bootstrap按钮的焦点状态环CSS样式方法详解
Bootstrap按钮焦点样式优化需将内阴影改为外发光,覆盖所有焦点选择器避免原生蓝边闪烁。使用:focus-visible区分键盘与鼠标交互,同时处理按钮组圆角、父容器溢出及浏览器兼容性,确保焦点反馈清晰且符合无障碍标准。
Less中强制转换CSS单位适配不同移动端方案详解
Less单位转换需手动完成:用unit()剥离单位,通过变量控制基准值,再拼接目标单位。px2rem函数须区分输入类型(纯数字、带px单位等),基准值@base-font-size需全局定义且不可在媒体查询中重定义。所有运算发生在编译期,适配需提前编译多套CSS文件。
Vue 插件开发与使用完整指南
Vue插件通过install方法为应用注入全局属性、组件、指令、混入和provide等扩展能力,注册时机须在createApp之后、mount之前。插件支持对象或函数形式,使用app use()注册。开发时需注意命名冲突、配置默认值及错误处理,确保工程健壮性。
CSS响应式视频全屏黑边排版问题解决方案
CSS响应式视频全屏黑边源于盒子模型、定位与加载策略缺失。需重置body边距及溢出,父容器用position:fixed与100dvh,video设为block+object-fit:cover。autoplay需加muted、playsinline。移动端用100dvh防地址栏抖动,低端机分辨率不超1倍。
