用forEach和filter处理三维数组

最新推荐文章于 2024-07-26 09:31:56 发布
最新推荐文章于 2024-07-26 09:31:56 发布
阅读量684 收藏 2
点赞数
文章标签： js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41626878/article/details/126285070
版权

描述：树形图结构的三维数值，过滤掉子项的一些数据（通过勾选），返回新的三位数组。
难点：数组的每项结构不一样，有的含有children，有的不含children，具体看下方数据结构。
解决方案：两层foreach 循环，最里面一层用filter，貌似filter无论几层循环，只能用在最后一层。

this.dataList = [
    {
        "label": "申请单",
        "children": [
            {
                "label": "状态 : 报告"
            },
            {
                "label": "编号 : A0003"
            },
            {
                "label": "优先级 : 正常"
            }
        ]
    },
    {
        "label": "检测项目",
        "children": [
            {
                "label": "开始循环 : 检测项目"
            },
            {
                "label": "结束循环 : 检测项目"
            },
            {
                "label": 1,
                "children": [
                    {
                        "label": "1 : 2"
                    },
                    {
                        "label": "名称 : 测试"
                    },
                    {
                        "label": "章节号 : 001"
                    },
                    {
                        "label": "标准名 : 暂无"
                    },
                    {
                        "label": "检测值 : 小于3"
                    },
                    {
                        "label": "检测结论 : 1"
                    },
                    {
                        "label": "原始记录表 : {\"url\":\"/file/downloads/ent/dev/admin/202208/e2308666-12fe-11ed-b924-00163e0e4e24.json\",\"pdf_url\":null}"
                    }
                ]
            },
            {
                "label": 2,
                "children": [
                    {
                        "label": "名称 : 测试2"
                    },
                    {
                        "label": "章节号 : 002"
                    },
                    {
                        "label": "标准名 : 暂无"
                    },
                    {
                        "label": "检测值 : 大雨2"
                    },
                    {
                        "label": "检测结论 : 2"
                    }
                ]
            }
        ]
    },
    {
        "label": "申请单记录",
        "children": [
            {
                "label": "检测日期 : 2022-08-09 00:00:00"
            },
            {
                "label": "温度 : 18"
            },
            {
                "label": "湿度 : 23"
            },
            {
                "label": "大气压 : 5"
            },
            {
                "label": "检测设备 : 华为"
            },
            {
                "label": "重量4 : 1额"
            },
            {
                "label": "样品测试1 : 21"
            },
            {
                "label": "原始记录表 : 21"
            },
            {
                "label": "报告日期 : 21"
            },
            {
                "label": "记录1 : w而且"
            },
            {
                "label": "申请单记录 : e1"
            },
            {
                "label": "结论 : 21"
            }
        ]
    },
    {
        "label": "样品",
        "children": [
            {
                "label": "开始循环 : 样品"
            },
            {
                "label": "结束循环 : 样品"
            },
            {
                "label": 1,
                "children": [
                    {
                        "label": "编号 : A001"
                    },
                    {
                        "label": "名称 : jack"
                    },
                    {
                        "label": "重量 : 36"
                    },
                    {
                        "label": "型号 : s"
                    },
                    {
                        "label": "描述 : 无"
                    },
                    {
                        "label": "收样时间 : 2022-08-23 00:00:00"
                    },
                    {
                        "label": "收样人 : 9"
                    },
                    {
                        "label": "状态 : un_received"
                    },
                    {
                        "label": "原始记录表 : 21"
                    },
                    {
                        "label": "图片",
                        "children": [
                            {
                                "label": 1,
                                "children": [
                                    {
                                        "label": "filename : OIP-C (5).jpg"
                                    },
                                    {
                                        "label": "url : /file/downloads/ent/dev/admin/202208/19551520-131e-11ed-af0f-00163e0e4e24.jpg"
                                    },
                                    {
                                        "label": "userId : 1"
                                    },
                                    {
                                        "label": "userName : 管理员"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        "label": "报告",
        "children": [
            {
                "label": "状态 : 编制"
            },
            {
                "label": "编号 : AA0237"
            },
            {
                "label": "样品",
                "children": [
                    {
                        "label": 1,
                        "children": [
                            {
                                "label": "A001"
                            }
                        ]
                    }
                ]
            },
            {
                "label": "h5版报告配置 : /file/downloads/www/dev/admin/202208/2e24d146-1884-11ed-9e0c-00163e0e4e24.json"
            }
        ]
    },
    {
        "label": "报告二维码:widthxheight : "
    },
    {
        "label": "当前日期 : 2022-08-11"
    }
]

 点击保存配置，触发事件。

  const AllcheckedNodes = this.$refs.tree.getCheckedKeys(true, false);

       console.log(AllcheckedNodes);     // 获取所有勾选项

      let newArry = []  

     this.dataList1.forEach((item,index) =>{

           newArry[index] = item

                if(item.label == '检测项目' || item.label == '样品' ){

                   newArry[index].label = item.label

                  item.children.forEach((itm,idx) =>{

                    newArry[index].children[idx] = itm

                     if(itm.children){

                     newArry[index].children[idx].children =  itm.children.filter(i =>{

                        if(AllcheckedNodes.includes(i.label)){

                          console.log(i)

                            return i

                        }                      

                       })                            

                     }      

                   })

                 }

                 if(item.label == '申请单'){

                    newArry[index].label = '申请单'

               newArry[index].children =  item.children.filter(i =>{

                   if(AllcheckedNodes.includes(i.label)){

                            return i

                        }  

                 })

                 }

                  if(item.label == '报告'){

                    newArry[index].label = '报告'

               newArry[index].children =  item.children.filter(i =>{

                   if(AllcheckedNodes.includes(i.label)){

                          console.log(i)

                            return i

                        }  

                 })

                 }

                 if(item.label == '申请单记录'){

                    newArry[index].label = '申请单记录'

               newArry[index].children =  item.children.filter(i =>{

                   if(AllcheckedNodes.includes(i.label)){

                          console.log(i)

                            return i

                        }  

                 })

                 }

               })

               console.log(newArry) 

qq_41626878
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES6 forEach&filter运用
qq_57509012的博客
06-20 505
商品查询 css样式： <style> .search { width: 600px; margin: 40px auto; } input { width: 50px; } </style> body： <body> <!-- 过滤案例： 一个商品数组 5个商品 定义.
php三维数组转换二维数组,php 三维数组转二维数组(多维数组变合拼二维数组)(foreach循环 数组叠加)...
weixin_28738165的博客
03-10 739
/**************** @function 三维数组转二维数组* @Param: $array : 传入参数* @Return: $tempArr 返回结果数组***************/function array3_to_array2($array){$array ...
filter、map、forEach配合实现定向处理数组数据
11-30 617
//forEach 不可以使用return等语句跳出循环，所以就配合filter、map使用,来省略多余的循环操作 [1,2,3,4,4,5,6,76] .filter((a,b)=&gt;a&gt;4) //过滤比4大的数据 .map(_=&gt;_) // 放到新的数组中 .forE...
JS中forEach和filter使用
最新发布
chenghao13834505361的博客
07-26 418
JS中forEach和filter使用
关于filter 和 forEach 的实际用法
Allan_L的博客
07-02 3048
有一个输入框，包含下拉选项。把后台返回的数据，以列表的形式展现在下拉框的下拉选项中。返回的数据中，会有一个么默认参数，含有默认参数的选项，需要在页面加载的时候，展示额外在输入框中。在computed计算属性中，写一个isLAtestData方法。isLatest === 1 时，该条数据为需要展示在输入框的默认数据。2. 当点击下拉框中的选项时，需要在输入框中展示出来。在绑定的点击事件上，接收页面...
forEach方法 & filter 方法
From_Ezra的博客
12-20 486
一.forEach() 方法用于调用数组的每个元素，并将元素传递给回调元素主要使用场景： 遍历数组的每个元素注意：1. forEach 主要是遍历数组2. 参数当前数组元素是必须要写的， 索引号可选。
PHP 二维数组和三维数组的过滤
10-22
在PHP编程中，数组是一种非常重要的数据结构，尤其在处理数据集合时，二维数组和三维数组经常被使用。本文将详细介绍如何过滤PHP的二维数组和三维数组，以及如何将三维数组转换为二维数组。 首先，让我们看看如何...
063：vue中一维数组与三维数组联动，类似购物车增减
大剑师兰特的GIS世界
01-09 1618
使用vue项目时候，遇到这样一个需求，将一维数组做一定的转换，增加一些变量，然后将变更后的一维数组转化为三维数组，再然后是一位数组和三维数组的联动，类似于购物车的添加和减少的效果。这是一个完整的示例，涉及到以下函数。 - dajianshi_arr1to1(arr) {} 一维数组转换 - dajianshi_arr1to3(arr) {} 一维数组变成三维数组 - addCart(id) 加入购物车 - removeCart(id) 移除购物车 - delCart(id) 从购物车列表清除
js 一维数组转换成二维、三维数组
棠樾的博客
08-21 2080
需求：后台接口返回一个一维数组，前端需要转换成一个二维，或者三维数组进行级联展示 举个例子： 根据产品类型可以分为：智能手机、耳机、智能家电... 其中智能手机中又可以分为： Ace系列，Reno系列，Find系列.... 二维数组的展示: 就是除去了系列这一分类，把所有的智能手机都放在一起没有系列之分 后端返回数据： 前端需要的数据结构： request .get('url', { params, }) .th.
php去除二维数组的重复项方法
12-18
4. 使用`foreach`循环遍历二维数组，将每个内部数组的元素连接成一个字符串，并存入临时数组`$temp`。这个步骤利用了`join()`函数，将数组元素用`$joinstr`连接，使数组可作为单个字符串处理。 5. `array_unique()`...
forEach、filter、some方法
weixin_45830863的博客
07-25 186
如果查询数组中唯一的元素,用some方法更合适,在some里面遇到returntrue就是终止遍历迭代效率更高。在forEach里面return不会终止迭代。some查找数组中是否有满足条件的元素。
foreach的基本使用方法filter的基本用法
m0_60827885的博客
08-23 1627
闭包 闭包就是能够读取其他函数内部变量的函数。闭包就是将函数内部和函数外部连接起来的一座桥梁。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。缺点：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。 2.原型与原型链 每一个实例对象都有一个私有属性__proto__,指向它的构造函数的原型对象(prototype)。原型
在 JavaScript 中创建和解析 3D 数组
six6de6的博客
10-11 564
在 JavaScript 中创建和解析 3D 数组
JavaScript中forEach和filter的用法和原理
程序员大丰的博客
08-14 1831
JavaScript中有许多好用的数组方法，例如说forEach，filter...等等 那这些方法是都有什么用途呢？以及自己能否写一个方法出来替代呢？ forEach方法 日常用法 ​ 我们拿到一组数据的时候，通常需要通过遍历循环拿到自己想要的数据。 forEach函数能够做到这一点，通常是这样使用的。例如说我们下面数组这种，需要遍历循环这个数组。就能得到以下结果。 参数传递 forEach() 方法按升序为数组中含有效值的每一项执行一次 callback 函数。可依次向 callback .
用forEach实现map, filter, concatAll
qq_37564788的博客
11-28 278
forEach forEach可以对数组中的每一项循环遍历， 但是并不会改变原有数组。 map 如何返回一个新的数组 map的原型函数所做的事， 遍历原有数组所有的元素 将每个元素的预期值塞到新的数组中去 Array.prototype.map = function(callback){ var result = []; this.forEach(element, index){ result.push(callback(element, index)); } return re
forEach方法遍历数组，filter方法筛选数组
m0_63178019的博客
06-03 124
filter()方法创建一个新数组，数组中的元素是通过检查指定数组中符合条件的所有元素。forEach()方法用于调用数组的每个元素，并将元素传递给回调函数。使用场景：筛选数组符合条件的元素,并返回筛选之后元素的新数组。
【Javascript】JS遍历数组的三种方法：map、forEach、filter
ass201295的专栏
10-17 630
前言 　　近一段时间，因为项目原因，会经常在前端对数组进行遍历、处理，JS自带的遍历方法有很多种，往往不加留意，就可能导致知识混乱的现象，并且其中还存在一些坑。前端时间在ediary中总结了js原生自带的常用的对数组遍历处理的方法，分别为：map、forEach、filter，在讲解知识点的同时，会类比相识的函数进行对比，这样会有助于思考方法的利与弊。 ************...
forEach，map， filter， find， sort，some等方法的易错点整理
阳光下的冷静的博客
04-08 3013
一、常用方法解析 说起数组操作，我们肯定第一反应就是想到forEach()、map()、filter()等方法，下面分别阐述一下各方法的优劣。 1、forEach 1.1 基础点   forEach的使用频率很高，多用于对数组自身的改变和各元素相关统计性的计算，重要特性如下： 可以改变数组自身，没有返回值； 中途不能用常规操作跳出循环，可以用抛出异常（try/catch）的方式，但不推荐这样做；...
foreach遍历三维数组
07-28
使用foreach遍历三维数组的代码如下所示： int\[\]\[\]\[\] hh = {{{1,2},{3,4}},{{5,6}}}; for(int\[\]\[\] el : hh) { for(int\[\] el2 : el) { for(int el3 : el2) { System.out.println(el3); } } } 这段代码使用了三个嵌套的foreach循环来遍历三维数组hh。首先，第一个foreach循环遍历hh的第一维，将每个元素赋值给el。然后，第二个foreach循环遍历el的第二维，将每个元素赋值给el2。最后，第三个foreach循环遍历el2的第三维，将每个元素赋值给el3。在循环体内，我们可以对el3进行相应的操作，这里是将el3打印出来。这样就可以遍历整个三维数组并对其中的元素进行处理了。 #### 引用[.reference_title] - *1* *2* [java中怎么用for-each遍历三维数组](https://blog.csdn.net/qq_38006520/article/details/81036202)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [使用foreach遍历三维数组](https://blog.csdn.net/living_ren/article/details/74936206)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值