前言
在前端开发中，我们经常需要从嵌套的对象或数组中筛选出特定属性或成员。然而，一些复杂的页面可能需要多次从不同的数据源中进行筛选，这将导致代码冗余和性能问题。为了解决这个问题，redux 统一状态管理方案的作者 Mark Erikson 创建了 reselect 库，它提供了一个选择器函数，用于对 redux 中存储的数据进行筛选并缓存结果以提高性能。
但是，当我们需要对嵌套的对象或数组进行筛选时，reselect 的选择器函数也会变得深奥和复杂。幸运的是，社区中的开发者针对该问题提出了 reselect-tree 库。它可以帮助我们更轻松地对树状结构的数据进行筛选，从而提高代码的可读性和维护性。
什么是 reselect-tree
reselect-tree 是一个基于 reselect 库的 npm 包，它简化了对树状结构数据的筛选。以下是 reselect-tree 的核心优点：
- 易于使用：reselect-tree 提供了一套易于使用的 API，使开发者能够快速编写筛选器函数。
- 高性能：类似于 reselect，reselect-tree 也利用了缓存机制以提高性能。
- 灵活扩展：reselect-tree 可以支持任何 JavaScript 对象或数组，这使得它非常灵活。
安装和使用
要使用 reselect-tree，我们需要先安装它：
--- ------- -------- ------------- ------
安装后，在代码中引入它们：
------ - -------------- - ---- ----------- ------ ------------------- ---- ----------------
基本用法
接下来，我们将从一个简单的示例开始。下面是我们将要筛选的树状结构数据：
----- -------- - -
----- -------
--------- -
-
----- --------
--------- -
- ----- ---------- --------- ----- --
- ----- ---------- --------- ---- -
-
--
- ----- -------- --------- ---- -
-
--我们将定义一个基本的筛选器函数。它将返回具有“hasChild === true”的所有节点。然后，我们将输出这些节点的名称。
----- -------- - ---------------
------ -- -------
------- -- -
----- ------------ - ----------------------
----- ------- - ----------------------------- ------ -- ---------------
------ ----------------------- ----- -- ----------- ----------- ----
-
--
----- ------ - -------------------
-------------------- -- --------- --------在这个例子中，我们用 treeSelectorFactory 创建了一个 treeSelector 对象，它提供了一些方法来处理树状数据。然后我们使用其 selectAll 方法来获取所有匹配的节点。最后，我们将返回的所有节点的名称收集到一个数组中。
深度定制
与 reselect 相似，reselect-tree 也可以进一步定制以满足你的需求。以下是一些常见的定制场景：
获取任意属性
通过 selectAll 方法，我们可以获取匹配节点上的任意属性。
----- -------- - ---------------
------ -- -------
------- -- -
----- ------------ - ----------------------
----- ------- - ----------------------------- ------ -- ---------------
------ ----------------------- ----- -- -
----------
-
----- ----------
--------- -------------
-
-- ----
-
--
----- ------ - -------------------
--------------------
--
-
-
------- --------
----------- ----
--
-
------- --------
----------- ----
-
-
--在这个例子中，我们使用 selectAll 来查询“hasChild === true”的节点，并返回它的名称和 hasChild 属性。
获取第一个匹配节点
如果你不需要获取所有匹配的节点，你可以使用 treeSelector.selectOne 方法来获取第一个匹配的节点。例如：
----- -------- - ---------------
------ -- -------
------- -- -
----- ------------ - ----------------------
----- ----- - ----------------------------- ------ -- ---------------
------ ------
-
--
----- ------ - -------------------
-------------------- -- - ----- -------- --------- -- ----- ---------- --------- ----- -- - ----- ---------- --------- ---- ---在这个例子中，我们使用 selectOne 查询了“hasChild === true”的第一个节点，并只返回该节点。
自定义根节点选择器
默认情况下，reselect-tree 从整棵树的根节点开始搜索。但你也可以通过传递一个自定义的根节点选择器来重写这个行为。例如：
----- -------- - ---------------
------ -- -------
------- -- -
----- ------------ - ---------------------
------------- ------- -- -----------------
---
----- ----- - ----------------------------- ------ -- ---------------
------ ------
-
--
----- ------ - -------------------
-------------------- -- - ----- -------- --------- -- ----- ---------- --------- ----- -- - ----- ---------- --------- ---- ---在这个例子中，我们传递了一个自定义的根节点选择器，它返回根节点的第一个子节点。然后我们使用 selectOne 查询了该节点和它的子树中的“hasChild === true”的第一个节点。
组合选择器函数
reselect-tree 与 reselect 一样，可以使用组合选择器函数的方式实现更复杂的筛选。以下是一个例子：
----- -------- - ---------------
------ -- -------
------- -- -
----- ------------ - ----------------------
----- -------- - ----------------------------- ------ -- ---------------
----- -------- - ------------------------------ ------ -- --------- --- ---------
------ ------------------------ ----- -- -
----------
-
----- ----------
--------- --------------
------------- ------------------- -- --------------------------------
-
-- ----
-
--
----- ------ - -------------------
--------------------
--
-
-
------- --------
----------- -----
--------------- -----
--
-
------- --------
----------- -----
--------------- -----
-
-
--在这个例子中，我们使用 treeSelector.selectRoot 方法来选择树的根节点，并获取其中所有名称为“Node1”的节点。接着，我们使用 treeSelector.selectAll 方法来查询所有具有“hasChild === true”的节点。最后，我们将这两组查询结果合并，返回每个节点的名称、hasChild 属性和它是否是 Node1 的子节点。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/72751