如何将我的JavaScript解决方案改造为函数式风格？

开发者阿泽

2026-5-28

嘿，这事儿好办！咱们用原生JavaScript的数组方法就能改成纯函数式的写法，完全不用手动维护数组和push元素，一步到位～

函数式风格实现方案

方案一：使用`flatMap`（推荐）

flatMap天生就是为这种“映射+扁平化数组”的场景设计的，它会先对每个元素执行映射逻辑，再自动将结果扁平化一层，完美匹配我们的需求：

function getItems() {
  return obj.field.flatMap(currentField => {
    // 严谨判断：仅当items是数组且非空时返回它，否则返回空数组（扁平化时会被忽略）
    return Array.isArray(currentField.items) && currentField.items.length 
      ? currentField.items 
      : [];
  });
}

方案二：兼容旧环境的`map + flat`组合

如果你的运行环境刚好不支持flatMap（不过Angular 5对应的浏览器环境基本都支持），可以用map先生成嵌套数组，再用flat(1)扁平化一层：

function getItems() {
  return obj.field
    .map(currentField => 
      Array.isArray(currentField.items) && currentField.items.length 
        ? currentField.items 
        : []
    )
    .flat(1);
}

逻辑说明

两种方案都去掉了手动维护的items变量，完全通过数组方法的链式调用/组合实现结果返回。
相比你原来的currentField.items && currentField.items.length判断，我们新增了Array.isArray()检查，能更严谨地过滤掉items: false这类非数组的假值，避免潜在的错误。
不符合条件的项会返回空数组，在扁平化过程中这些空数组会被自动忽略，不会影响最终结果。