js 树形结构根据id获取父级节点元素

封装函数

// 传入 id、树形结构数据
export function getParentTree(id, tree) {
  let arr = [] //要返回的数组
  for (let i = 0; i < tree.length; i++) {
    let item = tree[i]
    arr = []
    arr.push(item) //保存当前节点id
    if (id== item.id) {
      //判断当前id是否是默认id
      return arr //是则退出循环、返回数据
    } else {
      //否则进入下面判断,判断当前节点是否有子节点数据
      if (item.children && item.children.length > 0) {
        //合并子节点返回的数据
        arr = arr.concat(getParentTree(id, item.children ? item.children : []))
        console.log(arr)
        if (arr.map(item2 => (item2 ? item2.id : '')).includes(id)) {
          //如果当前数据中已包含默认节点,则退出循环、返回数据
          return arr
        }
      }
    }
  }

调用函数

const treeData = [{
  name: '1',
  id: 1,
  children: [{
    name: '1-1',
    id: 2,
    children: [{
      name: '1-1-1',
      id: 4,
    }],
    name: '1-2',
    id: 3,
    children: [{
      name: '1-2-1',
      id: 5,
    }],
  }]
},{
  name: '2',
  id: 6,
  children: [{
    name: '2-1',
    id: 7,
    children: [{
      name: '2-1-1',
      id: 9,
    }],
    name: '2-2',
    id: 8,
    children: [{
      name: '2-2-1',
      id: 10,
    }],
  }]
}]
console.log(getParentTree(5, treeData))

原文链接:https://www.cnblogs.com/zhanlibiao/p/17388752.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js 树形结构根据id获取父级节点元素 - Python技术站

(0)
上一篇 2023年5月11日
下一篇 2023年5月17日

相关文章

  • javascript正则表达式和字符串RegExp and String(一)

    下面是关于“javascript正则表达式和字符串RegExp and String(一)”的完整攻略: 简介 JavaScript 正则表达式是匹配模式,它们可用于搜索字符串中的特定模式,从而帮助我们实现强大的文本匹配和处理功能。RegExp 和 String 对象是 JavaScript 中正则表达式常用的操作对象。String 对象提供了一些常用的方法…

    JavaScript 2023年5月28日
    00
  • window.location.href中url中数据量太大时的解决方法

    当使用JavaScript中的window.location.href属性在URL中传递大量数据时,可能会超出浏览器限制的URL长度限制。这可能导致数据丢失或URL截断,无法完全传递所需的数据。为解决这个问题,我们可以考虑以下两种方法: 方法一:使用POST请求 将数据通过POST请求发送给服务器,而不是将其作为URL参数附加到网址中。这样可以避免浏览器UR…

    JavaScript 2023年6月10日
    00
  • 深入解析JavaScript中函数的Currying柯里化

    深入解析JavaScript中函数的Currying柯里化 什么是Currying柯里化 Currying柯里化是一种将接收多个参数的函数转变为接收一个单一参数(最初函数的第一个参数)并且返回接收余下参数并返回结果的新函数的技术。 这种技术被称为“柯里化”,要归功于Haskell Curry,这位对逻辑学及其应用的研究尤为显著的人物。可以借助柯里化,编写出具…

    JavaScript 2023年5月27日
    00
  • JavaScript解析任意形式的json树型结构展示

    为了解析任意形式的JSON树型结构,我们可以使用递归函数来实现。这里提供以下步骤: 获取JSON数据,并将其转换为JavaScript对象。 建立一个树形结构,通常使用ul和li元素,表示根节点和子节点。 创建递归函数。该函数将遍历树的节点,找到每个节点的子节点,并将它们添加到相应的父节点下。 以下是一个简单的示例: 假设我们有以下JSON数据: { &qu…

    JavaScript 2023年5月27日
    00
  • JS按钮连击和接口调用频率限制防止客户爆仓

    JS按钮连击和接口调用频率限制防止客户爆仓是前端开发中非常重要的两个问题,此处进行详细讲解。 JS按钮连击 在网页中,用户经常会通过点击按钮等界面元素执行某些操作。如果用户在短时间内多次连续点击同一个按钮,就会引发“按钮连击”问题。如何避免JS按钮连击问题呢?下面介绍几种常用的方法: 1. 禁用按钮 可以在按钮第一次点击时禁用按钮,在处理完当前请求后再重新启…

    JavaScript 2023年6月10日
    00
  • 用Json实现PHP与JavaScript间数据交换的方法详解

    标题:用Json实现PHP与JavaScript间数据交换的方法详解 正文: 什么是JSON? JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于JavaScript语言的一个子集,可以被多种编程语言读取和生成。JSON格式的数据可以被Web应用中的JavaScript直接读取,并且可以方便地用于PHP和Jav…

    JavaScript 2023年5月27日
    00
  • JavaScript Serializer序列化时间处理示例

    下面是“JavaScript Serializer序列化时间处理示例”的完整攻略,包含两个示例说明: 简介 在JavaScript开发中,经常需要对数据进行序列化和反序列化,其中对于时间的处理是比较重要的一部分,在序列化和反序列化中时间需要进行格式转换和传递。本文介绍使用JavaScript进行时间的序列化和反序列化,主要使用了JavaScript Seri…

    JavaScript 2023年5月27日
    00
  • JavaScript 预解析的4种实现方法解析

    JavaScript 预解析的4种实现方法解析 什么是 JavaScript 预解析 JavaScript 预解析是指在代码执行之前,JavaScript 引擎会对代码进行解析和预处理,包括变量提升、函数提升等操作。 为什么需要 JavaScript 预解析 在 JavaScript 中,变量的作用域是函数级别的,函数的作用域也是函数级别的。如果在函数调用之…

    JavaScript 2023年5月18日
    00
合作推广
合作推广
分享本页
返回顶部