如何将含数组值的对象数组扁平化提取为单一数组？

问题分析 #

你要处理的是由单键值对象组成的数组，每个对象的值都是单元素数组，目标是把这些元素提取合并成一维数组。你之前的尝试问题出在：

• 第一种方法返回的是二维数组（[[1],[5],[2],[4]]），缺少扁平化步骤；而且用Object.keys(content)遍历数组索引没必要，直接遍历数组元素更直观。
• 第二种flatten函数是为带children属性的嵌套对象设计的，和你的数组结构完全不匹配，所以无效。

正确解法 #

以下几种简单方法都能达到目标：

方法1：用flatMap一步到位（最简洁）

const content = [
    { "chocolate" : [1] },
    { "banana"    : [5] },
    { "soap"      : [2] },
    { "tea"       : [4] },
];

const result = content.flatMap(item => Object.values(item)[0]);
console.log(result); // [1,5,2,4]

flatMap会先对每个数组元素执行map操作，再自动扁平化一层，刚好适配你的场景。

方法2：用reduce累加元素

const result = content.reduce((total, item) => {
  total.push(...Object.values(item)[0]);
  return total;
}, []);

通过累加器数组，把每个对象里的数组元素展开后加入累加器。

方法3：改进你最初的写法

对原map结果做扁平化处理，同时直接遍历数组元素：

const result = content.map(item => Object.values(item)[0]).flat();

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