展平数组，但使用子数组作为基础

Question

我们正在尝试获取具有以下格式的数组：

[
{batchId: 123, files: [{fileName: 'fileA.txt'}, {fileName: 'fileB.txt'}],
{batchId: 456, files: [{fileName: 'fileC.txt'}, {fileName: 'fileD.txt'}],
]

并将其展平，表示为：

[
{batchId: 123, fileName: 'fileA.txt'},
{batchId: 123, fileName: 'fileB.txt'},
{batchId: 456, fileName: 'fileC.txt'},
{batchId: 456, fileName: 'fileD.txt'},
]

我们希望有一种更优雅的方式使用预先存在的库（例如 Ramda 或 Lodash）来转换此数据，但是任何 javascript 实现都可以。

Answer 1

在 ES6 中，您可以使用嵌套 Array.map() calls and flatten the resulting sub-arrays by spreading into Array.concat():

const data = [{batchId: 123, files: [{fileName: 'fileA.txt'}, {fileName: 'fileB.txt'}]},{batchId: 456, files: [{fileName: 'fileC.txt'}, {fileName: 'fileD.txt'}]}];

const result = [].concat(...
  data.map(({ batchId, files }) => 
    files.map(({ fileName }) => ({ batchId, fileName })
  )));

console.log(result);

Answer 2

您可以使用 reduce() 和 map() 方法以及 return 新数组。

const data = [
{batchId: 123, files: [{fileName: 'fileA.txt'}, {fileName: 'fileB.txt'}]},
{batchId: 456, files: [{fileName: 'fileC.txt'}, {fileName: 'fileD.txt'}]},
]

const result = data.reduce((r, e) => {
  r.push(...e.files.map(o => Object.assign({}, o, {batchId: e.batchId})))
  return r;
}, [])

console.log(result)

Answer 3

var arr = [
    {batchId: 123, files: [{fileName: 'fileA.txt'}, {fileName: 'fileB.txt'}]},
    {batchId: 456, files: [{fileName: 'fileC.txt'}, {fileName: 'fileD.txt'}]},
];

function flatten(array) {
  return array.reduce(function(newArray, item) {
      return newArray.concat(item.files.map(function(file) { 
          return {
             batchId: item.batchId,
             fileName: file.fileName
          };
     }));
  }, []);
}

console.log(flatten(arr));

Answer 4

你也可以使用reduce(), the spread operator, map() and Object.assign()你可以达到你想要的结果。

演示

const arr = [{
  batchId: 123,
  files: [{
    fileName: 'fileA.txt'
  }, {
    fileName: 'fileB.txt'
  }]
}, {
  batchId: 456,
  files: [{
    fileName: 'fileC.txt'
  }, {
    fileName: 'fileD.txt'
  }]
}];


let result = arr.reduce((r, o) => {
  return [...r, ...o.files.map(v => {
    return Object.assign(v, {
      batchId: o.batchId
    });
  })];
}, []);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 5

另一种方法是使用 R.chain，它有效地将提供的函数映射到列表上以生成列表列表，然后将结果展平。

const data =
  [ {batchId: 123, files: [{fileName: 'fileA.txt'}, {fileName: 'fileB.txt'}]}
  , {batchId: 456, files: [{fileName: 'fileC.txt'}, {fileName: 'fileD.txt'}]}
  ]

const fn =
  R.chain(({batchId, files}) => R.map(R.assoc('batchId', batchId), files))

console.log(fn(data))

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

在未来的某个时候，您可能会使用 proposed Array.prototype.flatMap 而不是 R.chain。

展平数组，但使用子数组作为基础

Flatten array, but using sub-array as basis

javascript

arrays

transformation

lodash

ramda.js