JavaScript：从对象数组的对象数组中，提取属性的值作为数组

debugcn 发表于 Dev

金包迪

我有一个具有以下结构的 JavaScript 对象数组：

somedata = {
  foo: {
    bar: [
      {
        baz: [
          {
            someprop: 'a'
          },
          {
            someprop: 'b'
          },
          {
            someprop: 'c'
          }
        ]
      },
      {
        baz: [
          {
            someprop: 'd'
          },
          {
            someprop: 'e'
          },
          {
            someprop: 'f'
          }
        ]
      }
    ]
  }
}

我想someprop从这个 JavaScript 对象中提取字段作为数组['a', 'b', 'c', 'd', 'e', 'f']

目前，这是我将someprop字段提取为数组的代码逻辑：

const result = []
somedata.foo.bar.forEach(x => {
  x.baz.forEach(y => {
    result.push(y.someprop)
  })
})
console.log(result) // prints ["a", "b", "c", "d", "e", "f"]

我试图通过创建一个函数来使代码更可重用：

function extractToArray(data, arr, prop) {
  let result = []
  data.forEach(x => {
    x[arr].forEach(y => {
      result.push(y[prop])
    })
  })
  return result;
}
console.log(extractToArray(somedata.foo.bar, 'baz', 'someprop'))

但是有没有更简洁、优雅、更干净的方法来实现这一目标？

注意： 可能的重复项涵盖对象数组，但这是关于对象数组的对象数组（因此简单的map解决方案不起作用）。

字符串

你可以使用flatMap：

const somedata = {foo:{bar:[{baz:[{someprop:"a"},{someprop:"b"},{someprop:"c"}]},{baz:[{someprop:"d"},{someprop:"e"},{someprop:"f"}]}]}};
const result = somedata.foo.bar.flatMap(({baz}) => baz.map(({someprop}) => someprop));
console.log(result);

请注意，目前并非每个浏览器都支持此功能，因此您可能需要使用 polyfill。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。