js做一个数组筛选。

有这样一个数组,如果他的子元素里的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)