json-normalize 是一款非常便捷的 npm 包，它可以将 JSON 数据转换成扁平的数据结构，方便前端开发中的数据处理。本文将详细介绍如何使用 json-normalize 打造出定制化的数据规范化工具。
安装与引入
我们可以通过 npm 命令安装 json-normalize。在项目根目录下，运行以下指令：
npm install json-normalize --save-dev
在需要使用的文件中引入：
const jsonNormalize = require('json-normalize');使用方式
简单使用
json-normalize 的使用非常简单，我们可以直接传入需要规范化的 JSON 数据，然后调用 jsonNormalize() 方法：
-- -------------------- ---- -------
----- ------ - -
--- --
----- ----- -----
-------- -
--------- ----------
----- ----------
------- ---- ----- -----
--
------- -------------- ------ --------
--
----- ------------- - ----------------------
---------------------------输出结果：
-- -------------------- ---- ------- - ----- -- ------- ----- ----- ------------------- ---------- --------------- ---------- ----------------- ---- ----- ----- ------------ ------------- ------------ ------ ------------ ------ -
可选参数
json-normalize 还提供了一些可选参数，可以让我们更加灵活地配置规范化的结果。
separator（默认值：.）
我们可以指定分隔符来分割属性之间的层级关系。例如，我们可以将 . 改为 -：
-- -------------------- ---- -------
----- ------ - -
--- --
----- ----- -----
-------- -
--------- ----------
----- ----------
------- ---- ----- -----
--
------- -------------- ------ --------
--
----- ------- - -
---------- ----
--
----- ------------- - --------------------- ---------
---------------------------输出结果：
-- -------------------- ---- ------- - ----- -- ------- ----- ----- ------------------- ---------- --------------- ---------- ----------------- ---- ----- ----- ------------ ------------- ------------ ------ ------------ ------ -
mergeArrays（默认值：true）
当我们规范化的对象中存在数组类型的属性时，默认情况下，数组的每个元素都会转换成一个独立的属性。如果开启 mergeArrays 参数，将会将数组合并成一个特殊属性名的数组：
-- -------------------- ---- ------- ----- ------ - - --- -- ----- ----- ----- ------- -------------- ------ -------- -- ----- ------- - - ------------ ----- -- ----- ------------- - --------------------- --------- ---------------------------
输出结果：
{
"id": 1,
"name": "John Doe",
"skills": ["JavaScript", "CSS", "HTML"]
}transform
通过指定 transform 函数，我们可以在规范化之前对原始数据进行转换和处理（例如：删除不需要的属性、计算衍生的属性、将属性名称转换成小写等等）：
-- -------------------- ---- -------
----- ------ - -
--- --
---------- -------
--------- ------
--
----- ------- - -
---------- ------ -- -
------ --------------- -- -- --------- --
------------- - ------------------ ------------------- -- -- -------- --
------ -------------- -- -- -------- --
------ -----
--
--
----- ------------- - --------------------- ---------
---------------------------输出结果：
{
"id": 1,
"fullName": "Doe, John"
}总结
json-normalize 在前端开发中有很广泛的应用，它让我们可以将复杂的 JSON 数据结构转换成扁平的数据结构，大大方便了数据的处理。通过本文介绍的使用方式和可选参数，我们可以自定义规范化的结果，为自己的开发提供更快更便捷的数据操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005525881e8991b448cfde3