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

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

  • 因为在页面中使用了分页,所以在这里拼接了一下数组:(没使用到分页的就直接定义就行了)
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

第二种:

  • 使用了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,一只前端小菜鸡,欢迎你们点赞,交流 ❤数据库

相关文章
相关标签/搜索