JavaScript樹形數(shù)據(jù)結構處理

更新時間：2022年07月25日 09:09:42 作者：卡布奇諾y

這篇文章主要介紹了JavaScript樹形數(shù)據(jù)結構處理，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的朋友可以參考一下

樹形數(shù)據(jù)的一些相關處理方法

// 用于測試的樹形數(shù)據(jù)
const treeData = [
  {
    id: '1',
    name: '測試1',
    pId: '0',
    children: [
      {
        id: '11',
        name: '測試11',
        pId: '1',
        children: [
          {
            id: '111',
            name: '測試111',
            pId: '11',
            children: [
              {
                id: '1111',
                name: '測試1111',
                pId: '111',
              },
              {
                id: '1112',
                name: '測試1112',
                pId: '111',
              }
            ]
          },
          {
            id: '112',
            name: '測試112',
            pId: '11',
            children: [
              {
                id: '1121',
                name: '測試1121',
                pId: '112',
              }
            ]
          },
          {
            id: '113',
            name: '測試113',
            pId: '11',
          },
        ]
      },
      {
        id: '12',
        name: '測試12',
        pId: '1',
        children: [
          {
            id: '121',
            name: '測試121',
            pId: '12',
          }
        ]
      },
      {
        id: '13',
        name: '測試13',
        pId: '1'
      },
      {
        id: '14',
        name: '測試14',
        pId: '1'
      }
    ]
  },
  {
    id: '2',
    name: '測試2',
    pId: '0',
    children: [
      {
        id: '21',
        name: '測試21',
        pId: '2',
        children: [
          {
            id: '211',
            name: '測試211',
            pId: '21',
          },
          {
            id: '212',
            name: '測試212',
            pId: '21',
          }
        ]
      },
      {
        id: '22',
        name: '測試22',
        pId: '2'
      },
    ]
  }
]

1. 遞歸查找當前節(jié)點

function findRecursion (data, key, callback) {
  data.forEach((item, index, arr) => {
    if (item.id === key) {
      return callback(item, index, arr)
    }
    if (item.children) {
      return findRecursion(item.children, key, callback)
    }
  })
}
// 查找 測試1112(1112)
findRecursion(treeData, '1112', (item, index, arr) => {
  console.log('1. 遞歸查找當前節(jié)點:', item, index, arr)
})

2. 遞歸獲取當前節(jié)點及以下的所有節(jié)點id

function getChildId (data, idArr) {
  data.forEach(item => {
    if (item.id) {
      idArr.push(item.id)
    }
    if (item.children) {
      getChildId(item.children, idArr)
    }
  })
  return idArr
}
// 獲取 treeData此樹以下的所有節(jié)點id
const idArr = getChildId(treeData, [])
console.log('2. 獲取當前節(jié)點及以下的所有節(jié)點id', idArr)

3. 遞歸判斷所有后代節(jié)點中有無此節(jié)點中的一個

function judgeChildrenHad (data, keys) {
  let mark = false
  for (let i = 0; i < data.length; i++) {
    if (keys.includes(data[i].id)) {
      mark = true
    } else if (data[i].children?.length) {
      return judgeChildrenHad(data[i].children, keys)
    }
  }
  return mark
}
// 判斷 測試111(111)后代節(jié)點中有無 測試1112(1112)節(jié)點
const mark1 = judgeChildrenHad(treeData, ['1112'])
console.log('3. mark1', mark1)
// 判斷 測試111(111)后代節(jié)點中有無 測試1121(1121)節(jié)點
const mark2 = judgeChildrenHad(treeData, ['1121'])
console.log('3. mark2', mark2)

4. 遞歸樹形數(shù)據(jù)扁平化

function treeToFlat (data) {
  const result = []
  data.forEach(item => {
    const obj = {
      name: item.name,
      id: item.id,
      pId: item.pId
    }
    result.push(obj)
    if (item.children?.length) {
      // console.log('------', item.name, treeToFlat(item.children, item.id))
      result.push(...treeToFlat(item.children, item.id))
    }
  })
  return result
}
const res1 = treeToFlat(treeData)
console.log('4. 樹形數(shù)據(jù)扁平化', res1)

5. 扁平化數(shù)據(jù)轉樹形數(shù)據(jù)結構

function flatToTree (data) {
  const result = []
  const itemMap = {}
  for (const item of data) {
    const id = item.id
    const pId = item.pId

    if (itemMap[id]) {
      itemMap[id] = {
        ...itemMap[id],
        ...item
      }
    } else {
      itemMap[id] = { ...item }
    }

    const treeItem = itemMap[id]

    if (!pId || pId === '0') {
      result.push(treeItem)
    } else {
      if (!itemMap[pId]) {
        itemMap[pId] = {
          children: []
        }
      }
      if (!itemMap[pId].children) {
        itemMap[pId].children = []
      }
      itemMap[pId].children.push(treeItem)
    }
  }
  return result
}
const r = JSON.parse(JSON.stringify(res1))
r.unshift({
  id: '999',
  name: 'yyyyy',
  pId: '1'
})
const res2 = flatToTree(r)
console.log('5. 扁平化數(shù)據(jù)轉樹形數(shù)據(jù)結構', res2)