原因

在代码中需要对路由数组进行过滤，前任写的代码太风骚，看着好头痛，所以研究一下Array.filter函数

原始代码

  handleFilterMenu (menuList) {
      return menuList.map(item => {
        if (!item.meta) {
          item.meta = {}
        }
        let hsaChild = false
        if (item.children && item.children.length) {
          hsaChild = true
          item.children = this.handleFilterMenu(item.children)
        }
        if (hsaChild && item.children.length === 0 ){  //子路由都不可到达，父控件隐藏
          return false
        }
        if (item.meta.key && this.authority.includes(item.meta.key)) {
          return item
        } else {
          return false
        }
      }).filter(item => item)
    },

问题: map返回的数组有对象还有false，到底filter之后是什么

先看看函数原型
filter(callbackfn: (value: T, index: number, array: T[]) => any, thisArg?: any): T[];
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

callbackfn 返回的类型是any?

ECMAScirpt5 中 Array 类中的 filter 方法使用目的是移除所有的 ”false“ 类型元素 (false, null, undefined, 0, NaN or an empty string)：

举个🌰

const links = [
  { textContent: 'abc' },
  { textContent: 'de' },
  { textContent: 'abcde' },
  { textContent: 'abc' },
  { textContent1: '-----' },
]
const de = links.map(link => {
  if (link.textContent) {
    return link.textContent
  } else {
    return false
  }
})
  .filter(it => Boolean(it))
console.log(de) //[ 'abc', 'de', 'abcde', 'abc' ]

let a = [1, 2, 'b', 0, {}, '', NaN, 3, undefined, null, 5]
console.log(a.filter(() => {
  return true
})) // [ 1, 2, 'b', 0, {}, '', NaN, 3, undefined, null, 5 ]
console.log(a.filter(it => it)) //[ 1, 2, 'b', {}, 3, 5 ]
console.log(a.filter(Boolean)) //[ 1, 2, 'b', {}, 3, 5 ]

从上面的代码可以看到 filter(it=>it) 效果等于 filter(it=> Boolean(it))

其中Boolean 是一个函数，它会对遍历数组中的元素，并根据元素的真假类型，对应返回 true 或 false.