React嵌套循环查找时如何返回匹配到的首个子级file对象

原有代码的document.files.find()仅作为外层documents.find()的判断条件，外层find只会返回符合判断的document对象，不会返回内层find的结果，因此无法直接拿到匹配的file对象。

以下是两种符合要求的实现，均只返回第一个匹配到的file对象，匹配成功后提前终止遍历：

方案1：链式写法（简洁易读） #

const match = data.documents
  .map(doc => doc.files.find(file => file.fileType === 'pdf'))
  .find(Boolean)

该写法先遍历每个document查找匹配的文件，过滤掉未匹配到的undefined值后取第一个有效结果，适合数据量较小的场景。

方案2：手动循环（性能最优） #

let match
for (const doc of data.documents) {
  const target = doc.files.find(file => file.fileType === 'pdf')
  if (target) {
    match = target
    break // 匹配成功立刻终止所有遍历
  }
}

该写法不会遍历全部document，找到目标后立即终止，适合documents列表量级较大的场景。

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