JavaScript中Array.filter搭配async函数过滤数组结果不符合预期是什么原因

第一种写法错误的核心原因 #

• JavaScript原生的Array.filter()是同步方法，不会识别和等待回调函数返回的Promise
• 你给filter传入了async回调，所有async函数的返回值本质都是Promise对象，而在JS里，非空的Promise属于真值，所以filter会认为所有元素都符合条件，全部保留
• 你在filter外层加的await不会生效：因为filter返回的是普通数组，不是Promise，await处理非Promise值时会直接原样返回，所以你拿到的还是完整的原数组

补充说明：你当前写的filtrarCnpj函数里没有任何异步操作，完全不需要定义成async函数，多余的async关键字才导致返回值变成了Promise，这也是触发问题的直接原因。

第二种写法能正常运行的原因 #

第二种写法中，filter的回调不是async函数，所有判断逻辑都是同步执行的，回调直接返回true/false布尔值，filter可以正常根据返回的布尔值判断是否保留元素，所以得到了预期结果。

正确的异步过滤通用写法 #

如果后续你确实需要用异步逻辑过滤数组，可以先批量执行所有异步判断，再根据结果过滤原数组：

async function filtrarGruposComCnpj() {
  // 先批量执行所有异步判断，拿到所有元素的校验结果
  const resultList = await Promise.all(
    dadosGroups.map(group => filtrarCnpj(group.descricao))
  )
  // 再根据校验结果过滤原数组
  const gruposCnpj = dadosGroups.filter((_, index) => resultList[index])
  console.log(gruposCnpj)
}

内容的提问来源于stack exchange，提问作者Matheus Nascimento