数组中数组/嵌套对象数组的遍历操作 总结以下方法
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: "请选择" });
}
}
};