在项目上,会遇到将一个一维数组的数据,按板块的分布排版这一类的需求。这种需求的数据往往就是数组元素中含有相同字段,以这相同字段分类即可达到需求。
以以下数据为例:
将
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的格式
各位小伙伴去试试吧,亲测有效