如何优雅地从JavaScript对象数组中提取key值组成新数组？

这题太常见啦！要把对象数组转换成仅包含key值的数组，最优雅且符合现代JavaScript实践的方式就是使用Array.prototype.map()方法，一行代码就能搞定，可读性拉满：

var myArray = [{ key: 2, value: 10 }, { key: 5, value: 4 }, { key: 3, value: 8 }, { key: 12, value: 4 }];
var keysArray = myArray.map(item => item.key);
console.log(keysArray); // 输出: [2,5,3,12]

为什么说这是最优雅的？ #

• 简洁性：用箭头函数配合map，一行代码完成转换，逻辑清晰直白
• 声明式风格：专注于“要做什么”（提取每个对象的key），而不是“怎么做”（手动循环遍历），代码更易维护
• 兼容性：除了非常老旧的IE浏览器（IE9及以下不支持箭头函数和ES5的map），现代浏览器和Node.js都完美支持。如果需要兼容旧环境，也可以写成ES5的函数形式：

var keysArray = myArray.map(function(item) {
  return item.key;
});

要是你想玩点花的（其实没必要，但可以了解），也可以用Array.prototype.reduce()，但相比map就有点画蛇添足了：

var keysArray = myArray.reduce((acc, item) => {
  acc.push(item.key);
  return acc;
}, []);

不过显然map是专门为这种“数组元素一对一转换”场景设计的，是最优解。

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