在前端开发中，我们经常需要对数组或对象进行判空操作，以避免在后续代码中出现空指针或 undefined 等问题。然而，手写判空逻辑不仅繁琐，而且容易出错。为了解决这个问题，我们可以使用 npm 包 empty-within。
empty-within 简介
empty-within 是一个轻量级的 npm 包，专门用于检查 JavaScript 数组或对象中嵌套的元素是否为空。它可以检查多层嵌套的元素，并且支持自定义空值的类型和空值的判定规则。使用 empty-within 可以简化判空逻辑，并提升代码的可读性和可维护性。
empty-within 安装
在使用 empty-within 之前，需要先安装它。可以通过以下命令在命令行中进行安装：
npm install empty-within
安装完成后，即可在项目中引入 empty-within。
empty-within 使用方法
empty-within 提供了两种使用方式：函数式调用和链式调用。下面分别介绍这两种调用方式。
函数式调用
函数式调用方式是 empty-within 的基础使用方式。该方式涉及到两个函数：isWithinEmpty 和 getEmptyIndexes。
isWithinEmpty函数
isWithinEmpty 函数接收两个参数：data 和 empties。其中，data 表示要检查的数组或对象，empties 表示空值的类型和判定规则。
empties 参数可以为以下类型之一：
- 字符串：表示要判定为空的字符串内容。例如，' ' 或 '' 表示空字符串，0 表示空数字，null 或 undefined 表示空值，[] 或 {} 表示空数组或空对象。
- 数组：表示要判定为空的多个字符串内容。例如，['a', ''] 表示空字符串和 'a'。
- 函数：表示自定义的判定规则。该函数返回 true 表示空，false 表示非空。
isWithinEmpty 函数返回值为 Boolean 类型，表示 data 是否为空。
以下是一个使用 isWithinEmpty 函数的示例：
-- -------------------- ---- -------
----- ------- - --------------------------------------
----- ---- - -
----- ----- -----
---- ---
-------- -
----- ---
-------- -----
--
-------- ---------- --- -----------
--
----- ------ - ------------- -- -- --- ----- ------------
-------------------- -- ----上述代码中，data 对象包含了多层嵌套的元素。我们使用 isEmpty 函数，检查其中的空值是否符合指定的判定规则。由于 data 对象中存在空字符串、空数组和空值，最终结果返回 true。
getEmptyIndexes函数
getEmptyIndexes 函数与 isWithinEmpty 函数类似，也接收两个参数：data 和 empties。不同的是，它返回值为一个数组，表示 data 中所有满足指定判定规则的元素的索引和路径。
以下是一个使用 getEmptyIndexes 函数的示例：
-- -------------------- ---- -------
----- -------- - ----------------------------------------
----- ---- - -
----- ----- -----
---- ---
-------- -
----- ---
-------- -----
--
-------- ---------- --- -----------
--
----- ------ - -------------- -- -- --- ----- ------------
-------------------- -- - - ---------- ------ -- - ---------- --------- -- - ---------- - - -上述代码中，result 数组的每一项表示一个空值元素的索引和路径。例如，[ 'address', 'city' ] 表示位于 address 对象的 city 属性的空字符串值。
链式调用
除了函数式调用，empty-within 还提供了链式调用方式。链式调用方式是基于函数式调用方式之上的封装，可以更方便地使用和组合判定规则。
链式调用方式包含以下函数：
emptyWithin：创建 empty-within 实例。isWithin：检查数据是否在空值集合内。isNotWithin：检查数据是否不在空值集合内。isArray：检查数据是否为数组类型。isObject：检查数据是否为对象类型。isEmptyArray：检查数据是否为空数组。isEmptyObject：检查数据是否为空对象。value：获取链式调用的结果。
以下是一个使用链式调用方式的示例代码：
-- -------------------- ---- -------
----- ----------- - ------------------------------------
----- ---- - -
----- ----- -----
---- ---
-------- -
----- ---
-------- -----
--
-------- ---------- --- -----------
--
----- ------- - -- -- --- ----- -----------
----- ------ - -----------------
-----------
------------------
-------------------
----------------
---------
-------------------- -- -----上述代码中，我们首先使用 emptyWithin 函数创建一个 empty-within 实例，然后通过 isObject 函数判断 data 是否为对象类型。接着，我们使用 isWithin 函数检查 data 中所有嵌套元素是否为空值，并使用 isNotWithin 函数排除数字 0。最后，我们使用 isEmptyObject 函数检查 data 对象是否为空对象。最终结果返回 false，表示 data 对象不为空对象。
empty-within 总结
通过本文的介绍，我们学习了如何使用 empty-within 检查 JavaScript 数组或对象中的空值元素，避免空指针或 undefined 等问题。empty-within 提供了函数式调用和链式调用两种使用方式，可以根据项目的需要选择合适的方式。使用 empty-within 可以简化判空逻辑，并提升代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e20a563576b7b1ecdec