如何提取嵌套对象options数组下所有fields字段并合并为新数组

你原先的代码存在两个核心问题：

1. obj.options.map(a => a.map(f => f.fields)) 中a是options数组里的单个option对象，不是数组，无法调用map方法，运行会直接报错
2. 后续使用Object.assign是对象合并逻辑，和你需要的数组合并需求完全不匹配

解法1：使用flatMap（最简洁，ES2019+支持） #

flatMap会先对数组执行map映射，再自动把结果扁平化一层，完美适配你的需求：

const final = obj.options.flatMap(option => option.fields);

执行后得到的final就是你要的一维数组，结构如下：

[
  { key: 'brand', label: 'brand' },
  { key: 'size', label: 'Size' },
  { key: 'gender', label: 'Gender' },
  { key: 'condition', label: 'Condition' }
]

解法2：兼容旧环境的reduce写法 #

如果运行环境不支持ES2019，可以用reduce配合数组合并实现相同效果：

const final = obj.options.reduce((result, option) => {
  return result.concat(option.fields);
}, []);

解法3：扩展运算符写法 #

也可以先通过map取出所有fields数组，再用扩展运算符展开合并：

const fieldArrays = obj.options.map(option => option.fields);
const final = [].concat(...fieldArrays);

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