JavaScript 函数式编程 - 嵌套循环

Question

假设我有一个 Array 的 Object 并且每个里面都有一个 Array 的对象。

let nestedObjects = [{
  name: '1',
  values: [{id: 1}]
},
{
  name: '2',
  values: [{id: 2}]
}]

现在，我想对每个 Object 的 values id 做一些事情。有点像这样

let nestedObjects = [{
    name: '1',
    values: [{
      id: 1
    }]
  },
  {
    name: '2',
    values: [{
      id: 2
    }]
  }
];

let someArray = [];
nestedObjects.forEach(obj => {
  obj.values.forEach(value => {
    someArray.push(value.id * 2);
  });
});

console.log('Values', someArray);

我可以将其更改为在 reduce 中使用 reduce 和可能的 map，但它仍然感觉笨拙并且不是真正的“功能性”。是否有不同的编写方式以使其更短且更易于阅读？

我想做一些类似的事情:

let someArray = nestedObjects.map(obj => obj.values)
.map(value => value.id * 2)

console.log('VALUES', someArray);

注意:其实不是上面的代码，更多的是FP的思维/编码方式。

Answer 1

使用Array#concat并传播以将子阵列展平为单个阵列。然后用第二个 map 迭代结果:

const nestedObjects = [{"name":"1","values":[{"id":1}]},{"name":"2","values":[{"id":2}]}];

const someArray = [].concat(...nestedObjects.map(obj => obj.values))
.map(value => value.id * 2);

console.log('VALUES', someArray);

从属性获取数组并将结果展平的组合称为 flatMap，因此您可以将代码提取到方法中:

const flatMap = (cb, arr = []) => [].concat(...arr.map(obj => cb(obj)));

重要说明:spread 参数不是堆栈安全的，这种 flatMap 方法将无法处理大量数据。

演示:

const nestedObjects = [{"name":"1","values":[{"id":1}]},{"name":"2","values":[{"id":2}]}];

const flatMap = (cb, arr = []) => [].concat(...arr.map(obj => cb(obj)));

const someArray = flatMap(({values}) => values, nestedObjects).map(value => value.id * 2);

console.log('VALUES', someArray);

顺便说一句 - 原生 JS Array.prototype.flatMap是 stage2 proposal ，它可能会成为 ES2018 或 ES2019 中的语言。