一维数组转二维数组

在项目上，会遇到将一个一维数组的数据，按板块的分布排版这一类的需求。这种需求的数据往往就是数组元素中含有相同字段，以这相同字段分类即可达到需求。

以以下数据为例：

将

let oldArr= [
  {
    name: "一级光圆钢",
    type: "热轧光圆钢筋（盘卷）",
    material: "HPB300",
    specification: "Φ8",
  },
  {
    name: "一级光圆钢",
    type: "热轧光圆钢筋（盘卷）",
    material: "HPB300",
    specification: "Φ10",
  },
  {
    name: "一级光圆钢",
    type: "热轧光圆钢筋（盘卷）",
    material: "HPB300",
    specification: "Φ12",
  },
  
  {
    name: "四级抗震螺纹钢",
    type: "热轧带肋钢筋",
    material: "HRB500E",
    specification: "Φ14-普尺",
  },
  {
    name: "四级抗震螺纹钢",
    type: "热轧带肋钢筋",
    material: "HRB500E",
    specification: "Φ16-L12M",
  },
  
  {
    name: "三级抗震螺纹钢",
    type: "热轧带肋钢筋",
    material: "HRB400E",
    specification: "Φ20-L12M",
  },
  {
    name: "三级抗震螺纹钢",
    type: "热轧带肋钢筋",
    material: "HRB400E",
    specification: "Φ20-L9M",
  },
  
  {
    name: "三级抗震螺纹钢",
    type: "热轧带肋钢筋（盘卷）",
    material: "HRB400E",
    specification: "Φ10",
  },
  {
    name: "三级抗震螺纹钢",
    type: "热轧带肋钢筋（盘卷）",
    material: "HRB400E",
    specification: "Φ12",
  },
];

转换为

let newArr= [
    [
      {
        name: "一级光圆钢",
        type: "热轧光圆钢筋（盘卷）",
        material: "HPB300",
        specification: "Φ8",
      },
      {
        name: "一级光圆钢",
        type: "热轧光圆钢筋（盘卷）",
        material: "HPB300",
        specification: "Φ10",
      },
      {
        name: "一级光圆钢",
        type: "热轧光圆钢筋（盘卷）",
        material: "HPB300",
        specification: "Φ12",
      },
    ],

    [
      {
        name: "四级抗震螺纹钢",
        type: "热轧带肋钢筋",
        material: "HRB500E",
        specification: "Φ14-普尺",
      },
      {
        name: "四级抗震螺纹钢",
        type: "热轧带肋钢筋",
        material: "HRB500E",
        specification: "Φ16-L12M",
      },
    ],
  
 
    [
      {
        name: "三级抗震螺纹钢",
        type: "热轧带肋钢筋",
        material: "HRB400E",
        specification: "Φ20-L12M",
      },
      {
        name: "三级抗震螺纹钢",
        type: "热轧带肋钢筋",
        material: "HRB400E",
        specification: "Φ20-L9M",
      },
    ],

    [
      {
        name: "三级抗震螺纹钢",
        type: "热轧带肋钢筋（盘卷）",
        material: "HRB400E",
        specification: "Φ10",
      },
      {
        name: "三级抗震螺纹钢",
        type: "热轧带肋钢筋（盘卷）",
        material: "HRB400E",
        specification: "Φ12",
      },
    ]
];

即将一个一维数组转为二维数组

不难发现，部分数组元素字段存在相同的值，我们以type来将这个数组变为二维数组

/*本该这样写，但是会发现报错，type未找到。原因就是oldArr[i+1]已经超出了oldArr，所以会报错*/

let newArr = [],tempArr = [];
for(let i=0;i<oldArr.length;i++){
  if(oldArr[i].type === oldArr[i+1].type){
    tempArr.push(oldArr[i]);
  }else {
    tempArr.push(oldArr[i]);
    newArr.push(tempArr.slice(0));
    tempArr.length = 0;
  }
}
console.log(newArr)


/*所以，我们可以将原来的数组长度+1，即oldArr.push({}),不用填任何数据，就增加一条空数据保证数组长度。接下来就可以这样写*/

let newArr = [],tempArr = [];
oldArr.push({});
for(let i=0;i<oldArr.length-1;i++){
  if(oldArr[i].type === oldArr[i+1].type){
    tempArr.push(oldArr[i]);
  }else {
    tempArr.push(oldArr[i]);
    newArr.push(tempArr.slice(0));
    tempArr.length = 0;
  }
}
console.log(newArr)

打印的结果就是newArr。

那么，又怎么将这个二维数组变回原来数组的格式呢，很简单的

let myArr = [];
myArr = [].concat.apply([],newArr);
console.log(myArr)

打印结果就是原有数组oldArr的格式

各位小伙伴去试试吧，亲测有效