遍歷樹狀數組

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)