在ES6中，从对象数组中获取一个属性的数组

Question

我有一个这样的数组:

[  {foo: 1, bar: 2},  {foo: 3, bar: 4}]

如何使用最简洁的ES6方式获取仅包含foo值的数组？

期望的结果应该是：

[1, 3]

- Juicy

---

data.map(({foo}) => foo); - Nenad Vracar

请使用搜索功能 :) - Felix Kling

Answer 1

使用 .map() 方法遍历数组。

简单来说：

map() 方法将调用提供的函数的结果作为新数组返回，该函数在每个元素上调用。

- MDN Web 文档

该方法允许对数组中的每个元素调用所提供的回调函数一次。它创建由映射元素组成的新数组。 您可以将 element 和 index 都作为回调的参数传递。后者是可选的（当您在回调中不需要它时）。

这是在 JavaScript 中访问对象的清晰方式。以下是代码：

let array = [
  {foo: 1, bar: 2},
  {foo: 3, bar: 4}
]

console.log(array.map( e => e.foo ))

- Ivan

Answer 2

你可以使用一种解构 赋值的方式，并使用Array#map返回此属性。

var objects = [{ foo: 1, bar: 2 }, { foo: 3, bar: 4 }],
    array = objects.map(({ foo }) => foo);

console.log(array);

- Nina Scholz

Answer 3

Array.prototype.map方法适用于将一个数组映射/转换为另一个相同大小的数组。您传入一个函数，该函数将从数组中的一个元素转换为一个新元素。截至2018年，使用所谓的“胖箭头”语法定义匿名函数进行转换被认为是“现代”的做法：

const x = [{foo: 1, bar: 2}, {foo: 3, bar: 4}]
x.map(entry => entry.foo)

尝试避免编写 for 循环也被认为是“现代化”的做法。

- lipp

---

虽然这段代码片段可能解决了问题，但它并没有解释为什么或者如何回答这个问题。请在您的代码中包含解释，因为这真的有助于提高您的帖子质量。请记住，您正在为未来的读者回答问题，而这些人可能不知道您的代码建议的原因。标记者/审核员：对于仅包含代码的答案，请进行负投票，而不是删除！ - Luca Kiebel

Answer 4

扩展lipp的答案：

const x = [{foo: 1, bar: 2}, {foo: 3, bar: 4}];
var y = x.map(entry => entry.foo);

第一行创建了一个对象数组。 第二行使用压缩的 lambda 表达式从 x 数组返回 foo 属性的数组，并将其赋值给 y。

- Diego Victor de Jesus

---

这并没有回答问题。 - Luca Kiebel

结果是 [[1, 3]]。 - Nina Scholz

Lipp的回答完全正确。 - Luca Kiebel

是的，我正在将一个数组推入另一个数组中。现在已修复。 - Diego Victor de Jesus