树状数组过滤

187 阅读1分钟

这是一个树状数组,需要在数组中过滤出 isShowtrue 的元素,当对象中的 children 中的元素的 isShow 都为 false 时,当前对象也要过滤掉。

guid 就是一个 uuid 函数

namedelete 的表示要删除

const arr = [
  {
    id: guid(),
    name: 'fff',
    isShow: true,
    children: [
      {
        id: guid(),
        name: 'delete',
        isShow: true,
        children: [
          {
            id: guid(),
            isShow: false,
            children: [
              {
                id: guid(),
                isShow: true,
              },
            ],
          },
        ],
      },
      {
        name: 'eee',
        id: guid(),
        isShow: true,
      },
    ],
  },
  {
    id: guid(),
    name: 'ggg',
    isShow: true,
    children: [
      {
        id: guid(),
        name: 'delete',
        isShow: true,
        children: [
          {
            id: guid(),
            isShow: false,
          },
        ],
      },
      {
        id: guid(),
        name: 'bbb',
        isShow: true,
        children: [
          {
            id: guid(),
            isShow: true,
            children: [
              {
                id: guid(),
                name: 'delete',
                isShow: false,
              },
              {
                id: guid(),
                isShow: true,
              },
            ],
          },
        ],
      },
    ],
  },
  {
    id: guid(),
    name: 'ccc',
    isShow: true,
  },
]

不多废话直接上代码

const deleteObj = (data) => {
  // 判断 children 里面是否需要过滤
  const IsShow = (arr) => {
    return arr.some((v) => {
      // 先判断当前对象是否要显示否则直接 false
      if (v.isShow) {
        // 如果要显示则判断是否有 children
        if (v.children) {
          // 有则继续递归去判断,并返回结果
          return IsShow(v.children)
        }
        // 没有 children 直接 true
        return true
      }
      return false
    })
  }

  return data.filter((item) => {
    // 先判断对象是否显示
    if (item.isShow) {
      // 在去判断是否有 children ,没有直接返回 true
      if (item.children) {
        // 有则去递归查找 children 中所有的元素是有要显示的,否则直接 false
        if (IsShow(item.children)) {
          // 如果有要显示的,则递归去过滤掉 children 中的元素并返回重新赋值 children
          item.children = deleteObj(item.children)
          // 最后返回该 对象的 isShow
          return item.isShow
        }
        return false
      } else {
        return true
      }
    }
    return false
  })
}