两种方法将一维数组按照条件重组为二维数组

2,416 阅读1分钟

   由于我们的数据是后台从数据库读取发送过来的,所以是个一维数组,因此之前在渲染的时候就都是散的,而我这边想要我的数据在显示的时候是根据其申请时间显示的,就像商城生成的订单那样,一个订单显示多个商品,因此在这边就需要将一维数组按照条件重组,操作如下:

  • 由于在页面中使用了分页,因此在这里拼接了一下数组:(没使用到分页的就直接定义就好了)
const a = this.data.applyList.concat(data.result);

第一种:

  • 使用map方法按照条件遍历数组并过滤得到一个含有过滤条件的新数组,ps:过滤条件多次出现时只取它第一次出现时的index
 const group = a.map(el => el.receiveTime).filter((el,i,curArr) => curArr.indexOf(el) === i)
  • 创建一个长度与上述过滤得出的数组长度相同的空数组
 let list = Array.from(Array(group.length)).map(() => Array(0))
  • 遍历原始数组a,将a的值根据过滤条件拆分push到list数组中
 a.forEach((el) => list[group.indexOf(el.receiveTime)].push(el))

   因为第一步定义数组实在算不上什么操作,所以总结来讲就是三行代码实现将一维数组按照条件重组为二维数组。 大家按照自己的需求套用就可以了。

第二种:

  • 使用了es6的Object.values()方法
返回数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值

var arrayTwo = Object.values(a.reduce((res, item) => {  
  res[item.receiveTime] ? res[item.receiveTime].push(item) : res[item.receiveTime] = [item]; 
   return res;          
}, {}));

   

这里是MiaoWu,一只前端小菜鸡,欢迎大家点赞,交流 ❤