遍历树状数组

Question

我有一个看起来像树结构的数组。 它是对象的数组，其中对象具有子对象数组，而子对象还具有子对象数组。 以下是示例。 我试图在问题中使用递归，但无法获得所需的结果。

[
    {
      parentId: null,
      children: [
        {
          parentId: 267,
          children: [
            {
              parentId: 268,
              children: [
                {
                  parentId: 270,
                  children: null,
                }
              ],
            },
            {
              parentId: 268,
              children: [
                {
                  parentId: 269,
                  children: null,
                }
              ],
            }
          ],
        }
      ],
    },
   ...
   ...
  ];

我想遍历此数组，并在每个对象中都需要添加一个键和一个值。

例如：“ fa fa-open”

结果数组中的每个对象都必须具有上述键。

Answer 1

请花中的链接来看看下面的代码是递归遍历通过所有儿童开放的插入：“发发开” https://codesandbox.io/s/o4jvxloy7q

Answer 2

这种类型的问题非常适合学习相互递归。

首先，我们使用某种高阶函数f –来traverse单个node及其children node

const traverse = (f, { children = [], ...node }) =>
  f ({ ...node, children: children.map (c => traverse (f, c)) })

例如，向每个节点添加属性hello设置为'world' –

traverse
  ( node => ({ ...node, hello: 'world' })
  , { a: 1, children: [ { b: 2 } ] }
  )

// { a: 1
// , children:
//     [ { b: 2
//       , children: []
//       , hello: 'world'
//       }
//     ]
//  }

但这仅适用于单个节点。 您有一个节点数组 ，所以–

const traverseAll = (f, nodes = []) =>
  nodes.map (node => traverse (f, node))

当您回顾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))

使用一个相互递归的定义，我们编写了一个和谐对-

const traverseAll = (f, nodes = []) =>
  nodes.map (node => traverse (f, node))

const traverse = (f, { children = [], ...node }) =>
  f ({ ...node, children: traverseAll (f, children) })

在下面的浏览器中验证完整程序-

 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' // } // ] 

Answer 3

 let data = [ { parentId: 123, children: [], }, { parentId: 345, children: [], }, { parentId: 1567, children: [], }, ]; data.forEach(item => item.open = "new value") console.log(data) 

Answer 4

您可以使用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)