javascript - 将嵌套对象数组值放入另一个数组

Question

这类似于 this question ，但略有不同，因为数组旁边还有其他对象值，我似乎无法弄清楚获得所需内容的精确语法。

我有这样的东西:

const metadata = [
  {
    stepName: 'Step one',
    controls: [
      {fieldName: 'one', label: 'Field One', type: 'input'},
      {fieldName: 'two', label: 'Field Two', type: 'multiline'}
    ]
  },
  {
    stepName: 'Step two',
    controls: [
      {fieldName: 'three', label: 'Field Three', type: 'input'},
      {fieldName: 'four', label: 'Field Four', type: 'multiline'}
    ]
  }
]

...我想将 fieldName 的所有值都放入自己的数组中，这样我就可以得到如下内容:

someFieldArray = ['one', 'two', 'three', 'four']

我几乎每一次尝试都会在某个地方造成窒息。我知道我已经接近于使用迭代和解构的组合，但似乎不能完全正确地获得精确的语法和组合。我正在使用使用 Babel 转译的 ES2015 (6)。感谢您提供有关如何完成此操作的任何帮助!我可以先将元数据解构为一个对象，如果这会让事情变得更容易的话 ({...metadata})。

Answer 1

在 ES5 中，你可以这样写。

var metadata = [{ stepName: 'Step one', controls: [{ fieldName: 'one', label: 'Field One', type: 'input' }, { fieldName: 'two', label: 'Field Two', type: 'multiline' }] }, { stepName: 'Step two', controls: [{ fieldName: 'three', label: 'Field Three', type: 'input' }, { fieldName: 'four', label: 'Field Four', type: 'multiline' }] }],
    result = metadata.reduce(function (r, a) {
        return r.concat(a.controls.map(function (b) { return b.fieldName; }));
    }, []);

document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');