JavaScript中如何用.map方法将对象字段作为新映射的键？

嘿，我来帮你理清楚问题出在哪，以及怎么写出正确的代码～

先说说你两次尝试的错误原因 #

第一次尝试：input.map( e => { e.name:e.value}) #

这里有两个明显的问题：

• 箭头函数用{}包裹代码时，必须显式写return，不然函数默认返回undefined；
• 你写的e.name是固定的键名，不是动态读取e.key的值——就算语法正确，得到的结果也是[{name: "John"}, {name: "Chicago"}]，完全不符合你的预期。

第二次尝试：input.map(({key, value}) => ({key:value})) #

这个写法的核心问题是对象字面量的键名默认会被当作字符串。你这里的key并没有被当成变量解析，而是直接变成了字符串"key"，所以最终得到的是[{key: "John"}, {key: "Chicago"}]，自然不是你想要的结果。

正确写法：用ES6计算属性名 #

要让对象的键名动态取变量的值，你需要用到ES6的计算属性名——把变量放在方括号[]里，这样JS就会把它当成变量解析，而不是固定字符串。

最简洁的写法（解构参数+计算属性） #

const input = [{key:"name", value:"John"}, {key:"city", value:"Chicago"}];
const output = input.map(({ key, value }) => ({ [key]: value }));
console.log(output); // 输出：[{name:"John"}, {city:"Chicago"}]

不用解构的写法（适合新手理解） #

如果你暂时对解构不太熟悉，也可以直接访问对象的属性：

const output = input.map(item => ({ [item.key]: item.value }));

补充：为什么要加括号？ #

箭头函数里直接返回对象字面量时，必须把对象用()包起来。因为JS会把单独的{}当成函数的代码块，而不是对象。比如() => { [key]: value }会被解析成一个空代码块（里面的[key]: value是标签语句），返回undefined；而() => ({ [key]: value })才会正确返回这个动态键的对象。

内容的提问来源于stack exchange，提问作者ggonmar