js根据id向上查找返回层级链,反向递归el-cascader回显多级ID

需求

后台返回 s3

回显需要[s1,s2,s3]

所以我们需要往上查找到s1,s2

先弄分测试数据

const data=[
  { "label": "da9", "value": "016da99b0ff34c1eb15b19e225ca9164" },
  {
    "label": "713",
    "value": "6e2713e4f1bf49a69572484e331ee932",
    "children": [
      {
        "label": "4bb",
        "value": "8764bb88e20e4a468f5a1728bec06fe8",
        "children": [
          { "label": "7ad", "value": "66a7adc89df2491b859698aa8c384a75" },
          { "label": "25f", "value": "a0425faf235f4ada8c0e511cd1234a0a" },
          { "label": "9d6", "value": "ba89d6f2526041ceb4fd36cd1abb5a06" }
        ]
      },
      { "label": "33d", "value": "52433dfe92f74b54a207a9121b93ffc3" },
      { "label": "2c2", "value": "d682c2958f494e33bbc1099fe97ec4fc" },
      { "label": "f2f", "value": "b48f2fabb3e9491fb27e9ad09ebf0510" }
    ]
  },
  {
    "label": "e8b",
    "value": "011e8bc9-8948-4159-ad6c-42ba5253325c",
    "children": [
      { "label": "78d", "value": "2db78da06555404aac6545d45c942722" },
      {
        "label": "454",
        "value": "9c2454c6-ee13-4c24-be3e-58c43f254131",
        "children": [
          { "label": "81f", "value": "1dc81f87b4024de28c9c3cf002818ce3" },
          { "label": "399", "value": "2a3399ee6b6645d88bcfc352616fc5b6" },
          { "label": "722", "value": "5fc72298347d47c9aec477406ba254c4" },
          { "label": "e69", "value": "ce5e69c36b804629a5fad62340d1cfc7" },
          { "label": "bd7", "value": "d82bd70b794848c09e2a7928dcf988bd" },
          { "label": "a27", "value": "e65a27f73923446a9d197e4640daf4f8" }
        ]
      },
      {
        "label": "943",
        "value": "e37943c2e67e4d598386daa511fad67a",
        "children": [
          { "label": "8a4", "value": "2fe8a4c204814b089c878248ebfdac00" },
          { "label": "c3f", "value": "5cbc3ffeb4b84160bc982e030b3cff17" },
          { "label": "8f2", "value": "9598f20c880a4e539b67c93fca77bd76" },
          { "label": "7c6", "value": "a167c6bc274a40e995f887acd89602e1" }
        ]
      },
      { "label": "114", "value": "acd11460-0727-453a-9053-8ca875b389c8" },
      {
        "label": "8a5",
        "value": "f018a567-1953-4ce2-acb8-b8686d52b143",
        "children": [
          { "label": "7f3", "value": "0787f3fb2b6d4a29ac801e0940c64263" },
          { "label": "d0e", "value": "12cd0e956b2d4fbeb36f1351a50adafa" },
          { "label": "3e5", "value": "3853e56c4e1e4dd39b73e5c68b33a124" },
          { "label": "344", "value": "6bd3446ed04f4fb793f7bb9cc52c800f" },
          { "label": "13d", "value": "9c313d0b07d347d09d8f7e05ea9b4a11" },
          { "label": "0b1", "value": "c7c0b1e12a154b5e962d2d9e3b3d62dc" }
        ]
      },
      { "label": "40f", "value": "93840fc8d9e74dc29e5e8bc2eb72a37d" }
    ]
  },
  {
    "label": "71e",
    "value": "c4371e09-6875-472b-875b-8544c0aeb3fd",
    "children": [
      { "label": "674", "value": "06b674782283478aa16a5e254e5f4bb7" },
      {
        "label": "576",
        "value": "7db576fd4daa473982dca1f3ced8ef05",
        "children": [
          { "label": "6a9", "value": "d876a9ad705e413aa030b104887e5647" }
        ]
      },
      {
        "label": "a27",
        "value": "6aaa2713c2b64ab4b3bd1bb873eded61",
        "children": [
          { "label": "08a", "value": "01a08a9ac9ab4618b034d053e32a4882" },
          { "label": "268", "value": "1b6268828d9c4a3fa4e835c9105b116b" },
          { "label": "2cb", "value": "e692cb049c4941db931104e197cafc8d" }
        ]
      },
      {
        "label": "acf",
        "value": "88cacf74-2295-4f3c-9fe4-2498fc574f00",
        "children": [
          { "label": "4b1", "value": "0394b19a68744c24991c03bf7664bd9a" },
          { "label": "51d", "value": "3d651d1c9c5a4c6fb611e74eb5d2c0c1" },
          { "label": "8dc", "value": "3ff8dce771a543aaabb05c3846db128f" },
          { "label": "905", "value": "5a5905666f37419b8317cdb9be22d556" },
          { "label": "c39", "value": "7d8c391ee86e4fbaa3945a37d42cf83a" },
          { "label": "e59", "value": "91fe5976-ed4b-487a-8d3d-84fce7f94bb8" },
          { "label": "118", "value": "9a411809dd2742c0b687d1f5a269b6e8" },
          { "label": "0de", "value": "a1a0de69cbf94358a1dd741cda098dbf" },
          { "label": "f0e", "value": "bccf0e9a-5611-4a81-9a51-b8b092f59793" },
          { "label": "6d7", "value": "c5d6d7b726514b7ba6856ae8d9311356" },
          { "label": "70a", "value": "f1070a29-9e46-453c-ada6-09f07e3bf3e3" }
        ]
      },
      { "label": "09a", "value": "2af09a7e-ae5c-47a0-9e2d-9e8cecebdd69" },
      {
        "label": "15b",
        "value": "6da15b6f083e4d6eaaf59e592b79c282",
        "children": [
          { "label": "ccd", "value": "18fccd59ae354151b059819834ed1ac7" },
          { "label": "91e", "value": "34d91e806d284ca5b9b65f03d97a9ea9" },
          { "label": "a0d", "value": "8d7a0dc9269f42c296f096f11b8cc8b2" }
        ]
      },
      {
        "label": "824",
        "value": "63b8243d-29c2-402b-9c3c-0255483c3e70",
        "children": [
          { "label": "6b0", "value": "7386b0e6185d4052a5acb3ccf90c080f" },
          { "label": "bc6", "value": "e13bc675c60f426faff99b4f04af935a" },
          { "label": "270", "value": "f9f270d944b840d2b932a00c3503e48b" }
        ]
      },
      { "label": "6be", "value": "e856be4ea0bc4c6a8bc0aa2758e6002d" },
      {
        "label": "27b",
        "value": "80127b28-00cf-4edc-a51f-a334284e20a8",
        "children": [
          { "label": "b5e", "value": "060b5ea6-ec01-4509-b2d8-876223143219" },
          { "label": "2a6", "value": "14b2a60c-3075-4ea7-bf8a-fe437c3f9c1f" },
          { "label": "1b2", "value": "2e81b205-95d6-4a52-84fb-362b132b879c" },
          { "label": "8d8", "value": "4aa8d88e-0719-4f14-8b2e-7edeeb872dcf" },
          { "label": "b05", "value": "a14b05ae-bc00-4c76-a7d7-95cc117c5aa2" },
          { "label": "9bb", "value": "add9bb72-d7a0-4679-8a9c-7800e0186db8" },
          { "label": "56d", "value": "baf56d88-e919-416b-b205-219a58b02ab9" },
          { "label": "462", "value": "c36462dc-6957-44d7-ac0a-8d261b2a3915" }
        ]
      },
      { "label": "0c9", "value": "5a40c92a-c2a2-443c-9bff-addeab866ac6" },
      { "label": "5b7", "value": "a9e5b7c8c2ca4b538e893f6865fae07c" }
    ]
  }

]

