新蜂商城开源仓库（内涵 Vue 2.x 和 Vue 3.x 的 H5 商城开源代码，带服务端 API 接口）：https://github.com/newbee-ltd Vue 3.x + Vant 3.x + Vue-Router 4.x 高仿微信记账本开源地址（带服务端 API 接口）：https://github.com/Nick930826/daily-cost

前言

平时混迹各种前端群，聊到面试换工作之类的话题，必定会说到前端基础能力。我在想这个基础能力可否量化？我觉得是可以量化的，通过平时业务的一些细节，就能发现一个前端的基础知识是否过关。特别是写一个工具方法的时候，尤为明显。 本文并不是看重这个问题的答案是什么，而是回答这个问题时，你所能展示出来的思路和能力。

判断一个对象是否是空对象

这个问题想必很多同学心中都有自己的答案，但是答案是否站得住脚，那就两说了。下面通过对这个问题的分析，体现回答一个问题的全面性，这才能体现一个前端开发的基础知识掌握程度。

Object.keys

先考察对 ES6 是否熟悉，Object.keys 方法返回对象自身可枚举属性组成的数组。利用这个特性我们可以这样写判断：

  1. function isEmpty (obj) {
  2.     if (!(obj instanceof Object)) {
  3.         throw Error('不是个正经对象')
  4.         return
  5.   }
  6.      return Object.keys(obj).length === 0
  7. }

验证：

  1. const test1 = {}
  2. isEmpty(test1) // true
  4. const test2 = new Date()
  5. const test3 = new String()
  6. const test4 = new Number()
  7. const test5 = new Boolean()
  8. const test6 = new Array()
  9. const test7 = new RegExp()
  10. const test8 = new Function()
  11. isEmpty(test2) // true
  12. isEmpty(test3) // true
  13. isEmpty(test4) // true
  14. isEmpty(test5) // true
  15. isEmpty(test6) // true
  16. isEmpty(test7) // true
  17. isEmpty(test8) // true

这不是见鬼了吗， isEmpty 方法站不住脚了，JS 内部的几个构造方法，通过 new 关键字声明的实例对象， Object.keys 也会返回空数组，并且这些对象还不会被 obj instanceof Object 检测到，因为无论是 Funtion、Boolean、Number 等等声明的实例对象，都会返回 true。我突然想起来，加一个判断便可解决上述问题。

  1. function isEmpty (obj) {
  2.     if (!(obj instanceof Object) || obj.__proto__ !== Object.prototype) {
  3.         throw Error('不是个正经对象')
  4.         return
  5.   }
  6.      return Object.keys(obj).length === 0
  7. }

obj.__proto__ === Object.prototype 加这段，就利用到了原型链的知识。 一个引用类型的隐式原型指向它的构造函数的显式原型。所以， obj.__proto__ 必须指向 Object.prototype，才能证明 obj 是一个 Object 对象。你再去验证一遍，现在的 isEmpty 已经是附带 武装色霸气 的方法，站得住脚。

上述内容体现了一个前端开发者对 ES6 的熟练程度，以及对 JS 原型知识的掌握情况，在谈吐间面试官便能知道你的基础是否扎实。当然，垃圾面试官除外。

JSON.stringify

问一个问题，回答一个方法，那是傻子吧。方法不怕多，好饭不怕晚。问一句答一句，这不是一个好的前端开发该有的样子。通过 JSON.stringify 将变量序列化，也可以判断一个变量是否为控对象：

  1. var test = {}
  2. if (JSON.stringify(test) === '{}') {
  3.     console.log('是空对象')
  4. }

丑是丑了点，但是该方法简单粗暴，是我经常在业务中使用的形式。

for…in

for...in 方法，遍历对象的属性，通过这个特性，可以判断出是否为空对象：

  1. var test = {}
  2. function isEmpty (obj) {
  3.   if (!(obj instanceof Object) || obj.__proto__ !== Object.prototype) {
  4.         throw Error('不是个正经对象')
  5.         return
  6.   }
  7.     for (var key in obj) {
  8.     return false
  9.   }
  10.   return true
  11. }
  12. isEmpty(test) // true

和方法一类似，事先需要判断传入的 obj 是否为正经的 Object 对象，如果是 String、Function 等构造函数通过 new 生成的实例对象，那也不行。

聊着聊着，面试官会发现你这个人，确实是个人才。
image.png

Lodash.isEmpty

乘胜追击，合理利用工具。 Lodash 为我们写好了判断空对象的方法 Lodash.isEmpty。说句实话，如果能用别人写好的，当然是最好的，你专注业务开发就好了，工具的事情交给专业的来。这里就不赘述方法了，大家可自行前往官方文档欣赏一下。当然如果引入工具库的话，会增加项目打包的体积，请三思而后行。
image.png

总结

回答问题的思路要清晰，脑子里要形成一套自己的说辞，不一定要和别人一摸一样的背下来，关键是要融入自己的理解和想法，多思考“为什么”，而不是“怎么办”。