>  기사  >  웹 프론트엔드  >  자바스크립트에서 1차원 배열을 3차원 배열로 변환하는 방법은 무엇입니까? 방법 소개

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

青灯夜游
青灯夜游앞으로
2021-12-30 10:45:493107검색

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

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

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

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

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

다음은 우리가 변환하려는 데이터 형식입니다(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차원 배열로 변환하는 방법은 무엇입니까? 방법 소개

[관련 권장 사항: javascript 학습 튜토리얼]

위 내용은 자바스크립트에서 1차원 배열을 3차원 배열로 변환하는 방법은 무엇입니까? 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제