Maison >interface Web >js tutoriel >Comment convertir un tableau unidimensionnel en tableau tridimensionnel en javascript ? Présentation de la méthode

Comment convertir un tableau unidimensionnel en tableau tridimensionnel en javascript ? Présentation de la méthode

青灯夜游
青灯夜游avant
2021-12-30 10:45:493144parcourir

Comment convertir un tableau unidimensionnel en un tableau tridimensionnel en JavaScript ? Cet article partagera avec vous une méthode de conversion. Cette méthode est suffisante pour convertir un tableau unidimensionnel JS en un tableau tridimensionnel !

Comment convertir un tableau unidimensionnel en tableau tridimensionnel en javascript ? Présentation de la méthode

Aujourd'hui, j'ai vu un ami qui a posé une question. Il voulait convertir un tableau unidimensionnel en un tableau tridimensionnel. Je n'étais pas très occupé, j'ai donc été utile et j'ai immédiatement pris des dispositions pour cet élève.

Ce qui suit est le format de données de tableau unidimensionnel qui nous a été renvoyé par les camarades de classe du back-end

	[{
      '品牌': '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'
    }];

Ce qui suit est le format de données que nous voulons convertir (converti en un tableau tridimensionnel, le premier niveau étant le brand, le deuxième niveau étant le modèle et le troisième niveau étant la configuration)

    [
      {
        "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"
              }
            ]
          }
        ]
      }
    ]

Nous définissons d'abord une variable arr pour recevoir notre tableau unidimensionnel, puis passons arr comme paramètre à notre fonction pour convertir le tableau. La fonction renvoie notre tableau tridimensionnel final

Comment convertir un tableau unidimensionnel en tableau tridimensionnel en javascript ? Présentation de la méthode

Ce qui suit est notre code source 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

    }

Le résultat de sortie est correct

Comment convertir un tableau unidimensionnel en tableau tridimensionnel en javascript ? Présentation de la méthode

[Recommandations associées : Tutoriel d'apprentissage Javascript]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer