typescript将简单对象数组转换成父子结构（具有children属性）的对象

最新推荐文章于 2025-06-08 09:18:55 发布

原创最新推荐文章于 2025-06-08 09:18:55 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #antd #es6

antd 同时被 3 个专栏收录

7 篇文章

订阅专栏

typescript

6 篇文章

订阅专栏

es6

1 篇文章

订阅专栏

本文介绍如何利用TypeScript将简单的对象数组转换成适用于antd Tree组件的具有children属性的父子结构对象。详细展示了转换函数及其应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转换效果

initDat=[
  {
    title: '节点1',
    pkey: '-1',
    key: '2'，
  },
  {
    title: '节点2',
    pkey: '2',
    key: 'test1',
  },
  {
    title: '节点3',
    pkey: '2',
    key: 'test2',
  }
]
转换为：
data=[
  {
    title: '节点1',
    pkey: '-1',
    key: '2'，
    children: [
      {
        title: '节点2',
        pkey: '2',
        key: 'test1',
      },
      {
        title: '节点3',
        pkey: '2',
        key: 'test2',
      }
    ]
  }
]

使用情况

antd的Tree组件

处理函数

    /**
    * @param data 简单对象数组
    */
   createTreeData(data) {
    this.treeData = [] 
    if (data.length > 0) {
      for (const n of data) {
        if (n.pkey === '-1') {
          const obj = {
            title: n.title,
            pkey: n.pkey,
            key: n.key,
          }
          this.treeData.push( obj )
        }
      }
      this.run(data, this.treeData)  
    } else {
      console.log('遍历对象不是一个数组或为一个空数组')
    }     
    return this.treeData
  }

  /**
   * 递归方法 找chiArr的所有子节点
   * @param resData 
   * @param chiArr 
   */
  run(resData, chiArr) {
    if (resData.length !== 0) {                     
      if (chiArr) {            
          for (const value2 of resData) {
            if (value.key === value2.pkey) {
              const obj = {
                title: value2.title,
                pkey: value2.pkey,
                key: value2.key,
              }
              /*如果该节点没有children节点则创建一个，再添加数据，
              如果有就直接添加数据*/
              if (!value.children) {
                value.children = []
              }
              value.children.push(obj)
            }
          }
          this.run(resData, value.children)
        }
      }
    }
  }
  /**
   * 生成资源目录UI效果
   */
  renderTreeNodes = (data) => {
    return data.map((item) => {
      if (item.children) {
        return (
          // dataRef={item}
          <TreeNode title={item.title} key={item.key} >
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        )
      }
      return <TreeNode title={item.title} key={item.key} />
    })
  }

其他方法记录

  /**
   * 删除数组中指定值的元素
   * @param arr 数组
   * @param val 要删除的值
   */
  deleteArrayItemByValue = (arr, val) => {
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] === val) {
        arr.splice(i, 1)
        break
      }
    }
  }