前言
在 Web 前端开发过程中，我们经常需要从一组 JSON 数据中筛选出自己需要的那些部分并进行进一步的处理。使用纯 JavaScript 代码实现这个目标，可能会让代码变得十分复杂和臃肿。因此，我们需要一个轻量的解析库来帮助我们实现这个目标——jsonpath-parser 就是这样的一个好工具。本文将简单介绍 jsonpath-parser 的使用。
安装和引入
在项目中使用 npm 安装 jsonpath-parser：
npm i jsonpath-parser
在项目中引入 jsonpath-parser 模块:
import jp from 'jsonpath-parser';
API
jsonpath-parser 只提供了一个重要的方法：
jp.parse(path)
将 JSON Path 表达式解析成语法树，并返回它。下面是传递给parse方法的一些语法规则：
| 语法规则 | 描述 |
|---|---|
$ |
根元素,表示json解析起点 |
. |
引用: 该表达式下一级的成员 |
.. |
深度优先遍历: 该表达式下所有的成员、属性 |
* |
通配符: 匹配该表达式下所有成员 |
[<子表达式>] |
数组形式: 匹配子表达式结果 |
[start:end:step] or [start:end] |
数组形式: 匹配数组中的片段 |
?() |
过滤器: 根据返回 bool 类型的指定过滤表达式来筛选节点,使用方式,比如?(@.id==10). |
下面是一个演示用例：
-- -------------------- ---- -------
-- ---- ---------
--- ---- - -
------ -
----- -
- --------- ------------ ------- ------ ------ ------ -------- -- --- --------- ------ ---- --
---
-
-
-
-- -----
--- -------------- - --------------
-- ------
--- ------- - -------------- ----------------------------
-------------------- -- ------- -- --- -------
-- --------
--- --------- - -------------- --------------------------
---------------------- -- ----------- ------------ ------- ------ ------ ------ -------- -- --- --------- ------ ----------与 React 结合使用
在 React 项目中经常需要从 Ajax 后端获取 JSON 数据并渲染到 UI 界面上。jsonpath-parser 可以方便地解析这些 JSON 数据:
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -- ---- ------------------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
----- --
--
-
------------------- -
---------------------------
-------------- -- ----------------
-------------- -- -
-- -------------
----- ---- - ------------------ -------------------- -- -
------ - -------- -------- ---- ------ --
---
---------------
----
---
---
-
-------- -
------ -
----
--------------------------- ------ -- -
--- ------------
------------ ------------- --------------
-----
---
-----
--
-
-总结
本文简要介绍了 jsonpath-parser 的功能和使用方法。jsonpath-parser 是一款优秀的 JSON 路径解析类库，可以避免在前端代码中使用较冗长的 JavaScript 代码进行 JSON 数据处理。在 React 等前端框架中，jsonpath-parser 尤其有用，可以方便地解析从 Ajax 后端返回的 JSON 数据。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3681e8991b448daf67