查找多层数组对象中是否存在某项值(key)

原创已于 2023-08-07 16:06:55 修改 · 1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js

于 2023-02-17 09:41:31 首次发布

前端专栏收录该内容

84 篇文章

订阅专栏

文章讲述了如何通过递归方法检查一个嵌套的数组对象，当找到setcolor属性值为1时，在对象中添加itemStyle和label属性，将其颜色设置为红色。这种方法用于高亮显示与安全漏洞相关的组件。

数组对象结构类似如下：

      ActivityData: {
        name: "flare",
        data: [
          {
            name: "OA 系统",
            children: [
              {
                name: "Spring Boot_1.5.9.RELEASE",
                children: [
                  {
                    name: "引用组件", 
                    setcolor:1,
                    children: [
                      { name: "Logbock_1.11", value: 3938 },
                      { name: "transactions-jms_3.9.3", value: 3812, setcolor:1},
                      {
                        name: "Jackson-databind_2.8.10  漏洞",
                        children: [
                          { name: "CVE-2021-20190", value: 5731,},
                        ],
                      },
                      {
                        name: "Jackson-databind_2.8.10",
                        children: [
                          { name: "CVE-2021-20190", value: 5731, setcolor:1},
                          { name: "CVE-2021-20190", value: 7840, },
                        ],
                      },
                      { name: "transactions-jta_3.9.3", value: 743 },
                      { name: ".......", value: 743 },
                      
                    ],
                  },
                  {
                    name: "源代码",
                    children: [
                      { name: "IpareportContrller.JAVA", value: 3938 },
                      { name: "DataScanActuator.JAVA", value: 6714 },
                      {
                        name: "Jackson-databind_2.8.10",
                        children: [
                          { name: "CNNVD-201905-214", value: 5731, },
                          { name: "CVE-2021-20190", value: 5914,},
                        ],
                      },
                    ],
                  },
                ],
              },
              { name: "其他框架",},
            ],
          },
        ],
      },

查找该数组对象中是否存在setcolor值，若存在则判断值符合条件时，该对象中添加属性

itemStyle: { color: "red"}

这里介绍的是递归方法：

setstyle(data) {
       // 遍历数据中是否存在setcolor值，并且当值==1时；增添itemStyle 
      return data.map((item) => {
        if (item.setcolor && item.setcolor == 1) {
          return {
            ...item,
            // 是否存在childer存在则继续查找下一层级，不存在则返回空值或undefind；
            children: item.children ? this.setstyle(item.children) : undefined,
            // 增加属性
            itemStyle: {
              color: "red",
            },
            label:{
              color:'red'
            }
          };
        }else {
          return {
            ...item,
            children: item.children ? this.setstyle(item.children) : undefined,
          };
        }
      });
    },

    this.setstyle(ActivityData);  // 将数组对象传递到setstyle方法中

小伙伴们还有其他的好办法，可以发出来，一起学习一下