在前端开发中，我们常常需要读取本地的 JSON 文件，并对其进行处理。在使用传统的方法进行文件读取时，我们需要手动处理回调函数或Promise等异步操作，而且代码也很容易变得冗长和复杂。为了方便开发者读取 JSON 文件并处理数据，npm 社区诞生了 promise-json-file-reader 这个npm包。本文将介绍 promise-json-file-reader 的基本用法、特性，并附上代码示例。
promise-json-file-reader 的特性
promise-json-file-reader 是一个专门用于读取本地 JSON 文件的 npm 包，它有以下几个特性：
- 支持读取本地的 JSON 文件；
- 基于 Promise API，无需处理回调函数；
- 提供可选的过滤器函数，可以对数据进行过滤；
- 支持多种数据类型的输出。
安装和导入 promise-json-file-reader
在使用 npm 包前，我们需要先安装它。打开终端，输入以下命令：
npm install promise-json-file-reader --save
安装完成后，我们可以在项目中导入它：
const jsonReader = require("promise-json-file-reader");jsonReader 的用法
接下来，我们看看 jsonReader 的具体用法。
读取本地 JSON 文件
假设我们有一个名为 sample.json 的本地 JSON 文件，我们想要读取它并将数据输出到控制台上。我们可以使用以下代码：
jsonReader("./sample.json")
.then((data) => {
console.log(data);
})
.catch((error) => {
console.log(error);
});这里的 jsonReader 函数接受一个文件路径作为参数。在本例中，我们使用了相对路径，但也可以使用绝对路径。当函数执行成功后，它会返回一个 Promise 对象。我们可以使用 then() 方法来处理 JSON 数据，并将其输出到控制台上。如果函数执行失败，则会抛出一个错误对象。我们可以使用 catch() 方法来捕捉该错误对象，并输出错误信息。
过滤数据
有时，我们需要对读取到的数据进行过滤，以满足特定需求。为此，我们可以在调用 jsonReader 函数时传入一个可选的过滤函数。过滤函数接受读取到的数据作为参数，并返回经过处理后的数据。例如：
-- -------------------- ---- -------
----- ------ - ------ -- -
------ ------------------ -- -
------ -------- - ---
---
--
--------------------------- -------
------------ -- -
------------------
--
-------------- -- -
-------------------
---在这个例子中，我们定义了一个 filter 函数，该函数筛选出 age 大于 18 的数据。我们把过滤函数作为第二个参数传入 jsonReader 函数中，从而实现了对数据的过滤。
输出其他数据类型
默认情况下，jsonReader 函数会将读取到的 JSON 数据解析为 JavaScript 对象。但是，我们也可以将数据解析为其他形式的数据类型，如字符串或者数组。为此，我们只需要在调用 jsonReader 函数时传入解析类型即可。例如：
jsonReader("./sample.json", null, "array")
.then((data) => {
console.log(data);
})
.catch((error) => {
console.log(error);
});在这个例子中，我们将解析类型指定为数组。当执行成功时，jsonReader 函数会返回一个 JavaScript 数组，而不是默认的 JavaScript 对象。
示例代码
下面是一个完整的使用 promise-json-file-reader 的示例代码：
-- -------------------- ---- -------
----- ---------- - ------------------------------------
-- ---- ---- --
---------------------------
------------ -- -
------------------
--
-------------- -- -
-------------------
---
-- ----
----- ------ - ------ -- -
------ ------------------ -- -
------ -------- - ---
---
--
--------------------------- -------
------------ -- -
------------------
--
-------------- -- -
-------------------
---
-- ----
--------------------------- ----- --------
------------ -- -
------------------
--
-------------- -- -
-------------------
---结束语
promise-json-file-reader 是一个方便的 npm 包，它可以帮助我们在前端开发中快速读取本地 JSON 文件，并对数据进行处理。本文介绍了该npm包的基本用法和特性，并提供了示例代码。希望读者能够掌握如何使用该npm包，并在实际开发中使用它来提升开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cbd81e8991b448e6318