1、单选

捋一捋逻辑

考虑下性能,一般就第一级则一般不会太多数据,所以我们先直接只循环第一级!

  • 1、循环第一级,判断他有没有符合传入的id的,如果第一级就查到了!就直接返回结束循环!

  • 2、如果没有查到,那就又重新来一次,第一步就等于浪费了!但是如果很复杂的数据,然后查到最后,发现在最后一个的第一级,那么递归消耗的性能就更大了!所以看取舍吧!

  • 3、如果没有查到,就再拿全部数据去执行递归!

实现基础代码,可拿上面数据测试

 
    function a(data, id) {
      let ids = id
      let obj, res = []
      for (let i = 0; i < data.length; i++) {
         if (id === data[i].value) {
          res.push(data[i].value)
          break
        }
      }
      return res
    }
    console.log(a(data, 'c4371e09-6875-472b-875b-8544c0aeb3fd')) // ->["c4371e09-6875-472b-875b-8544c0aeb3fd"]

至此我们就如果一级有就能直接拿到结果了,break结束效率很高

如果一级没有怎么办

    function b(data, id) {
      let ids = id
      let obj, res = []
      for (let i = 0; i < data.length; i++) {
        if (id === data[i].value) {
          res.push(data[i].value)
          console.log('1')
          break
        }
      }
      // 如果没有找到,就是0了,就去执行递归
      if (res.length === 0) {
        res = formTree(data, id)
      }

      function formTree(list, id) {
        let ids = []
        for (let i = 0; i < list.length; i++) {
          // 由于我们直接执行了判断第一级,所以就不用管第一级,直接判断子集!
          let obj = list[i]
          if (obj.children && obj.children.length) {
            // 如果他的子集里面包含了他,那他的父级就是循环的这个id
            if (obj.children.some(row => row.id === id)) {
              ids.push(obj.id)
              formTree(list, obj.id) // 再去查找查找到的上级 
            }

          } //没有子集就不用管了
        }
        return ids
      }
      return res
    }
    console.log(b(data, 'a9e5b7c8c2ca4b538e893f6865fae07c'))



相关内容

发表评论

验证码:
点击我更换图片

最新评论