js之如何删除多层数组嵌套的最后一层中的部分数据

 更新时间:2023年06月29日 10:32:39   作者:MYG_G  
这篇文章主要介绍了js之如何删除多层数组嵌套的最后一层中的部分数据问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

js删除多层数组嵌套的最后一层中的部分数据

我想删除arr中,第二个对象里面的aList中的{id:153,name: daad}的元素。

const arr = [
  {
    id: 1,
    name: 'llaq',
    aList: [
      {
        id: 20,    
        name: 'hdka',
      },
      {
        id: 12,
        name: 'loqas',
      },
    ]
  },
  {
    id: 2,
    name: '略略略',
    aList: [
      {
        id: 21221,
        name: 'dqd',
      },
      {
        id: 152,
        name: 'daad',
      },
      {
        id: 19522,
        name: 'kka',
      },
    ]
  },
  {
    id: 3,
    name: '哐哐哐',
    aList: [
      {
        id: 32,
        name: '32',
      },
      {
        id: 132,
        name: '32daa',
      },
      {
        id: 1232,
        name: 'da',
      },
    ]
  },
]
// id是aList中要删除的id
const handleClose = (id: number) => {
     const list = arr.map(item => {
     //修改被删除的item的数据
      item.aList = item?.aList?.filter(v => v.id !== id);
      return item;
    })
    console.log(list,'list');
  };

多层嵌套数组拿到每一层数据,可以组成新数组,也可以把内部数据改变

数据结构如下

data: [{
          id: 0,
          name: "1",
          children: [{
              id: 0 - 1,
              name: "0-1",
              children: [{
                  id: 0 - 1 - 1,
                  name: "0-1-1",
                  children: [{...}]
                }]
            }]
        }]

以此类推,数组里面还有数组,还有数组这种样式

处理方法

tree(res) {
      for (const item of res) {
    //这里可以处理很多数据,比如遍历一个数据数组匹配数据更改数据
        item.label = item.name;//如果label存在就是改变值,如果不存在就是往数组里面添加了一条新数据
        //如果item.children存在,就再调用一次函数,传数组给他,直到没有儿子结束
        if (item.children) {
          this.tree(item.children);
        }
      }
    },

遍历成新数组

tree(res,list) {
      for (const item of res) {
        list.push(item.id)
        if (item.children) {
          this.tree(item.children,list);
        }
      }
    },

传数组以及需要形成的新数组,循环一次push一次,直到循环条件不成立就结束

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • bootstrap手风琴制作方法详解

    bootstrap手风琴制作方法详解

    这篇文章主要为大家详细介绍了bootstrap手风琴的制作方法,制作声明式触发手风琴,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JS实现从网页顶部掉下弹出层效果的方法

    JS实现从网页顶部掉下弹出层效果的方法

    这篇文章主要介绍了JS实现从网页顶部掉下弹出层效果的方法,实例分析了javascript创建弹出窗口及窗口掉落与抖动效果实现方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • javascript实现类似超链接的效果

    javascript实现类似超链接的效果

    这篇文章主要介绍了使用javascript实现类似超链接的效果的特效,通过示例熟悉javascript事件,这里推荐给大家。
    2014-12-12
  • 使用reflect-metadata实现数据校验与日志记录

    使用reflect-metadata实现数据校验与日志记录

    在 TypeScript 生态系统中,reflect-metadata 库是一种强大的工具,它允许我们在运行时获取更多的类型信息,下面我们来看看如何在前端项目中使用reflect-metadata以及它能实现的能力吧
    2024-12-12
  • 使用webpack搭建pixi.js开发环境

    使用webpack搭建pixi.js开发环境

    这篇文章主要介绍了使用webpack搭建pixi.js开发环境,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • js Flash插入函数免激活代码

    js Flash插入函数免激活代码

    好多情况下flash会出现需要单击激活,不过一般新版本中直接插入随然不用激活但代码较多,下面的方法是个函数,其实代码也不少,不过思路很好,大家可以看看。
    2009-03-03
  • 微信小程序修改swiper默认指示器样式的实例代码

    微信小程序修改swiper默认指示器样式的实例代码

    这篇文章主要介绍了微信小程序修改swiper默认指示器样式的实例代码,代码块是从微信开发文档中心复制的代码块,在此基础上修改官方swiper样式,需要的朋友可以参考下
    2018-07-07
  • 使用javascript做时间倒数读秒功能的实例

    使用javascript做时间倒数读秒功能的实例

    今天小编就为大家分享一篇关于使用javascript做时间倒数读秒功能的实例,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 简单实现js上传文件功能

    简单实现js上传文件功能

    这篇文章主要教大家如何简单实现js上传文件功能,代码简单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • javascript实现简单的分页特效

    javascript实现简单的分页特效

    下面给大家汇总的几个javascript实现的分页代码,当然必须要结合后台代码实现。大家可以自行分析一下代码,希望能够给大家带来一定的帮助
    2015-08-08

最新评论