简介
are-they-here 是一个 npm 包，可以用来检查一个数组中是否包含了另一个数组中的所有元素。它可以应用于前端开发中的许多场景，例如表单验证、数据筛选等。
安装
通过 npm 安装：
--- ------- -------------
使用示例
----- ----------- - ------------------------- ----- ---- - --- -- -- --- ----- ---- - --- --- ----------------------------- ------- -- ----
API
areTheyHere(mainArray, subArray)
mainArray：要检查的主数组。subArray：要检查的子数组。
返回值：Boolean，表示子数组中的所有元素是否都存在于主数组中。
深入了解
下面将介绍如何使用 are-they-here 完成常见的前端开发任务，并讲解其实现原理。
表单验证
在表单提交前，我们通常需要对用户填写的数据进行验证。例如，当需要用户填写一个包含多个 checkbox 的表单时，我们可以使用 are-they-here 来验证用户是否选中了某些 checkbox。具体代码如下：
----- ----------- ---------------- ----------------
------ --------------- -------------- -------------- ------
------ --------------- -------------- --------------- ------
------ --------------- -------------- --------------- ------
------ ------------- -----------
-------
--------
-------- -------------- -
----- ---------- - --------------------------------------
----- ------------- - ----------------------
---------------- -- -----------------
------------- -- ----------------
-- ----------------------- --------- ---------- --------------- -
-------------------
------ ------
-
------ -----
-
---------上面的代码中，我们首先获取了所有 name 属性为 fruit[] 的 checkbox 元素，然后过滤出被选中的 checkbox 的值，最后使用 are-they-here 验证选中的水果是否包含在期望的水果中。
实现原理：areTheyHere 函数遍历子数组中的每个元素，在主数组中查找是否存在相同的元素。如果存在，就从主数组中删除该元素。遍历完成后，如果主数组已经为空，就意味着子数组中的所有元素都存在于主数组中。
数据筛选
在实现数据筛选功能时，我们通常需要提供一些筛选条件（例如价格区间、商品分类等），然后返回符合条件的数据。这时，我们可以使用 are-they-here 来判断数据中是否包含所有的筛选条件。以下是一个例子：
----- -------- - -
- --- -- ----- ------- ---- ------ ----- --------- ---- --
- --- -- ----- ------- ------ ----- --------- ---- --
- --- -- ----- -------- ------ ----- --------- ---- --
--
-------- -------------------------- -
------ ----------------------- --
--------------------------------------- ------------------------
--
-
---------------------------- ------ ----- --------- ---- ----上面的代码中，我们首先定义了一个产品数组，然后定义了一个 searchProducts 函数，在函数内部使用了 areTheyHere 函数进行筛选。searchProducts 函数接受一个筛选条件对象作为参数，例如 { price: 3000, category: '电视' }。对象的属性表示筛选条件的名字，属性值表示期望的值。Object.entries 方法将对象转换为数组，例如 { price: 3000, category: '电视' } 将被转换为 [['price', 3000], ['category', '电视']]，然后传入 areTheyHere 函数进行比较。
实现原理：areTheyHere 函数遍历子数组中的每个元素（即筛选条件），在主数组中查找是否存在相同的键值对。如果存在，就比较它们的值是否相等。如果值不相等，就说明该主数组元素不符合条件，需要继续查找；如果值相等，就从主数组中删除该元素。遍历完成后，如果主数组已经为空，就意味着子数组中的所有键值对都存在于主数组中，该主数组元素符合条件。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600559e181e8991b448d770d