Question

我有一个对象数组，类似于此：

fruits = [
  { name: apple, color: red }, {name: lemon, color: yellow } etc.
]

我正在尝试使用map来获取仅包含颜色的新数组，例如

fruitColors = ['red', 'yellow']

我是ES6的新手，它的语法是什么？

Answer 1

const fruits = [
  { name: 'apple', color: 'red' }, 
  { name: 'lemon', color: 'yellow' }
];

console.log(fruits.map(fruit => fruit.color));

// OR EVEN SHORTER USING DESTRUCTURING
console.log('USING DESTRUCTURING');
console.log(fruits.map(({color}) => color));

Answer 2

您可以只从地图返回.color属性：

const fruitColors = fruits.map(f => f.color);

还可以使用lodash或underscore通过以下方式实现相同目的：

const fruitColors = _.map(fruits, 'color');

Answer 3

fruits.map(fruit => fruit.color)

Answer 4

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

所以，基本上它是这样的：

let colorsArray = fruits.map( (obj) => { 
return obj.color;
}

在es6中，当您有一个仅带有return语句的匿名函数时，您可以省略函数方括号，省略参数方括号（假设您只有一个参数，在这种情况下您必须这样做）和return语句，这也使得可以在不损失可读性的情况下将它们全部写在同一行上，因此它变为：

let colorsArray = fruits.map( obj => obj.color );

如果您不熟悉箭头函数的语法，建议您阅读更多有关它的内容（Cheap Bots Done Quick是一个不错的开始）。

Javascript使用ES6映射从对象数组中提取键

4 个答案: