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.childrenfor (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 } = itemif (children && children.length) {res = res.concat(treeToArray(children))}res.push(i)}return res}console.log(treeToArray(newData),'数据扁平化4')
