从对象数组中获取新数组[重复]答案

【问题标题】：Get new array from array of objects [duplicate]从对象数组中获取新数组[重复]
【发布时间】：2019-06-28 06:50:27
【问题描述】：

我有一个数组，里面有另一个数组。

[
    [
        {
          "userId": 1,
          "title": "title 1",
        },
        {
          "userId": 2,
          "title": "title 2",
        }
    ],
    [
        {
          "userId": 3,
          "title": "title 3",
        }
    ]
]

我正在尝试仅使用 userId 获取一个新数组。例如

[
  { "userId": 1 },
  { "userId": 2 },
  { "userId": 3 }
]

array.map(o => o.userId) 适用于对象数组，但不知道如何进入数组。

感谢任何帮助

【问题讨论】：

使用 for 循环或在后端根据需要准备数据
Array.prototype.flat()
JavaScript flattening an array of arrays of objects 和 Merge/flatten an array of arrays in JavaScript? 和 How to flatten nested array in javascript? 的可能重复

标签： javascript arrays

【解决方案1】：

您必须先flat 数组：

const data = [
    [
        {
          "userId": 1,
          "title": "title 1",
        },
        {
          "userId": 2,
          "title": "title 2",
        }
    ],
    [
        {
          "userId": 3,
          "title": "title 3",
        }
    ]
]

const result = data.flat().map(({userId}) => ({userId}));
console.log(result);

【讨论】：

从字面上输入相同答案的一半。这是实现结果的最简单方法。
同样的答案。啊啊啊！！！ ?

【解决方案2】：

您可以使用array#concat 展平数组，然后使用解构和array#map 生成数组。

const data = [ [ { "userId": 1, "title": "title 1", }, { "userId": 2, "title": "title 2", } ], [ { "userId": 3, "title": "title 3", } ] ],
      result = [].concat(...data).map(({userId}) => ({userId}));
console.log(result);

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

【讨论】：

【解决方案3】：

Array.prototype.flat 相当新；如果你不能使用它，你可以使用reduce和map的组合：

const data = [
    [
        {
          "userId": 1,
          "title": "title 1",
        },
        {
          "userId": 2,
          "title": "title 2",
        }
    ],
    [
        {
          "userId": 3,
          "title": "title 3",
        }
    ]
]

const userIds = data.reduce((_, a) => {
	return _.concat(a.map(({ userId }) => ({ userId })))
}, [])

console.log(userIds)

map 在reduce 调用中的一个好处是，您只需对数组进行一次迭代而不是链接。这将比链接数组方法在更大的数组上具有更好的性能。

^{假设你的数据结构只有一层深！}

【讨论】：

您为封闭数组迭代一次，然后使用 .map 迭代 each 元素。如果有的话，我希望这会稍微慢一些，因为它需要为每个内部元素迭代创建一个函数。
@NikKyriakides 并不是说 jsperf 是这个主题的终极目标，但我决定 run this through and check flat vs this method.。至少在这种情况下，reduce 要快得多。
真的吗？有趣的。现在无法检查您的基准，但如果您这么说的话。
老实说，我也很惊讶！

【解决方案4】：

另一个使用Array.reduce，用于浏览器that don't support Array.flat.

const data = [
  [
    {
      "userId": 1,
      "title": "title 1",
    },
    {
      "userId": 2,
      "title": "title 2",
    }
  ],
  [
    {
      "userId": 3,
      "title": "title 3",
    }
  ]
]

const result = data.reduce((arr, i) => {
  return arr.concat(i.map(({ userId }) => ({ userId })))
}, [])

console.log(result)

【讨论】：

【解决方案5】：

只需将所有内容放在一个新数组中即可：)

let arr = [
    [
        {
          "userId": 1,
          "title": "title 1",
        },
        {
          "userId": 2,
          "title": "title 2",
        }
    ],
    [
        {
          "userId": 3,
          "title": "title 3",
        }
    ]
]

let newArr = []
arr.forEach(i => i.forEach(o => newArr.push(o)))
console.log(newArr.map(o => o.userId))

【讨论】：