快捷導(dǎo)航

JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組的實(shí)現(xiàn)示例

更新時(shí)間：2021年12月24日 09:58:37 作者：幾何心涼

很多時(shí)候，跟后端接口開(kāi)發(fā)對(duì)接時(shí)，因?yàn)樾枨蟮年P(guān)系，需要前端地區(qū)數(shù)據(jù)跟后端的數(shù)據(jù)要一一對(duì)應(yīng)，有時(shí)候需要的是多維數(shù)據(jù)，這篇文章主要介紹了JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組的實(shí)現(xiàn)示例，感興趣的可以了解一下

今天在CSDN上問(wèn)答區(qū)看到一個(gè)提問(wèn)的小伙伴，是想要將一維數(shù)組轉(zhuǎn)化為三位數(shù)組的需求，正好不是很忙，樂(lè)于助人的我立馬給這位同學(xué)安排上，當(dāng)然也沒(méi)有顧及那么多去看資料什么的，就直接按照自己的思路走了！下方有源碼

在這里插入圖片描述

上面是他的數(shù)據(jù)格式，下面呢是要轉(zhuǎn)化的數(shù)據(jù)格式

在這里插入圖片描述

話不多說(shuō)直接上代碼

 let arr = [{
      'peovince': 'a', 'city': 'b', 'area': 'c'
    },
    {
      'peovince': 'a', 'city': 'b', 'area': 'd'
    },
    {
      'peovince': 'a', 'city': 'e', 'area': 'f'
    },
    {
      'peovince': 'a', 'city': 'e', 'area': 'g'
    },
    {
      'peovince': 'o', 'city': 'p', 'area': 'q'
    },
    {
      'peovince': 'o', 'city': 'p', 'area': 'r'
    },
    {
      'peovince': 'o', 'city': 's', 'area': 't'
    },
    {
      'peovince': 'o', 'city': 's', 'area': 'v'
    }];

開(kāi)始轉(zhuǎn)化

let list = Array.from(new Set(
      arr.map(item => {
        return item['peovince']
      })))
    let subList = []
    list.forEach(res => {
      arr.forEach(ele => {
        if (ele['peovince'] === 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['city']) !== -1) {
              subList[nameArr.indexOf(res)].children[nameArr2.indexOf(ele['city'])].children.push({
                value: ele['area'],
                label: ele['area'],
              })
            } else {
              subList[nameArr.indexOf(res)].children.push({
                value: ele['city'],
                label: ele['city'],
                children: [{
                  value: ele['area'],
                  label: ele['area'],
                }]
              })
            }
          } else {
            subList.push({
              value: res,
              label: res,
              children: [{
                value: ele['city'],
                label: ele['city'],
                children: [{
                  value: ele['area'],
                  label: ele['area'],
                }]
              }]
            })
          }
        }
      })

    })
    console.log(subList)

最后打印的subList就是想要的格式了，讓我們看一下打印

ps：JavaScript一維數(shù)組轉(zhuǎn)二維數(shù)組

第一種情況：數(shù)組里面是字符串的時(shí)候

  let array = [1, 2, 3, 4, 5, 6, 7, 8];
  len len = array.length;
  let n = 4; //假設(shè)每行顯示4個(gè)
  let lineNum = len % n === 0 ? len / n : Math.floor( (len / n) + 1 );
  let res = [];
  for (let i = 0; i < lineNum; i++) {
    // slice() 方法返回一個(gè)從開(kāi)始到結(jié)束（不包括結(jié)束）選擇的數(shù)組的一部分淺拷貝到一個(gè)新數(shù)組對(duì)象。且原始數(shù)組不會(huì)被修改。
    let temp = array.slice(i*n, i*n+n);
    res.push(temp);
  }
  console.log(res);

第二種情況：數(shù)組里面是對(duì)象的時(shí)候

當(dāng)數(shù)組元素為對(duì)象的時(shí)候，就不能使用slice方法進(jìn)行截取了，因?yàn)閟lice屬于淺拷貝，導(dǎo)致的問(wèn)題就是你修改了新生成的數(shù)組對(duì)象值，會(huì)影響原始數(shù)組中對(duì)象的值。
這里就介紹一種通過(guò)JSON.stringify和JSON.parse方法。

  let objArray = [{a: 1}, {b: 2}, {c: 3}, {d: 4}, {e: 5}, {f: 6}, {g: 7}];
  let len = objArray.length;
  let n = 4; //假設(shè)每行顯示4個(gè)
  let lineNum = len % 4 === 0 ? len / 4 : Math.floor( (len / 4) + 1 );
  let res = [];
  for (let i = 0; i < lineNum; i++) {
    let temp = objArray.slice(i*n, i*n+n);
    res.push(JSON.parse(JSON.stringify(temp)));
  }
  console.log(res);

到此這篇關(guān)于JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組的文章就介紹到這了,更多相關(guān)JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: