被 lodash 的一个方法给坑了

前言

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~

背景

我们项目中有一处业务代码,需要根据不同的条件,对某个对象进行属性的删除,大概代码如下:

接着需要判断这个对象是否为空,为空的话就去执行另一个很重要的逻辑,这里判断对象为空,我们选择了lodashisEmpty方法

出问题了

然后就出事了,上线后发现有 BUG ,定位问题之后,发现就是明明对象不为空,然后isEmpty还是把这个对象判为空了,然后去执行了接下来的逻辑,导致出现 BUG

然后我就去看了一下 isEmpty的源码,总算是发现问题了!

可以看到最后一个环节,isEmpty 在判断对象是否为空的时候,用了for in + hasOwnProperty去判断某一个属性是否存在对象中,只要有一个存在,那么这个对象就不为空!

诶!那好像也没啥问题啊?但是我突然想到,那这个for in能遍历出 Symbol 类型的属性吗?于是我试了一下,发现 for in 并不会遍历 Symbol属性

这也严重了问题出在lodash 的 isEmpty上,并且根本原因是 for in 并不会遍历 Symbol属性

解决问题

所以还是自己实现一个来解决这个问题吧!!!我们可以获取到对象的属性个数,判断属性个数是否为0,为0那就是为空

那可以用Object.keys吗?他的作用就是可以把对象的属性放到一个数组中,我们试试之后,发现Object.keys并不会把Symbol属性算进去

我们换一下Reflect.ownKeys试试,发现就完全可以了!!!!

所以最终自己实现了一个 isEmpty

结语 & 加学习群 & 摸鱼群

我是林三心

  • 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手;
  • 一个偏前端的全干工程师;
  • 一个不正经的掘金作者;
  • 一个逗比的B站up主;
  • 一个不帅的小红书博主;
  • 一个喜欢打铁的篮球菜鸟;
  • 一个喜欢历史的乏味少年;
  • 一个喜欢rap的五音不全弱鸡

如果你想一起学习前端,一起摸鱼,一起研究简历优化,一起研究面试进步,一起交流历史音乐篮球rap,可以来俺的摸鱼学习群哈哈,点这个,有7000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点

相关推荐
layman05284 小时前
webpack5 css-loader:从基础到原理
前端·css·webpack
半桔4 小时前
【前端小站】CSS 样式美学:从基础语法到界面精筑的实战宝典
前端·css·html
AI老李4 小时前
PostCSS完全指南:功能/配置/插件/SourceMap/AST/插件开发/自定义语法
前端·javascript·postcss
_OP_CHEN4 小时前
【前端开发之CSS】(一)初识 CSS:网页化妆术的终极指南,新手也能轻松拿捏页面美化!
前端·css·html·网页开发·样式表·界面美化
啊哈一半醒4 小时前
CSS 主流布局
前端·css·css布局·标准流 浮动 定位·flex grid 响应式布局
PHP武器库4 小时前
ULUI:不止于按钮和菜单,一个专注于“业务组件”的纯 CSS 框架
前端·css
电商API_180079052475 小时前
第三方淘宝商品详情 API 全维度调用指南:从技术对接到生产落地
java·大数据·前端·数据库·人工智能·网络爬虫
晓晓莺歌5 小时前
vue3某一个路由切换,导致所有路由页面均变成空白页
前端·vue.js
Up九五小庞5 小时前
开源埋点分析平台 ClkLog 本地部署 + Web JS 埋点测试实战--九五小庞
前端·javascript·开源
qq_177767376 小时前
React Native鸿蒙跨平台数据使用监控应用技术,通过setInterval每5秒更新一次数据使用情况和套餐使用情况,模拟了真实应用中的数据监控场景
开发语言·前端·javascript·react native·react.js·ecmascript·harmonyos