[英]Traverse a tree like array
I have an array that looks like a tree structure. 我有一个看起来像树结构的数组。 It's array of objects, where objects have an array of children and the children further have an array of children. 它是对象的数组,其中对象具有子对象数组,而子对象还具有子对象数组。 Below is the example. 以下是示例。 I have tried to use recursion in the problem but couldn't get the desired result. 我试图在问题中使用递归,但无法获得所需的结果。
[
{
parentId: null,
children: [
{
parentId: 267,
children: [
{
parentId: 268,
children: [
{
parentId: 270,
children: null,
}
],
},
{
parentId: 268,
children: [
{
parentId: 269,
children: null,
}
],
}
],
}
],
},
...
...
];
I would like to traverse through this array and in every object I need to add a key and a value. 我想遍历此数组,并在每个对象中都需要添加一个键和一个值。
Eg open : 'fa fa-open' 例如:“ fa fa-open”
Every Object in the resulting array must have the above key. 结果数组中的每个对象都必须具有上述键。
Please take a look at code in the link below it recursively traverses through all children and inserts open: 'fa fa-open' https://codesandbox.io/s/o4jvxloy7q 请花中的链接来看看下面的代码是递归遍历通过所有儿童开放的插入:“发发开” https://codesandbox.io/s/o4jvxloy7q
This type of problem is perfect to learn about mutual recursion. 这种类型的问题非常适合学习相互递归。
First, we make some way to traverse
a single node
and its children
using a higher-order function f
– 首先,我们使用某种高阶函数f
–来traverse
单个node
及其children
node
const traverse = (f, { children = [], ...node }) =>
f ({ ...node, children: children.map (c => traverse (f, c)) })
For example, add property hello
set to 'world'
to each node – 例如,向每个节点添加属性hello
设置为'world'
–
traverse
( node => ({ ...node, hello: 'world' })
, { a: 1, children: [ { b: 2 } ] }
)
// { a: 1
// , children:
// [ { b: 2
// , children: []
// , hello: 'world'
// }
// ]
// }
But this only works for a single node. 但这仅适用于单个节点。 You have an array of nodes, so – 您有一个节点数组 ,所以–
const traverseAll = (f, nodes = []) =>
nodes.map (node => traverse (f, node))
When you look back at traverse
, we see we repeated ourselves (in bold ) – 当您回顾traverse
,我们看到我们重复了自己(以粗体显示 )–
const traverse = (f, { children = [], ...node }) =>
f ({ ...node, children: children.map (c => traverse (f, c)) })
const traverseAll = (f, nodes = []) =>
nodes.map (node => traverse (f, node))
Using a mutually recursive definition, we write a harmonious pair – 使用一个相互递归的定义,我们编写了一个和谐对-
const traverseAll = (f, nodes = []) =>
nodes.map (node => traverse (f, node))
const traverse = (f, { children = [], ...node }) =>
f ({ ...node, children: traverseAll (f, children) })
Verify the complete program in your browser below – 在下面的浏览器中验证完整程序-
const traverseAll = (f, nodes = []) => nodes.map (node => traverse (f, node)) const traverse = (f, { children = [], ...node }) => f ({ ...node, children: traverseAll (f, children) }) const nodes = [ { id: 1 , children: [ { id: 2 , children: [] } , { id: 3 , children: [ { id: 4 , children: [] } ] } ] } , { id: 5 , children: [] } ] console.log ( traverseAll ( node => ({ ...node, open: 'fa fa-open' }) , nodes ) ) // [ { id: 1 // , children: // [ { id: 2, children: [], open: 'fa fa-open' }, // { id: 3 // , children: // [ { id: 4 // , children: [] // , open: 'fa fa-open' // } // ] // , open: 'fa fa-open' // } // ] // , open: 'fa fa-open' // } // , { id: 5 // , children: [] // , open: 'fa fa-open' // } // ]
let data = [ { parentId: 123, children: [], }, { parentId: 345, children: [], }, { parentId: 1567, children: [], }, ]; data.forEach(item => item.open = "new value") console.log(data)
You can create recursive function with forEach
loop that takes data and an object and assigns that object to each object in your data. 您可以使用forEach
循环创建递归函数,该循环获取数据和一个对象,并将该对象分配给数据中的每个对象。
const data = [{"parentId":null,"children":[{"parentId":267,"children":[{"parentId":268,"children":[{"parentId":270,"children":null}]},{"parentId":268,"children":[{"parentId":269,"children":null}]}]}]}] function add(data, obj) { data.forEach(e => { Object.assign(e, obj); if (e.children) add(e.children, obj) }) } add(data, {open: 'fa fa-open'}) console.log(data)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.