数组中数组/嵌套对象数组的遍历操作_数组中嵌套数组如何遍列

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

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: "请选择"  });
           } 
     }

};



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216