数组中数组/嵌套对象数组的遍历操作

数组中数组/嵌套对象数组的遍历操作 总结以下方法

1.for i in arr (推荐)
2.arr.foreach(item=>{ item.foreach(item2=>{ } ) } )(注意:不能return)
3.for循环

数据结构starBox和相关代码如下(关键代码用作了标识):

  starBox: [
        {
          date: "今天",
          list: [
           {
              id: "004",
              select: "circle",
              color: "#CCC",
              title: "支付宝设计营销中心:超级营销集五福“背后的设计体系",
              date: "2018-02-26  15:12:30",
              distance: "0.3"
            },
            {
              id: "005",
              select: "circle",
              color: "#CCC",
              title: "支付宝设计营销中心:超级营销集五福“背后的设计体系",
              date: "2018-02-26  15:12:30",
              distance: "0.3"
            }
          ]
        },
        {
          date: "3月24日",
          list: [ {
              id: "001",
              select: "circle",
              color: "#CCC",
              title: "支付宝设计营销中心:超级营销集五福“背后的设计体系",
              date: "2018-02-26  15:12:30",
              distance: "0.3"
            },
            {
              id: "002",
              select: "circle",
              color: "#CCC",
              title: "支付宝设计营销中心:超级营销集五福“背后的设计体系",
              date: "2018-02-26  15:12:30",
              distance: "0.3",
              img: "http://mss.sankuai.com/v1/mss_51a7233366a4427fa6132a6ce72dbe54/newsPicture/05558951-de60-49fb-b674-dd906c8897a6"
            } ]
        }
          ]
        }
      ],
      allSelect: "circle",
      allColor: "#CCCCCC", //默认是个#CCC颜色的圆圈
      successNum: 0, //累计点击选择次数
      starList: []
    };
  },
  methods: {
    //改变选框状态
    changeStar(e) {
      //   console.log("index:", index);
      //   console.log("listIndex:", listIndex);
      console.log("changeStar:", e);
      var that = this;
      //得到点击的该下标
      var id = e.currentTarget.dataset.id;
      var starindex = e.currentTarget.dataset.starindex;
      var index = e.currentTarget.dataset.index;
      //得到选中状态
      var select = e.currentTarget.dataset.select;
      //得到选中状态颜色
      var color = e.currentTarget.dataset.color;
      console.log("id:", id);
      console.log("select:", select);
      console.log("color:", color);
      console.log("index:", index);
      console.log("starindex:", starindex);
      
      // 把新的值给新的数组
      var newList = that.starBox;
      console.log("newList:", newList);
      if (select == "circle") {
        var stype = "success";
        var sColor = "#FF698E";
      } else {
        var stype = "circle";
        var sColor = "#CCCCCC";
      }
      newList[starindex].list[index].select = stype;
      newList[starindex].list[index].color = sColor;
      //更新list
      that.starBox = newList;
      //遍历数组 判断是否需要全选
      that.countNum();
    },
    //全选
    clickAllSelect(e) {
      console.log("allSelect", e);
      var that = this;
      var allSelect = e.currentTarget.dataset.allselect; //得到现在选中状态
      var allColor = e.currentTarget.dataset.allcolor; //得到选中状态颜色
      console.log(allSelect);
      console.log(allColor);
      var arr = that.starBox;
      //先判断现在选中没
      if (allSelect == "circle") {
        //先把数组遍历一遍,然后改掉每一项select值和color值
        
        //1.for in 方法 改掉每一项select值和color值
        for (var i in arr) {
          console.log("stpe1", arr[i]["list"]);
          for (var j in arr[i]["list"]) {
            // console.log("stpe2",arr[i]['list'][j]);
            arr[i]["list"][j].select = "success";
            arr[i]["list"][j].color = "#F85B81";
          }
        }
        /
        var allselect = "success";
        var allcolor = "#F85B81";
        // 并非真实长度
        // that.successNum = that.starBox.length
        // console.log(" console.log(that.successNum)",that.successNum)
      } else {
        //取消全选
        /
        // 2.forEach方法
        arr.forEach(item => {
          item.list.forEach(item2 => {
            console.log(item2);
            item2.select = "circle";
            item2.color = "#CCCCCC";
          });
        });
        /
        // 3.for in 方法(date如果为string类型 报错,为数字类型ok)
        // for(var i in arr){
        //   for(var j in arr[i]){
        //       for(var z in arr[i][j]){
        //        arr[i][j][z].select ='circle'
        //        arr[i][j][z].color ='#CCCCCC'
        //       }
        //   }
        //   }
        /
        var allselect = "circle";
        var allcolor = "#CCCCCC";
      }
        (that.starBox = arr),
        (that.allSelect = allselect),
        (that.allColor = allcolor);
      //计算选择为成功状态的数量
      this.countNum();
    },
    //遍历数组list,countNum计算icon的type为success的数目
    countNum() {
      var that = this;
      var allNum = 0;
      var newList = that.starBox;
      newList.forEach(item => {
        console.log(item);
        item.list.forEach(item2 => {
          console.log("//", item2.select);
          if (item2.select == "success") {allNum++; }
        });
      });
      parseInt;
      console.log(allNum);
      that.successNum = allNum;
      // 判断是否需要全选
      console.log("successNum", that.successNum);
    },
    //全选删除 遍历数组
    deleteAllStar: function() {
      //没有选择的收藏不能提交
      console.log("-----------");
      var that = this;
      var arr = that.starBox;
      var lengths = that.starBox.list;
      if (that.successNum > 0) {
        //弹框提示
        wx.showModal({
          title: "提示",
          content: "确定要删除?",
          confirmText: "确定",
          cancelText: "取消",
          success: function(res) {
            console.log(res);
            if (res.confirm) {
              console.log("用户点击delete主操作");
              /
              // arr.forEach((item,key) =>{
              //   item.list.forEach((item2,key2)=>{
              //     if(item2.select =="success"){
              //       //  item.Remove(item2)
              //       // console.log('12323', arr[key]['list'][key2])
              //       arr[key]['list'].splice(key2,1)
              //     }
              //   })
              // })
              //1.for in 方法 删除符合条件 倒序删除//
              for (var i in arr) {
                for (var j = arr[i]["list"].length - 1; j >= 0; j--) {
                  if (arr[i]["list"][j].select == "success") {
                    arr[i]["list"].splice(j, 1);
                    console.log("666666666", arr[i]["list"]);  }  }  }
              
              that.starBox = arr;
            } else {
              console.log("用户点击辅助操作");
            }
            //调用计算success数目方法 判断是否需要全选
            that.countNum(); }  });
      } else {
        wx.showToast({ title: "请选择"  });
           } 
     }

};



    原文作者:夏天Lola(付善兰)
    原文地址: https://blog.csdn.net/weixin_40552099/article/details/88776362
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