js树形数据处理

~~big_dragon~~

已于 2022-03-04 18:01:29 修改

阅读量627

点赞数

分类专栏： js 文章标签： react.js javascript 前端

于 2022-03-04 17:58:26 首次发布

本文链接：https://blog.csdn.net/weixin_44147791/article/details/123282346

版权

js 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何在JavaScript中处理树形数据结构。包括获取所有节点的id数组、根据id查找节点、根据属性关键字搜索节点以及使用回调函数修改树节点信息的方法。这些方法在前端开发中处理数据和构建组件时非常实用。

摘要由CSDN通过智能技术生成

原数据：

const treeData = [
  {
    id: 1,
    label: "一级 1",
    children: [
      {
        id: 4,
        label: "二级 1-1",
        children: [
          {
            id: 9,
            label: "三级 1-1-1",
          },
          {
            id: 10,
            label: "三级 1-1-2",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "一级 2",
    children: [
      {
        id: 5,
        label: "二级 2-1",
      },
      {
        id: 6,
        label: "二级 2-2",
      },
    ],
  },
  {
    id: 3,
    label: "一级 3",
    children: [
      {
        id: 7,
        label: "二级 3-1",
      },
      {
        id: 8,
        label: "二级 3-2",
      },
    ],
  },
];

需求一：获取treeData中属性id的数组集合

const getIdArr = findValueByKey(treeData, “id”);
console.log("getIdArr: ", getIdArr); //getIdArr: (10) [9, 10, 4, 1, 5, 6, 2, 7, 8, 3]

// 需求一：获取treeData中属性id的数组集合
const findValueByKey = (data, id) =>
data.reduce((preData, item) => {
let result = []
if (item?.children?.length > 0) {
result = findValueByKey(item.children, id)
}
if (item?.[id]) return [...preData, ...result, item[id]]
else return [...preData, ...result]
}, [])
console.log(findValueByKey(treeData, 'id'))

需求二：根据id获取当前id节点信息

const getNodeById = findNodeById(treeData, 8);
console.log("getNodeById: ", getNodeById); // {id: 8, label: ‘二级 3-2’}

// 需求二：根据id获取当前id节点信息
const findNodeById = (data, id) => {
  let result
  for (let item of data) {
    if (item?.id === id) return item
    if (item?.children?.length > 0) {
      result = findNodeById(item.children, id)
      if (result) return result
    }
  }
  return result
}
console.log(findNodeById(treeData, 8))

需求三：根据属性关键字获取当前深度节点信息

const searchKey = treeSearch(treeData, “1-2”, “label”);
console.log("searchKey: ", searchKey);
// [{
// id: 1,
// label: “一级 1”,
// children: [
// {
// id: 4,
// label: “二级 1-1”,
// children: [
// {
// id: 10,
// label: “三级 1-1-2”,
// },
// ],
// },
// ],
// }]

 // 需求三：根据属性关键字获取当前深度节点信息
    const treeSearch = (data, search, key) => {
      return data.reduce((preData, item) => {
        if (item?.children?.length) {
          item.children = treeSearch(item.children, search, key)
          if (item.children?.length) return [...preData, item]

          if (item?.[key].includes(search)) {
            item.children = []
            return [...preData, item]
          }
          return [...preData]
        }
        if (item?.[key].includes(search)) return [...preData, item]
        return [...preData]
      }, [])
    }
    console.log(treeSearch(treeData, '1-2', 'label'))

需求四：根据回调函数处理树结构节点信息，返回新的树形结构

// 需求四： 根据回调函数处理树结构节点信息，返回新的树形结构
const operateTreeData = (data, callback) => {
  return data.reduce((preData, item) => {
    if (item?.children?.length > 0) {
      item.children = operateTreeData(item.children, callback)
    }
    item = callback(item)
    return [...preData, item]
  }, [])
}
console.log(
  operateTreeData(treeData, node => {
    node.key = node.id
    node.value = `${node.id}`
    node.title = node.label
    node.selectable = true
    return node
  })
)