ES6映射一个对象数组，返回一个带有新键的对象数组

Question

我有一个对象数组：

[
    {
        id: 1,
        name: 'bill'
    },
    {
        id: 2,
        name: 'ted'
    }
]

寻找一个简单的一行代码来返回：

[
    {
        value: 1,
        text: 'bill'
    },
    {
        value: 2,
        text: 'ted'
    }
]

那么我可以轻松地将它们注入到带有正确键的React下拉列表中。

我觉得这个简单的解决方案应该可行，但是我却收到了无效语法错误：

this.props.people.map(person => { value: person.id, text: person.name })

- Ben174

---

你需要将 person => ({... 改为 (person) => ({...。换句话说，需要用括号把对象文字括起来，否则JS会认为它是一个代码块的开头。 - user663031

Answer 1

你只需要用()将对象包裹起来。

var arr = [{
  id: 1,
  name: 'bill'
}, {
  id: 2,
  name: 'ted'
}]

var result = arr.map(person => ({ value: person.id, text: person.name }));
console.log(result)

- Nenad Vracar

---

谢谢！不太确定为什么需要使用括号，但确实是有效的。在使用JSX时，如果我将标签保持在同一行上，则不需要使用括号，所以我想也许同样适用于在同一行上的对象。 - Ben174

啊，从这篇文章中的内容来看，原文似乎是重复的：“否则花括号将被视为函数体。” 现在我理解了。再次感谢。 - Ben174

这也可以工作，但本质上只是编写代码的另一种方式。我添加了这个，因为OP没有理解括号，而我在解决自己的问题时遇到了这个线程：var result = arr.map((person)=>{ return {value:person.id, text:person.name }; }); - ViaTech

如果不想添加括号，那么可以使用"="代替":"。this.props.people.map(person => { value= person.id, text= person.name }) - Nitin Agarwal

@NitinAgarwal：你确定吗？你的建议对我不起作用。这是有道理的，因为我收到一个错误提示，说“value”和“text”未声明。 - Krisztián Balla

我们能否在这里使键是动态的？例如，从Person内部获取某些属性。 - Harsh Gundecha