js树形结构数组扁平化

js树形结构数组扁平化 1. 树形结构 ---- > 扁平化数据

一、树形结构 ---- > 扁平化数据 （数据）

const newData: any =[{"id":"1","pId": null,"title":"长期","ywid": true,"children":[{"id":"3","pId":"2","title":"短期","children":[],"origin": null,"parentId":"2","projectId":"1BD75301A441F0419098AEFA0129A9B4","state":"0","name":"长贷","financeType": null,"shareholderName":"魅力公司","shareholderType":"0","ownershipRatio": null,"expectedTotalAmount":1000,"planTotalAmount":900,"remark":"备注","isAllowDel":"0","orderNo":"1.1","value":"3","key":"3","pid":"2","isLeaf": false
                },{"id":"4","pId":"2","title":"短期","children":[],"origin": null,"parentId":"2","projectId":"1BD75301A441F0419098AEFA0129A9B4","state":"0","name":"短期","financeType": null,"shareholderName":"魅力公司","shareholderType":"0","ownershipRatio": null,"expectedTotalAmount":1000,"planTotalAmount":900,"remark":"备注","isAllowDel":"0","orderNo":"1.2","value":"4","key":"4","pid":"2","isLeaf": false
                }],"origin": null,"parentId": null,"projectId":"1BD75301A441F0419098AEFA0129A9B4","state":"0","name":"金期","financeType": null,"shareholderName":"魅力公司","shareholderType":"0","ownershipRatio": null,"expectedTotalAmount":1000,"planTotalAmount":900,"remark":"备注","isAllowDel":"0","orderNo":"1","value":"1","key":"1","pid": null,"isLeaf": true,},{"id":"2","pId": null,"title":"国金","ywid": true,"children":[{"id":"3","pId":"2","title":"长期","children":[],"origin": null,"parentId":"2","projectId":"1BD75301A441F0419098AEFA0129A9B4","state":"0","name":"长期","financeType": null,"shareholderName":"魅力公司","shareholderType":"0","ownershipRatio": null,"expectedTotalAmount":1000,"planTotalAmount":900,"remark":"备注","isAllowDel":"0","orderNo":"2.1","value":"3","key":"3","pid":"2","isLeaf": false
                },{"id":"4","pId":"2","title":"短期","children":[],"origin": null,"parentId":"2","projectId":"1BD75301A441F0419098AEFA0129A9B4","state":"0","name":"短期","financeType": null,"shareholderName":"魅力公司","shareholderType":"0","ownershipRatio": null,"expectedTotalAmount":1000,"planTotalAmount":900,"remark":"备注","isAllowDel":"0","orderNo":"2.2","value":"4","key":"4","pid":"2","isLeaf": false
                }],"origin": null,"parentId": null,"projectId":"1BD75301A441F0419098AEFA0129A9B4","state":"0","name":"国金","financeType": null,"shareholderName":"魅力公司","shareholderType":"0","ownershipRatio": null,"expectedTotalAmount":1000,"planTotalAmount":900,"remark":"备注","isAllowDel":"0","orderNo":"2","value":"2","key":"2","pid": null,"isLeaf": false
        },{"id":"5","pId": null,"title":"利用金","ywid": true,"children":[{"id":"3","pId":"2","title":"长期","children":[],"origin": null,"parentId":"2","projectId":"1BD75301A441F0419098AEFA0129A9B4","state":"0","name":"长期","financeType": null,"shareholderName":"魅力公司","shareholderType":"0","ownershipRatio": null,"expectedTotalAmount":1000,"planTotalAmount":900,"remark":"备注","isAllowDel":"0","orderNo":"2.1","value":"3","key":"3","pid":"2","isLeaf": false
                }],"origin": null,"parentId": null,"projectId":"1BD75301A441F0419098AEFA0129A9B4","state":"0","name":"利用金","financeType": null,"shareholderName":"魅力公司","shareholderType":"0","ownershipRatio": null,"expectedTotalAmount":1000,"planTotalAmount":900,"remark":"备注","isAllowDel":"0","orderNo":"3","value":"5","key":"5","pid": null,"isLeaf": true
        },{"id":"6","pId": null,"title":"其他金","ywid": true,"children":[],"origin": null,"parentId": null,"projectId":"1BD75301A441F0419098AEFA0129A9B4","state":"0","name":"其他金","financeType": null,"shareholderName":"魅力公司","shareholderType":"0","ownershipRatio": null,"expectedTotalAmount":1000,"planTotalAmount":900,"remark":"备注","isAllowDel":"0","orderNo":"4","value":"6","key":"6","pid": null,"isLeaf": true
        }]

二、代码如下

1.引入库

1.代码如下（数据扁平化1示例）：

/**
 * 获取当前节点的所有父节点
 * @param list 
 * @param current 
 * @returns 
 */const findParentId =(list, current)=>{const res:string[]=[];
    function find(list, id){
        list.forEach(item =>{if(item.key === id){
                res.unshift(id)if(item.parentId){find(list, item.parentId)}}});}find(list, current)return res
}/**
 * 数据扁平化
 * @param list 
 * @returns 
 */const flatTreeData =(list)=>{const res: any =[]
        function getData(list){
            list.forEach(item =>{
                res.push(item);if(item.children){getData(item.children)}})}getData(list)return res
    }const a =flatTreeData(newData)
    console.log(a,"数据扁平化1")/**
 * 将选中节点的父节点合并到选中节点中去
 * @param list 
 * @param selected 
 * @returns 
 */const handleSelectedData =(list, selected)=>{const res:any[]=[]const data=flatTreeData(list)
    selected.forEach(id=>{const items =findParentId(data,id)
       
        res.push(...items)})return Array.from(new Set(res))}

2.代码如下（数据扁平化2示例）：

/**
 * 数据扁平化
 * @param source 
 * @returns 
 */const fn =(source)=>{
        let res:any =[]
        source.forEach(el=>{
            res.push(el)
            el.children && res.push(...fn(el.children))})return res
    }
    console.log(fn(newData),"数据扁平化2")

3.代码如下（数据扁平化3示例）：

/**
 * 数据扁平化
 * @param arr 
 * @returns 
 *///用栈实现(非递归)
    function flapvalue(arr){
        let stack: any =[]
        let newArr: any =[]// 扁平结构的数组for(let i = arr.length -1; i >=0; i--){// 倒序遍历数组，push到栈中
            stack.push(arr[i])}while(stack.length){
            let item = stack.pop()
            newArr.push(item)if(item.children){
                let children = item.children
                for(let i = children.length -1; i >=0; i--){
                    stack.push(children[i])}}}return newArr
    }
    console.log(flapvalue(newData),'数据扁平化3')

4.代码如下（数据扁平化4示例）：

/**
 * 数据扁平化
 * @param tree
 * @returns 
 */
    function treeToArray(tree){
        var res:any =[]for(const item of tree){const{ children,...i }= item
          if(children && children.length){
            res = res.concat(treeToArray(children))}
          res.push(i)}return res
      }
      console.log(treeToArray(newData),'数据扁平化4')