从带有对象的嵌套数组中提取字段值答案

【问题标题】：Extracting a field value from a nested array of arrays with objects从带有对象的嵌套数组中提取字段值
【发布时间】：2021-10-04 00:29:02
【问题描述】：

一直在尝试从没有运气的字段中提取值。尝试通过嵌套使用 map 函数，以及连接字段以尝试实现我的结果，但没有运气。

我正在寻找一个与此结构几乎相同的对象：

[{ 
   name: 'sean', 
   age: 26, 
   address: 
      [{ 
         street: 'red'
       }, 
       { 
         street: 'blue'
       }]
}];

从这个结构中，我希望能够提取街道值并将其插入到一个新数组中。所以结果应该是：

const newArray = ['red', 'blue'];

地址字段内部可以包含多个对象，因此该解决方案能够扩展为一对多。

【问题讨论】：

使用.flatMap()
如果newArray = ['red', 'blue']是实际的预期结果，那么一个简单的.map()就足够了。如果有更多“人”，那么每个“人”都需要另一个.map()。所以... - 到目前为止，您尝试过什么来自己解决这个问题？
我一直在尝试使用.find、.flat、.flatMap、.map 和.concat，但肯定是用错了。未能按照建议从.map 或.flatMap 获得预期结果，但会再试一次
How do I ask a good question? -> 添加一个minimal reproducible example（您最有希望的尝试），显示实际问题/错误。

标签： javascript typescript

【解决方案1】：

const input = [
  {
    name: 'sean',
    age: 26,
    address: [
      {street: 'red'},
      {street: 'blue'}
    ]
  },
  {
    name: 'foo',
    age: 1,
    address: [
      {street: 'yellow'},
      {street: 'green'}
    ]
  }
];

const newArray = input.flatMap(({address}) => address.map(({street}) => street));
console.log(newArray);

Array.prototype.flatMap 接受一个回调函数返回一个值数组，然后返回一个由回调返回的数组内的所有值组成的数组。换句话说，array.flatMap(callback) 在语义上等价于array.map(callback).flat()。

您在评论中提到尝试使用reduce 和concat。不过根据the MDN documentation：

var arr = [1, 2, 3, 4];

arr.flatMap(x => [x, x * 2]);
// is equivalent to
arr.reduce((acc, x) => acc.concat([x, x * 2]), []);
// [1, 2, 2, 4, 3, 6, 4, 8]
但是请注意，这对于大型数组来说是低效的，应该避免：在每次迭代中，它会创建一个必须进行垃圾回收的新临时数组，并将当前累加器数组中的元素复制到一个新数组中只是将新元素添加到现有数组中。

【讨论】：