关于微信小程序的数组归类及遍历

微信小程序 专栏收录该内容
5 篇文章 0 订阅

数组归类

将相同字段的数组归为一类,可以用CSS自带的函数forEach()
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
在这里插入图片描述

不推荐写法

调用

let resultDataDeal = dataDeal(curData);
dataDeal(data){
    let listArr = [];
    data.forEach(function(value,index){
      let obj = [];
      for(let i=0;i<listArr.length;i++){
        // 对比相同的字段key,相同放入对应的数组
        if(listArr[i][0].userName == value.userName){
          listArr[i].push(value);
          return;
        }
      }
      // 第一次对比没有参照,放入参照
      obj.push(value);
      listArr.push(obj);
 
    });
    return listArr;
};
 

推荐写法

调用

let resultDataDeal = dataDeal(curData);
dataDeal(data) {
  let listArr = [];
  data.forEach(function(value,index){
    let obj = [];
    for(let i=0;i<listArr.length;i++){
      // 对比相同的字段key,相同放入对应的数组,第一次字段值不存在,不可能进入if,往下面走
      if(listArr[i].classid == value.classid){
        listArr[i].listInfo.push({
          content: value.content,
          deadtime: value.deadtime
        })
        return;
      }
    }
    // 第一次对比没有参照,放入参照
    // obj.push(value);
    listArr.push(({
      classid: value.classid,
      listInfo: [{
        content: value.content,
        deadtime: value.deadtime
      }]
    }));
  });
  return listArr;
},

双层数组遍历

关于上述推荐与不推荐写法

不推荐写法是因为 在个人尝试下,在wxml没有可能打印出双层数组(不知道是设定还是什么,反正各种发发都试过了还是不行,最后只好改写函数)

推荐写法是因为方便打印

双层遍历数组打印(利用wx:for-item='array’自己设定item名称方便第二层打印)

<view>
  <block wx:for="{{homework}}" wx:key="id"  >
  <text>{{item.classid}}</text>
     <view wx:for="{{item.listInfo}}" wx:for-item='array' wx:key='ID'>
        <text>{{array.content}}</text>
        <text>{{array.deadtime}}</text>
     </view>
  </block>
</view>

最后结果 成功实现按班级分类
成功实现按班级分类

  • 0
    点赞
  • 0
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值