如何用更简洁优雅的函数式写法从嵌套数组中查找目标元素？

你的核心思路（不扁平化数组、递归查找）是正确的，但确实可以通过拆分逻辑、语义化命名、简化递归结构来大幅提升可读性，同时保持函数式风格。下面是几种优化方案：

方案1：拆分职责+显式遍历（可读性最优） #

把单个元素的检查逻辑和数组遍历逻辑分开，用for...of做显式遍历，逻辑清晰直观：

const nestedArray = [
  [{ id: 1 }],
  [{ id: 2 }],
  [{ id: 3 }, [{ id: 4 }]],
  { id: 5 },
]

function findTarget(nestedArr, predicate) {
  // 专注处理单个元素：匹配则返回，是数组则递归查找，否则返回null
  const checkItem = (item) => {
    if (predicate(item)) return item;
    return Array.isArray(item) ? findTarget(item, predicate) : null;
  };

  // 遍历数组，逐个检查元素，找到结果立即返回
  for (const item of nestedArr) {
    const result = checkItem(item);
    if (result) return result;
  }

  return null;
}

// 测试
console.log(findTarget(nestedArray, (item) => item.id === 5)); // { id: 5 }

改进点： #

• 职责拆分：checkItem专注处理单个元素的匹配/递归逻辑，主函数负责数组遍历，代码结构更扁平
• 语义化命名：函数和变量名清晰表达用途，无需额外注释就能理解逻辑
• 性能友好：避免了原代码中[x, ...xs]每次创建新数组的开销
• 提前返回：找到匹配项后立刻终止遍历，减少不必要的计算

方案2：纯数组方法实现（函数式风格更纯粹） #

如果偏好更纯粹的函数式写法，可以用数组的map和find方法组合，完全避免循环语句：

const nestedArray = [
  [{ id: 1 }],
  [{ id: 2 }],
  [{ id: 3 }, [{ id: 4 }]],
  { id: 5 },
]

function findTarget(nestedArr, predicate) {
  // 定义单个元素的检查逻辑
  const check = (item) => {
    if (predicate(item)) return item;
    return Array.isArray(item) ? findTarget(item, predicate) : null;
  };

  // 先映射所有元素的检查结果，再找到第一个非null的结果
  return nestedArr.map(check).find(result => result !== null) ?? null;
}

// 测试
console.log(findTarget(nestedArray, (item) => item.id === 5)); // { id: 5 }

优势： #

• 完全遵循函数式编程范式，用声明式的数组方法替代命令式循环
• 代码简洁紧凑，每一步操作的语义明确（map转换结果，find筛选有效结果）

对比原实现的问题 #

你的原代码把数组解构、匹配判断、递归调用全部嵌套在三元表达式中，导致逻辑层级过深，阅读时需要反复拆解嵌套关系，可读性差。优化后的版本通过拆分逻辑块和语义化命名，把复杂的递归逻辑拆解成多个简单的小步骤，大幅降低了理解成本，同时保留了不扁平化数组、递归查找的核心思路。

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