在前端开发过程中，经常需要处理嵌套复杂的数据结构。entman-denormalizr 是一个实用的 npm 包，用于将嵌套结构的数据 flatten（扁平化）并进行规范化，方便管理、使用以及展示。
该包的核心是 denormalize 函数，用法如下：
-- -------------------- ---- -------
------ - ----------- - ---- --------------------
----- -------------- - -
------ -
-- -
--- --
----- ----- -----
------ --- ---
--
-- -
--- --
----- ----- -------
------ ---
--
--
------ -
-- -
--- --
------- --
------ --- ----- ------
--------- ----
--
-- -
--- --
------- --
------ --- ------ ------
--------- ---
--
--
--------- -
-- -
--- --
------- --
----- ------ -------
--
--
-
----- ---------------- - --------------------------- --------
-----------------------------输出：
-- -------------------- ---- -------
-
-
----- --
------- ----- -----
-------- -
-
----- --
-------- --- ----- ------
--------- -
----- --
------- ----- ----
--
----------- -
-
----- --
------- ------ -------
--------- -
----- --
------- ----- ------
-
-
-
--
-
----- --
-------- --- ------ ------
--------- -
----- --
------- ----- ----
--
----------- --
-
-
--
-
----- --
------- ----- -------
-------- --
-
-从使用效果可以看到，原本嵌套复杂的数据结构被转换为了扁平的层级结构，读者也许会觉得很神奇，但事实上是个基本的数据转换过程，其中也蕴藏着一些微妙的计算过程，例如对象引用、循环引用、对象更新等一些处理。
接下来，我们将详细介绍如何使用 entman-denormalizr 包，并结合示例代码进行说明和演示。
使用场景
首先，我们来看一下 entman-denormalizr 包适用的场景。如果你有以下情况，可以尝试使用本包：
- 后端返回的数据格式结构嵌套，让你难以处理、阅读和使用。
- 多条数据之间有引用关系（如同一用户的多篇文章），但是这些关系没有直接反映在每条数据中，使用起来不方便。
- 想要快速地查询某个特定属性（比如按用户 id 进行查询），但是因为嵌套结构太复杂，查询效率受到影响。
针对以上问题，在 entman-denormalizr 中，我们提供了以下两个核心函数：
- normalize：用于把一个扁平化结构的对象（包括数组）转换为一个带关系的嵌套结构，并且每个数据项都有一个唯一的 id。
- denormalize：用于把一个带有关系的嵌套结构转换为扁平化结构，并根据 id 建立小的对象关系。
其中，normalize 可以理解为把后端数据转换为前端更容易使用的结构，而 denormalize 则是把前端使用的结构转换为方便传输的结构。两者均需要注意数据关系的嵌套、索引和更新等问题。
使用步骤
下面我们来介绍一下如何使用 entman-denormalizr 包实现数据的扁平化与规范化。
步骤一：安装依赖
npm install entman-denormalizr --save
步骤二：定义数据结构
首先我们需要定义原始数据结构，从而方便我们在 denormalize 函数中使用。我们以只有一篇文章、一条评论和一个用户的数据为例：
-- -------------------- ---- -------
----- ------ - -
--- ---------
----- ----- -----
-
----- ---- - -
--- ---------
------ --- ----- ------
----- ----- -- -- ----- -------
------- ---------
--------- --------------
-
----- ------- - -
--- ------------
------- ---------
----- ------ -------
-
----- ---- - -
-------- -
------------ -------
--
------ -
---------- -----
--
--------- -
------------- --------
--
-其中，我们把 author、post 和 comment 分别放在一个对象中，并用唯一的 id 标识，从而方便后续的处理。
步骤三：扁平化数据
接下来，我们可以使用 normalize 函数把数据扁平化：
import { normalize } from "entman-denormalizr"
const normalizedData = normalize(data, {
authors: true,
posts: true,
comments: true,
})这里 normalize 函数将 data 数据按照 author、post 和 comment 进行划分，并通过递归方式扁平化每个数据项的属性关系，最终把所有子属性都添加到 normalizedData 对象中，如下所示：
-- -------------------- ---- -------
-
--------- -
-------- -
--------- -
--- ---------
----- ----- -----
--
--
------ -
--------- -
--- ---------
------ --- ----- ------
----- ----- -- -- ----- -------
------- ---------
--------- --------------
--
--
--------- -
------------ -
--- ------------
------- ---------
----- ------ -------
--
--
--
------- -----------
-其中，normalizedData.entities 中包含了每个实体的所有属性值，normalizedData.result 中包含了每个实体的唯一 id。
步骤四：规范化数据
使用 normalize 函数得到 normalizedData 后，我们可以把该数据规范化（denormalize）为一个我们熟悉的 JavaScript 对象，方便我们在前端展示或使用。我们以 denormalize 带两个参数的用法（entities 和 result）为例：
import { denormalize } from "entman-denormalizr"
const denormalizedData = denormalize(normalizedData.entities, normalizedData.result, {
authors: true,
posts: true,
comments: true,
})通过 denormalize 函数，我们得到了 denormalizedData 数据（就是 normalize 前的 data），如下所示：
-- -------------------- ---- -------
-
-------- -
--------- -
--- ---------
----- ----- -----
--
--
------ -
--------- -
--- ---------
------ --- ----- ------
----- ----- -- -- ----- -------
------- -
--- ---------
----- ----- -----
--
--------- -
-
--- ------------
------- -
--- ---------
----- ----------
--
----- ------ -------
--
--
--
--
--------- -
------------ -
--- ------------
------- -
--- ---------
----- ----------
--
----- ------ -------
--
--
-可以看到，我们得到了原始的数据结构，其中引用关系已被展开，但是由于缺乏 author 的 name 属性，因此未能展示完整数据。当然，在日常开发中，我们很少会出现基本属性没有被 denormalize 的情况，这是由于 normalizedData 建立在源数据之上的过程中，实体对象已经获得了完整的属性，所以在 denormalize 的过程中，完整数据也将被建立起来。
步骤五：使用结果数据
最后，我们可以在前端代码中使用 denormalizedData 数据结构，进行展示和数据处理操作。
console.log(denormalizedData.posts["post-1"].author.name) // John Doe console.log(denormalizedData.comments["comment-1"].author.name) // undefined
总结
本文介绍了 npm 包 entman-denormalizr 的使用方式，通过 normalize 和 denormalize 两个函数分别实现了数据结构的扁平化和规范化。扁平化的数据易于传输、索引和查询，规范化的数据易于展示和使用。通过本文的介绍和示例，读者可以更好地理解 entman-denormalizr 的工作原理，掌握如何使用该包解决前端数据结构处理中遇到的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d0927023822626