如何使用array.reduce生成含自定义键的车辆属性数组？

首先得澄清一个关键点：你想要的「带自定义键的数组」写法其实不是合法的JavaScript数组语法——数组的元素只能通过数字索引访问，虽然数组本质是对象可以附加自定义属性，但这并不是数组的正确使用场景。你真正需要的应该是一个普通对象，用车辆名称作为键，对应的值是包含color: red的对象。

先看你原代码的问题 #

1. 参数名不匹配：函数接收的参数是a，但你在reduce里用了vehicles.reduce，这会导致报错，应该改成a.reduce；
2. concat方法不会修改原数组：_vehicleMap.concat(...)会返回一个新数组，但你没有把这个新数组赋值回去，所以原数组_vehicleMap一直是空的（你当前得到的结果可能是实际代码里用了push，但写法还是有问题）；
3. red没有加引号：这里会被当作变量，应该写成字符串'red'。

方案1：生成你真正需要的对象（推荐） #

如果要实现键为车辆名称的结构，用对象更合适，修改后的代码如下：

function getInitialMap(a) {
  return a.reduce((vehicleMap, type) => {
    // 给对象添加键值对
    vehicleMap[type] = { color: 'red' };
    return vehicleMap;
  }, {}); // 初始值设为空对象，而非数组
}

// 调用后得到的结果：
// { car: { color: 'red' }, scooter: { color: 'red' }, bike: { color: 'red' } }

方案2：生成包含自定义键对象的数组（如果你确实需要数组） #

如果你坚持要数组结构，每个元素是一个以车辆名为键的对象，修正后的代码如下：

function getInitialMap(a) {
  return a.reduce((vehicleMap, type) => {
    // 用push修改原数组，而非concat（concat返回新数组需要重新赋值）
    vehicleMap.push({ [type]: { color: 'red' } });
    return vehicleMap;
  }, []); // 初始值为空数组
}

// 调用后得到的结果：
// [ { car: { color: 'red' } }, { scooter: { color: 'red' } }, { bike: { color: 'red' } } ]

总结 #

• 如果需要通过车辆名称直接访问对应的颜色对象，方案1的对象结构是最优选择；
• 如果必须用数组，方案2可以满足需求，但访问元素时还是得通过数组索引，无法直接用车辆名称访问。

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