FlatMap 与Reduce 从嵌套对象中提取数据

Question

我有一个这样的数据集，其中可能有多个

testResults

数组元素，以及 1 个或多个

response

数组元素；我想将所有潜在的

completionDate

值提取到自己的数组中。

const testResults = [
  {
    "value": {
      "data": {
        "response": [
          {
            "completionDate": "2024-10-10T17:44:00",
          },
          {
            "completionDate": "2024-10-11T17:44:00",
          }
        ]
      }
    }
  },
  ...
];

我很好奇实现这一目标的最有效/高效的方法，并且我的团队的其他成员也可以阅读。

我在使用

map

和

flatMap

来完成此类事情方面拥有丰富的经验，但最近更多地使用

reduce

，想知道其中一种是否比另一种更有优势，以及是否还有其他我没有考虑过的方法。

flatMap

const timestamps = testResults.flatMap(result => 
  result.value.data.response.map(check => check?.completionDate)
);

reduce

const timestamps = testResults.reduce((acc, res) => {
  res.value.data.response.forEach(check => {
    acc.push(check.completionDate);
  });
  return acc;
}, []);

我确实在它们每个周围使用了

console.time

并发现

地图：0.103ms

减少：0.067ms

这真的表明reduce 更高效吗？

Answer 1

是的，

reduce()

是王者，通常比任何其他创建中间数组的方法更快

` Chrome/130
---------------------------------------------------------------------------------------
>                 n=1        |       n=10        |       n=100       |      n=1000     
reduce()    ■ 1.00x x10m 240 | ■ 1.00x   x1m 260 | ■ 1.00x x100k 269 | ■ 1.00x x10k 254
flatMap()     6.21x  x1m 149 |   3.92x x100k 102 |   3.54x x100k 951 |   3.66x x10k 930
--------------------------------------------------------------------------------------- `

游乐场开放

const $chunk = () => [{"value": {
      "data": {
        "response": Array.from({length: 10}, () => ({completionDate: new Date}))
      }
  }}];
const $input = [];

// @benchmark flatMap()
$input.flatMap(result => 
  result.value.data.response.map(check => check?.completionDate)
);

// @benchmark reduce()
$input.reduce((acc, result) => {
  result.value.data.response.forEach(check => {
    acc.push(check.completionDate);
  });
  return acc;
}, []);

/*@skip*/ fetch('https://cdn.jsdelivr.net/gh/silentmantra/benchmark/loader.js').then(r => r.text().then(eval));