有这样一个数组,如果他的子元素里的disabled是false 就把他筛选出来,并且把他的最上级的元素也保留,把disabeld不是false的过滤掉
const arr = [
{
key: '17',
value: '17',
label: 'Data Arch',
disabled: true,
children: [
{ key: '17', value: '17', label: 'Data Arch', disabled: true },
{
key: '8',
value: '8',
label: '留',
disabled: false,
children: [{ key: '9', value: '9', label: '留', disabled: false }],
},
],
},
{ key: '2160', value: '2160', label: 'Data Platform', disabled: true },
{ key: '25', value: '25', label: 'Enterprise Application', disabled: true },
{ key: '2161', value: '2161', label: 'Infrastructure', disabled: true },
{ key: '24', value: '24', label: 'Lark', disabled: true },
];
最后希望得到这样一个筛选结果🙏
const filters = [
{
key: '17',
value: '17',
label: 'Data Arch',
disabled: true,
children: [
{
key: '8',
value: '8',
label: '留',
disabled: false,
children: [{ key: '9', value: '9', label: '留', disabled: false }],
},
],
}
];
const arr = [
{
key: '17',
value: '17',
label: 'Data Arch',
disabled: true,
children: [
{key: '17', value: '17', label: 'Data Arch', disabled: true},
{
key: '8',
value: '8',
label: '留',
disabled: false,
children: [{key: '9', value: '9', label: '留', disabled: false}],
},
],
},
{key: '2160', value: '2160', label: 'Data Platform', disabled: true},
{key: '25', value: '25', label: 'Enterprise Application', disabled: true},
{key: '2161', value: '2161', label: 'Infrastructure', disabled: true},
{key: '24', value: '24', label: 'Lark', disabled: true},
];
function filterArr(arr) {
function filterData(node) {
if (!node.children) {
return node.disabled ? null : node;
} else {
let children = node.children.map(filterData).filter(item => item);
if (children.length > 0) {
return {...node, children}
} else if (!node.disabled) {
delete node.children
return node
}
return null
}
}
return arr.map(filterData).filter(item => item)
}
console.log(JSON.stringify(filterArr(arr)))
先定义一个新的数组filters,然后循环arr,在循环arr[i].children,判断children当中的disabled,为false的话push到filters中
这需要判断子元素是不是键值对。
只能是重新拼接键值对。
建议子元素如果是键值对,获取disable如果false就拼接
如果.child为空说明没有子元素,需要判断当前键值对是否改淘汰。
回退判断,最终得到全部要的false。
树或者栈实现。淘汰者砍掉或者出栈
循环arr 判断children当中的disabled,符合条件的放到filters 中
JavaScript数组筛选的两种方法
借鉴下
https://blog.csdn.net/m0_71563719/article/details/126770264
你可以使用 Array.prototype.filter() 方法来过滤数组中的元素。
例如:
const filters = arr.filter(item => {
// 判断 item.disabled 是否为 false
if (item.disabled === false) {
return true;
}
// 如果没有 children 属性,则返回 false
if (!item.children) {
return false;
}
// 如果有 children 属性,则递归调用 filter() 方法
// 只有当 children 中有 disabled 为 false 的元素时,才会返回 true
return item.children.some(child => child.disabled === false);
});
这样,filters 就会包含最终的筛选结果。
希望这能帮到你!
const arr = [
{
key: '17',
value: '17',
label: 'Data Arch',
disabled: true,
children: [
{ key: '17', value: '17', label: 'Data Arch', disabled: true },
{
key: '8',
value: '8',
label: '留',
disabled: false,
children: [{ key: '9', value: '9', label: '留', disabled: false }],
},
],
},
{ key: '2160', value: '2160', label: 'Data Platform', disabled: true },
{ key: '25', value: '25', label: 'Enterprise Application', disabled: true },
{ key: '2161', value: '2161', label: 'Infrastructure', disabled: true },
{ key: '24', value: '24', label: 'Lark', disabled: true },
];
const filter = (arr) => {
const arr1 = arr.map(item => {
if (item.disabled === false) return item;
if (!item.children) return false;
return item.children.filter(d => {
return !d.disabled
})
})
return arr1.filter(item => item)
}
console.log('filter', filter(arr));
function filterArray(arr) {
const result = [];
for (const item of arr) {
if (item.disabled === false || (item.children && item.children.some((child) => child.disabled === false))) {
result.push(item);
}
if (item.children) {
result.push(...filterArray(item.children));
}
}
return result;
}
const filters = filterArray(arr);
const arr = [
{
key: '17',
value: '17',
label: 'Data Arch',
disabled: true,
children: [
{ key: '17', value: '17', label: 'Data Arch', disabled: true },
{
key: '8',
value: '8',
label: '留',
disabled: false,
children: [{ key: '9', value: '9', label: '留', disabled: false }],
},
],
},
{ key: '2160', value: '2160', label: 'Data Platform', disabled: true },
{ key: '25', value: '25', label: 'Enterprise Application', disabled: true },
{ key: '2161', value: '2161', label: 'Infrastructure', disabled: true },
{ key: '24', value: '24', label: 'Lark', disabled: true },
];
//由于第一层是空数组 所以过滤第一层数组需要单独处理
let arr2 = arr.filter(item=>{
return (item.disabled == true &&item.children && item.children.length>0) || item.disabled == false
})
//调用过滤函数
this.filterFun(arr2)
//定义过滤函数处理除第一层之外的所有数据
function filterFun(arrList){
debugger
arrList.forEach(item=>{
if(item.children && item.children.length>0){
let childrenList = item.children.filter(item2=>{
return (item2.disabled == true &&item2.children && item2.children.length>0) || item2.disabled == false
})
item.children = childrenList
this.filterFun(item.children)
}
})
}
//打印console , arr2 为处理之后的数据
console.log(arr2)