新优化来的触不及防
要求:点击查看,菜单页面过滤,只展示operate为true的数据
难点在于:数据的每一层都有operate, 但是 只判断最后一层operate是否为true, 否则过滤掉整个item以级对应的父级
解决方法:
拿到整棵树,遍历数组,拿到children,继续遍历,拿到第二层的subArr
filterByOperateZero(data) {
let filteredData = []
for (let i = 0; i < data.length; i++) {
let children = data[i].children
let secondMenu = []
if (children && children.length) {
for (let j = 0; j < children.length; j++) {
let subArr = children[j].children
let isOpetare = this.validSub(subArr) || children[j].operate
if (isOpetare) {
secondMenu.push(children[j])
}
}
}
if (secondMenu.length) {
data[i].children = secondMenu
filteredData.push(data[i])
}
}
return filteredData
},
重点来了,由于要过滤掉operate为true的数据和父级, 需要将children[j]赋值给新数组secondMenu,当新数组有值,那么新数组赋值给数组data[i].children, 改的就是children,
validSub(subArr) {
return subArr.some(item => item.operate)
},
这句是精髓,判断children[j].children的operate是否为true,或者children本身是否为true,是就筛选出来
let isOpetare = this.validSub(subArr) || children[j].operate
js拆解数组扛大旗!
总结: 先递归替换最深层的children,再替换第二层的children