首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

获取数组中父级及其子级的所有材料(少数除外

要获取数组中父级及其子级的所有材料(少数除外),我们可以使用递归方法来遍历数组并构建一个包含所有相关材料的树形结构。以下是一个示例代码,展示了如何实现这一功能:

代码语言:txt
复制
// 假设我们有以下数据结构
const materials = [
  { id: 1, name: 'Material A', parentId: null },
  { id: 2, name: 'Material B', parentId: 1 },
  { id: 3, name: 'Material C', parentId: 1 },
  { id: 4, name: 'Material D', parentId: 2 },
  { id: 5, name: 'Material E', parentId: 2 },
  { id: 6, name: 'Material F', parentId: 3 },
  // ... 其他材料
];

// 少数需要排除的材料ID列表
const excludeIds = [4, 6];

// 递归函数,用于获取父级及其子级的所有材料
function getMaterialsWithChildren(materials, excludeIds, parentId = null) {
  return materials
    .filter(material => material.parentId === parentId && !excludeIds.includes(material.id))
    .map(material => ({
      ...material,
      children: getMaterialsWithChildren(materials, excludeIds, material.id)
    }));
}

// 调用函数并打印结果
const result = getMaterialsWithChildren(materials, excludeIds);
console.log(JSON.stringify(result, null, 2));

解释

  1. 数据结构:假设我们有一个包含材料和它们父级ID的数组。
  2. 排除列表:定义一个需要排除的材料ID列表。
  3. 递归函数getMaterialsWithChildren 函数通过递归遍历数组,构建一个包含所有相关材料的树形结构。
    • filter 方法用于筛选出符合条件的材料(即父级ID匹配且不在排除列表中)。
    • map 方法用于将筛选出的材料转换为包含子级材料的树形结构。
  • 调用函数:调用递归函数并打印结果。

应用场景

这个方法适用于需要构建树形结构的场景,例如:

  • 文件系统管理
  • 组织结构管理
  • 产品分类管理

参考链接

通过这种方法,你可以有效地获取数组中父级及其子级的所有材料,并排除指定的少数材料。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JS获取节点的兄弟,父级,子级元素的方法

2015-08-18 03:48:27 下面介绍JQUERY的父,子,兄弟节点查找方法 jQuery.parent(expr)  找父亲节点,可以传入expr进行过滤,比如$("span").parent...()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children...(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点 jQuery.contents(),返回下面的所有内容,包括节点和文本。...(),返回所有之前的兄弟节点 jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点 jQuery.nextAll(),返回所有之后的兄弟节点 jQuery.siblings(),返回兄弟姐妹节点...jQuery.filter()是从初始的jQuery对象集合中筛选出一部分,而jQuery.find()的返回结果,不会有初始集合中的内容,比如$("p"),find("span"),是从元素开始找

9.2K10
  • Vue3 的 7 种和 Vue2 的 12 种组件通信,值得收藏

    2") // 写法二 适用于复杂类型,如数组、对象 const msg2 = reactive(["这是传级子组件的信息2"])...$attrs 获取父作用域中所有符合条件的属性集合,然后还要继续传给子组件内部的其他组件,就可以通过 v-bind="$attrs"。...$listeners:包含父作用域里 .native 除外的监听事件集合。如果还要继续传给子组件内部的其他组件,就可以通过 v-on="$linteners"。...$children / $parent$children:获取到一个包含所有子组件(不包含孙子组件)的 VueComponent 对象数组,可以直接拿到子组件中所有数据和方法等。...$parent:获取到一个父节点的 VueComponent 对象,同样包含父节点中所有数据和方法等。

    25032

    Vue 组件通信的 8 种方式

    父组件 向 子组件 传递值 在父组件中引入子组件 注册子组件 在页面中使用,子组件标签上 动态绑定传入动态值 / 静态值 在子组件中,使用 props 来接受 父组件 传递过了的值 子组件接收的父组件的值分为引用类型和普通类型两种...父组件 通过 $refs / $children 来获取子组件值 $refs : 获取DOM 元素 和 组件实例来获取组件的属性和方法。 通过在 子组件 上绑定 ref ,使用 this....当一个组件没有声明任何 props 时,它包含所有父作用域的绑定 (class 和 style 除外)。...它是一个对象,里面包含了作用在这个组件上的所有事件监听器,相当于子组件继承了父组件的事件。...inject : 是一个字符串数组 或者是一个对象 用来在子组件或者子孙组件中注入 provide 提供的父组件属性。

    36750

    Vue 组件通信的 8 种方式

    父组件 向 子组件 传递值 ❝ 在父组件中引入子组件 注册子组件 在页面中使用,子组件标签上 动态绑定传入动态值 / 静态值 在子组件中,使用 props 来接受 父组件 传递过了的值...父组件 通过 $refs / $children 来获取子组件值 ❝$refs : 获取DOM 元素 和 组件实例来获取组件的属性和方法。 通过在 子组件 上绑定 ref ,使用 this....当一个组件没有声明任何 props 时,它包含所有父作用域的绑定 (class 和 style 除外)。...它是一个对象,里面包含了作用在这个组件上的所有事件监听器,相当于子组件继承了父组件的事件。...inject : 是一个字符串数组 或者是一个对象 用来在子组件或者子孙组件中注入 provide 提供的父组件属性。

    48121

    总结了一些vue相关的题目,话说今年前端面试难度好大

    当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 ( class 和 style 除外 ),并且可以通过 v-bind="$attrs" 传入内部组件。...provide / inject API 主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系。...Vue 组件通讯有哪几种方式props 和$emit 父组件向子组件传递数据是通过 prop 传递的,子组件传递数据给父组件是通过$emit 触发事件来做到的$parent,$children 获取当前组件的父组件和当前组件的子组件...当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 ( class 和 style 除外 ),并且可以通过 v-bind="$attrs" 传入内部组件。...provide / inject API 主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系。

    89160

    前端一面常见vue面试题合集_2023-03-01

    当一个组件没有声明任何 prop时,这里会包含所有父作用域的绑定 ( class 和 style 除外 ),并且可以通过 v-bind="$attrs" 传入内部组件。...provide / inject API 主要解决了跨级组件间的通信问题, 不过它的使用场景,主要是子组件获取上级组件的状态 ,跨级组件间建立了一种主动提供与依赖注入的关系 $root 适用于 隔代组件通信...provide / inject API 主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系。...子组件不可以直接改变父组件的数据。这样做主要是为了维护父子组件的单向数据流。每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。...provide / inject API 主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系。

    72831

    线程组ThreadGroup分析详解 多线程中篇(三)

    所以一个线程组核心的信息是:名称、优先级、是否守护、父线程组、子线程组 ? 另外还有一个默认的构造方法,看注释,用来创建系统线程组 ?...父线程组 对于线程组来说,是明确的记录了他的父 借助于parent这个属性值,可以获取一个线程组的父线程组,也可以用来确定是否是一个指定线程组的父或者祖先 ?...线程枚举 底层依赖于私有枚举方法,把此线程组及其子组中的所有活动线程复制到指定数组中。...interrupt()方法 中断此线程组中的所有线程,可以看得出来: 仍旧是遍历树形结构,核心是调用所有线程的interrupt方法 所以,此方法是中断该线程组以及所有子线程组中的所有线程 ?...destroy()负责销毁此线程组及其所有子组。

    1K30

    Vue中组件最常见通信的方式

    包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。...当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind=”$attrs” 传入内部组件——在创建高级别的组件时非常有用。...在子组件中我们通过props获取子组件所需要的参数,即childMsg;剩余的参数就被归到了$attrs对象中,我们可以在页面中展示出来,然后把它继续往孙组件中传;同时把所有的监听函数归到$listeners...可以看到初始化provide的时候将父组件的provide挂载到_provided,但它不是一个响应式的对象;然后子组件通过$parent向上查找所有父组件的_provided获取第一个有目标属性的值,...我们在父组件中插入了两个相同的子组件,在子组件中通过$parent调用了父组件的函数,并在父组件通过$children获取子组件实例的数组。 ?

    1.6K20

    腾讯前端常考vue面试题整理

    ,同时更新元素属性更新子节点时又分了几种情况新的子节点是文本,老的子节点是数组则清空,并设置文本;新的子节点是文本,老的子节点是文本则直接更新文本;新的子节点是数组,老的子节点是文本则清空文本,并创建新子节点数组中的子元素...;新的子节点是数组,老的子节点也是数组,那么比较两组子节点,更新细节blablavue3中引入的更新策略:静态节点标记等vdom中diff算法的简易实现以下代码只是帮助大家理解diff算法的原理和流程将...每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。如果这样做了,Vue 会在浏览器的控制台中发出警告。...provide / inject API 主要解决了跨级组件间的通信问题, 不过它的使用场景,主要是子组件获取上级组件的状态 ,跨级组件间建立了一种主动提供与依赖注入的关系$root 适用于 隔代组件通信...provide / inject API 主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系。

    49230

    vue中组件间通信方式的总结

    vue中组件间的通信方式 方法一、props/$emit 这是我们比较熟悉的方式,主要是父子组件之间的传递方式,父传子使用props,子传父使用$emit....为此Vue2.4 版本提供了另一种方法----$attrs/$listeners $attrs:包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。...当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件。...provide / inject API 主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系。...总结 常见使用场景可以分为三类: 父子通信: 父向子传递数据是通过 props,子向父是通过 events($emit);通过父链 / 子链也可以通信($parent / $children);ref

    46810

    前端常见vue面试题(必备)_2023-03-01

    (4)$attrs/$listeners 适用于 隔代组件通信 $attrs:包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。...当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 ( class 和 style 除外 ),并且可以通过 v-bind="$attrs" 传入内部组件。...provide / inject API 主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系。...当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 ( class 和 style 除外 ),并且可以通过v-bind="$attrs" 传入内部组件。...provide / inject API主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系。

    85520

    Vue 8种组件通信方式

    父组件向子组件传值 下面通过一个例子说明父组件如何向子组件传递数据:在子组件article.vue中如何获取父组件section.vue中的数据articles:['红楼梦', '西游记','三国演义'...在上个例子的基础上, 点击页面渲染出来的ariticle的item, 父组件中显示在数组中的下标 // 父组件中 的子组件拿$children是个空数组。...注意: 这里不论子组件嵌套有多深, 只要调用了inject 那么就可以注入provide中的数据,而不局限于只能从当前父组件的props属性中回去数据 举例验证 接下来就用一个例子来验证上面的描述:...在版本2.4以前,默认情况下,父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外),将会“回退”且作为普通的HTML特性应用在子组件的根元素上。

    96340

    8种vue组件通信方式(转载)

    父组件向子组件传值 下面通过一个例子说明父组件如何向子组件传递数据:在子组件article.vue中如何获取父组件section.vue中的数据articles:['红楼梦', '西游记','三国演义'...在上个例子的基础上, 点击页面渲染出来的ariticle的item, 父组件中显示在数组中的下标 // 父组件中 的子组件拿$children是个空数组。...注意: 这里不论子组件嵌套有多深, 只要调用了inject 那么就可以注入provide中的数据,而不局限于只能从当前父组件的props属性中回去数据 举例验证 接下来就用一个例子来验证上面的描述:...在版本2.4以前,默认情况下,父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外),将会“回退”且作为普通的HTML特性应用在子组件的根元素上。

    1.2K50

    Vue 组件数据通信方案总结

    父组件向子组件传值,通过绑定属性来向子组件传入数据,子组件通过 Props 属性获取对应数据。...• $attrs: 包含了父作用域中不作为 Prop 被识别 (且获取) 的特性绑定(Class 和 Style 除外)。...当一个组件没有声明任何 Prop 时,这里会包含所有父作用域的绑定 (Class 和 Style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。...所以,如果采用的是我代码中注释的方式,父级的 name 如果改变了,子组件this.name 是不会改变的,仍然是 政采云 ,而当采用代码中传入一个监听对象,修改对象中属性值,是可以监听到修改的。...$parent 访问父实例,子实例被推入父实例的 $children 数组中。 • $refs: 一个对象,持有注册过 ref 特性[3] 的所有 DOM 元素和组件实例。

    69110

    vue通信-组件传值

    ) 1.eventBus(事件总线)必须掌握 vue 中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,包括父子、兄弟、跨级。...改变他们的属性将会怎么变化?父组件中没有这个属性怎么办? 针对不同父组件调用,子组件会每次都会生成一个实例,这也是 Vue 的重要机制。$parent 会获取每个调用它的父组件实例。...子组件中通过$parent 会改变每个调用它的父组件中的对应属性。...$attrs:包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。...当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind=”$attrs” 传入内部组件。

    4.2K30

    Vue 组件数据通信方案总结

    父组件向子组件传值,通过绑定属性来向子组件传入数据,子组件通过 Props 属性获取对应数据 // 父组件 父作用域中不作为 Prop 被识别 (且获取) 的特性绑定 (Class 和 Style 除外)。...当一个组件没有声明任何 Prop 时,这里会包含所有父作用域的绑定 (Class 和 Style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。...所以,如果采用的是我代码中注释的方式,父级的 name 如果改变了,子组件this.name 是不会改变的,仍然是 政采云,而当采用代码中传入一个监听对象,修改对象中属性值,是可以监听到修改的。...$parent 访问父实例,子实例被推入父实例的 $children 数组中。 $refs:一个对象,持有注册过 ref 特性 的所有 DOM 元素和组件实例。

    43510
    领券