Lodash源码阅读-isEmpty

功能概述

能判断各种各样的数据类型是不是"空的"。不管你给它数组、对象、Map、Set,还是字符串,它都能准确告诉你是不是空的。而且实现方式很巧妙,针对不同类型的数据采用不同的判断策略。

源码实现

js 复制代码
function isEmpty(value) {
  if (value == null) {
    return true;
  }
  if (
    isArrayLike(value) &&
    (isArray(value) ||
      typeof value == "string" ||
      typeof value.splice == "function" ||
      isBuffer(value) ||
      isTypedArray(value) ||
      isArguments(value))
  ) {
    return !value.length;
  }
  var tag = getTag(value);
  if (tag == mapTag || tag == setTag) {
    return !value.size;
  }
  if (isPrototype(value)) {
    return !baseKeys(value).length;
  }
  for (var key in value) {
    if (hasOwnProperty.call(value, key)) {
      return false;
    }
  }
  return true;
}

实现原理解析

整体思路概述

这个函数的实现思路非常清晰,就像走一个决策树:

  1. 先处理最简单的 null/undefined 情况
  2. 然后判断是不是数组类型的(包括数组、字符串、类数组等)
  3. 接着看看是不是 Map/Set 类型
  4. 再检查是不是原型对象
  5. 最后处理普通对象的情况

每一步都针对特定类型采用最合适的判空方式,下面我们来详细看看每种情况。

1. null/undefined 判断

js 复制代码
if (value == null) {
  return true;
}

这是最基础的判断,用双等号(==)来同时处理 null 和 undefined:

js 复制代码
console.log(isEmpty(null)); // true
console.log(isEmpty(undefined)); // true

// 但其他假值不一定是空的
console.log(isEmpty(0)); // false
console.log(isEmpty(false)); // false

2. 数组类型判断

js 复制代码
if (
  isArrayLike(value) &&
  (isArray(value) ||
    typeof value == "string" ||
    typeof value.splice == "function" ||
    isBuffer(value) ||
    isTypedArray(value) ||
    isArguments(value))
) {
  return !value.length;
}

这段代码处理所有有 length 属性的类型,包括:

js 复制代码
// 数组
console.log(isEmpty([])); // true
console.log(isEmpty([1, 2])); // false

// 字符串
console.log(isEmpty("")); // true
console.log(isEmpty("hello")); // false

// 类数组对象
function foo() {
  console.log(isEmpty(arguments)); // true
}
foo();

// 类型化数组
console.log(isEmpty(new Int8Array())); // true
console.log(isEmpty(new Int8Array(2))); // false

3. Map/Set 类型判断

js 复制代码
var tag = getTag(value);
if (tag == mapTag || tag == setTag) {
  return !value.size;
}

对于 Map 和 Set,我们看它们的 size 属性:

js 复制代码
// Map
const map = new Map();
console.log(isEmpty(map)); // true
map.set("key", "value");
console.log(isEmpty(map)); // false

// Set
const set = new Set();
console.log(isEmpty(set)); // true
set.add(1);
console.log(isEmpty(set)); // false

4. 原型对象判断

js 复制代码
if (isPrototype(value)) {
  return !baseKeys(value).length;
}

处理原型对象的情况:

js 复制代码
// 创建一个构造函数
function Person() {}
Person.prototype.name = "John";

// 检查原型对象
console.log(isEmpty(Person.prototype)); // false

// 空的原型对象
function Empty() {}
console.log(isEmpty(Empty.prototype)); // true

5. 普通对象判断

js 复制代码
for (var key in value) {
  if (hasOwnProperty.call(value, key)) {
    return false;
  }
}
return true;

最后处理普通对象,看看有没有自己的可枚举属性:

js 复制代码
// 空对象
console.log(isEmpty({})); // true

// 有属性的对象
console.log(isEmpty({ name: "John" })); // false

// 只有不可枚举属性的对象
const obj = Object.defineProperty({}, "name", {
  value: "John",
  enumerable: false,
});
console.log(isEmpty(obj)); // true

总结

通过一系列的条件判断,优雅地处理了各种不同类型的空值判断。不同类型用不同的判空标准:length、size、自有属性等。而且代码结构清晰,判断逻辑层层递进。

相关推荐
烂蜻蜓1 小时前
深入理解 HTML 元素:构建网页的基础
开发语言·前端·css·html·html5
第七玩家3 小时前
React-异步队列执行方法useSyncQueue
前端·javascript·react.js
少年姜太公3 小时前
让你快速拿捏大厂面试中关于eventloop执行顺序问题
前端·javascript·面试
m0_748238277 小时前
Nginx解决前端跨域问题
运维·前端·nginx
轻口味7 小时前
【每日学点HarmonyOS Next知识】截图组件截取列表、Toggle组件、Web组件请求头、列表选择弹窗、游戏加速
前端·游戏·harmonyos·harmonyosnext
NoneCoder7 小时前
工程化与框架系列(22)--前端性能优化(中)
前端·性能优化·状态模式
qq_533183027 小时前
关于父组件向子组件传值的形式(类型一)
前端·javascript·vue.js
糖朝7 小时前
VUE3开发-9、axios前后端跨域问题解决方案
前端·javascript·vue.js
m0_694845577 小时前
使用服务器搭建无门槛ChatGPT WEB应用LobeChat
linux·运维·服务器·前端·网络·chatgpt
明耀7 小时前
uniapp或者vue 使用serialport
前端·vue.js·uni-app