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示例）：文章来源：https://www.toymoban.com/news/detail-515504.html
/**
* 数据扁平化
* @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示例）：文章来源地址https://www.toymoban.com/news/detail-515504.html
/**
* 数据扁平化
* @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')
到了这里，关于js树形结构数组扁平化的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
