树形结构数据的处理——JsonPath在前端的使用

      先来看一下我的数据结构，每个数据都可能存在children属性，每个children属性中都可能有一个或多个对象。要求找出所有的id，并进行相应的操作。

let data = {
    name:'grandparents',
    children:[{
        id:0,
        name:'parents',
        children:[{
            id:1,
            name:'son',
            sex:'male',
            children:[]
        },{
            id:2,
            name:'daughter',
            sex:'female',
            children:[]
        }]
    },{
        id:3,
        name:'aunt',
        children:[]
    }]
}

      之前一直使用的方式都是递归遍历，以获取全部的id。最近了解到了JSONPath的存在，让我心情很激动。这么好用的工具，我竟然现在才知道，必须推荐给大家。官方文档在此

      使用方法并不难，但文档是英文的，所以在这里总结一下。

1、安装

npm install JSONPath

2、引入

//In node.js:
var JSONPath = require('JSONPath');
// or
import JSONPath from 'JSONPath';

//For browser usage 
<script src="lib/jsonpath.js"></script>

3、使用

JSONPath({
    json: obj, //需要处理的json数据，必需
    path: path, //路径表达式，可以理解为处理数据的规则，可以是字符串或数字，必需
    callback: callback
});
// or
JSONPath(options, path, obj, callback, otherTypeCallback);

4、实例——以上述data为例

// 数据中全部的id
const idArr = this.JSONPath({
    json:data,
    path:'$..aliasId'
})
console.log(idArr);    //[0,1,2,3]

// 过滤数据中，所有具有sex属性的对象
const objArr = this.JSONPath({
    json:data,
    path:'$..children[?(@.sex)]'
})
console.log(objArr);    
//[{
//     id:1,
//     name:'son',
//     sex:'male',
//     children:[]
//},{
//     id:2,
//     name:'daughter',
//     sex:'female',
//     children:[]
//}]

5、path操作符