자바스크립트에서 1차원 배열을 3차원 배열로 변환하는 방법은 무엇입니까? 방법 소개-JS 튜토리얼-php.cn

자바스크립트에서 1차원 배열을 3차원 배열로 변환하는 방법은 무엇입니까? 방법 소개

青灯夜游

풀어 주다： 2021-12-30 10:45:49

앞으로

3152명이 탐색했습니다.

JavaScript에서 1차원 배열을 3차원 배열로 변환하는 방법은 무엇인가요? 이 글에서는 JS의 1차원 배열을 3차원 배열로 변환하는 방법을 알려드리겠습니다.

자바스크립트에서 1차원 배열을 3차원 배열로 변환하는 방법은 무엇입니까? 방법 소개

오늘 친구가 1차원 배열을 3차원 배열로 변환하고 싶어하는 것을 보았는데 제가 별로 바쁘지 않아서 즉시 이 학생을 도와주었습니다.

다음은 백엔드 학생들이 우리에게 반환한 1차원 배열 데이터 형식입니다

	[{
      &#39;品牌&#39;: &#39;xiaomi&#39;, &#39;机型&#39;: &#39;10&#39;, &#39;配置&#39;: &#39;512&#39;
    },
    {
      &#39;品牌&#39;: &#39;xiaomi&#39;, &#39;机型&#39;: &#39;10&#39;, &#39;配置&#39;: &#39;128&#39;
    },
    {
      &#39;品牌&#39;: &#39;xiaomi&#39;, &#39;机型&#39;: &#39;11&#39;, &#39;配置&#39;: &#39;128&#39;
    },
    {
      &#39;品牌&#39;: &#39;xiaomi&#39;, &#39;机型&#39;: &#39;11&#39;, &#39;配置&#39;: &#39;64&#39;
    },
    {
      &#39;品牌&#39;: &#39;iPhone&#39;, &#39;机型&#39;: &#39;10&#39;, &#39;配置&#39;: &#39;128&#39;
    },
    {
      &#39;品牌&#39;: &#39;iPhone&#39;, &#39;机型&#39;: &#39;11&#39;, &#39;配置&#39;: &#39;64&#39;
    },
    {
      &#39;品牌&#39;: &#39;iPhone&#39;, &#39;机型&#39;: &#39;12&#39;, &#39;配置&#39;: &#39;64&#39;
    },
    {
      &#39;品牌&#39;: &#39;honor&#39;, &#39;机型&#39;: &#39;4&#39;, &#39;配置&#39;: &#39;256&#39;
    },
    {
      &#39;品牌&#39;: &#39;honor&#39;, &#39;机型&#39;: &#39;5&#39;, &#39;配置&#39;: &#39;128&#39;
    },
    {
      &#39;品牌&#39;: &#39;honor&#39;, &#39;机型&#39;: &#39;6&#39;, &#39;配置&#39;: &#39;128&#39;
    }];

로그인 후 복사

다음은 우리가 변환하려는 데이터 형식입니다(1단계가 3차원 배열로 변환됨). 브랜드, 두 번째 수준은 모델이고 세 번째 수준은 구성입니다)

    [
      {
        "value": "xiaomi",
        "label": "xiaomi",
        "children": [
          {
            "value": "10",
            "label": "10",
            "children": [
              {
                "value": "512",
                "label": "512"
              },
              {
                "value": "128",
                "label": "128"
              }
            ]
          },
          {
            "value": "11",
            "label": "11",
            "children": [
              {
                "value": "128",
                "label": "128"
              },
              {
                "value": "64",
                "label": "64"
              }
            ]
          }
        ]
      },
      {
        "value": "iPhone",
        "label": "iPhone",
        "children": [
          {
            "value": "10",
            "label": "10",
            "children": [
              {
                "value": "128",
                "label": "128"
              }
            ]
          },
          {
            "value": "11",
            "label": "11",
            "children": [
              {
                "value": "64",
                "label": "64"
              }
            ]
          },
          {
            "value": "12",
            "label": "12",
            "children": [
              {
                "value": "64",
                "label": "64"
              }
            ]
          }
        ]
      },
      {
        "value": "honor",
        "label": "honor",
        "children": [
          {
            "value": "4",
            "label": "4",
            "children": [
              {
                "value": "256",
                "label": "256"
              }
            ]
          },
          {
            "value": "5",
            "label": "5",
            "children": [
              {
                "value": "128",
                "label": "128"
              }
            ]
          },
          {
            "value": "6",
            "label": "6",
            "children": [
              {
                "value": "128",
                "label": "128"
              }
            ]
          }
        ]
      }
    ]

로그인 후 복사

먼저 arr 변수를 정의하여 1차원 배열을 받은 다음 arr을 함수에 매개 변수로 전달하여 배열을 변환합니다. 함수는 최종 3차원 배열을 반환합니다

자바스크립트에서 1차원 배열을 3차원 배열로 변환하는 방법은 무엇입니까? 방법 소개

다음은 arrConversion 소스 코드입니다

    arrConversion (arr) {
      let keys = Object.keys(arr[0])
      let level1 = keys[0]//获取一级属性名称
      let level2 = keys[1]//获取二级属性名称
      let level3 = keys[2]//获取三级属性名称
      let list = Array.from(new Set(
        arr.map(item => {
          return item[level1]
        })))
      let subList = []
      list.forEach(res => {
        arr.forEach(ele => {
          if (ele[level1] === res) {
            let nameArr = subList.map(item => item.value)
            if (nameArr.indexOf(res) !== -1) {
              let nameArr2 = subList[nameArr.indexOf(res)].children.map(item => item.value)
              if (nameArr2.indexOf(ele[level2]) !== -1) {
                subList[nameArr.indexOf(res)].children[nameArr2.indexOf(ele[level2])].children.push({
                  value: ele[level3],
                  label: ele[level3],
                })
              } else {
                subList[nameArr.indexOf(res)].children.push({
                  value: ele[level2],
                  label: ele[level2],
                  children: [{
                    value: ele[level3],
                    label: ele[level3],
                  }]
                })
              }
            } else {
              subList.push({
                value: res,
                label: res,
                children: [{
                  value: ele[level2],
                  label: ele[level2],
                  children: [{
                    value: ele[level3],
                    label: ele[level3],
                  }]
                }]
              })
            }
          }
        })

      })
      return subList

    }

로그인 후 복사

출력 결과는 정확합니다

자바스크립트에서 1차원 배열을 3차원 배열로 변환하는 방법은 무엇입니까? 방법 소개