Question

我有一个这样的数组：

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

获得仅foo值数组的最简洁和ES6方法是什么？

预期结果将是：

[1, 3]

Answer 1

使用.map()方法循环浏览项目。

简单地说：

map()方法创建一个新数组，其结果是在调用数组中的每个元素上调用提供的函数。

- MDN web docs

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

这是一种在JavaScript中访问对象的简洁方法。这是代码：

＆＃13;

let array = [
  {foo: 1, bar: 2},
  {foo: 3, bar: 4}
]

console.log(array.map( e => e.foo ))

＆＃13;

Answer 2

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

+-----+--------------------------------+
| #   | Date                           |
+-----+--------------------------------+
| 1   | [datetime.date(2018, 4, 18),   |  
|     |  datetime.date(2018, 5, 15),   |
|     |  datetime.date(2018, 5, 16),   |
|     |  datetime.date(2018, 5, 17)]   |
+-----+--------------------------------+

           |
           |
           v

+-----+----------------+
| #   | Date           |
+-----+----------------+
| 1   | 2018-4-18      |
+-----+----------------+
| 2   | 2018-5-15      |
+-----+----------------+
| 3   | 2018-5-16      |
+-----+----------------+
| 4   | 2018-5-17      |
+-----+----------------+

尝试避免编写const x = [{foo: 1, bar: 2}, {foo: 3, bar: 4}] x.map(entry => entry.foo)循环也被认为是“现代的”。

Answer 3

您可以使用destructuring ~~assignment~~并使用Array#map返回此属性。

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

Answer 4

扩大lipp的回答：

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

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

从ES6中的对象数组中获取具有一个属性的数组

4 个答案: