JavaScript中reduce处理3个及以上对象数组元素时结果异常

你对Array.reduce的用法存在两个错误，直接导致输出不符合预期：

1. 没有为reduce传入初始累加值
   当不传初始值时，reduce会默认把数组第一个元素作为第一次迭代的累加值（previousValue），第二个元素作为当前值（currentValue）。第一次迭代执行后，你的回调返回值是字符串"Scoccer-MMA"（注意你第一个运动项的name存在拼写错误，写的是Scoccer而非Soccer），已经不是对象类型了。
2. 回调返回值逻辑错误
   第二次迭代处理第三个数组元素时，previousValue已经是第一次返回的字符串，字符串不存在name属性，读取previousValue.name会得到undefined，最终拼接结果就是undefined-Basket，和你实际拿到的输出完全一致。

两种可行写法：

写法1：修正reduce用法 #

给reduce传入空字符串作为初始累加值，调整回调内的拼接逻辑，同时修正拼写错误：

const sports = [
  {
    name: "Soccer",
  },
  {
    name: "MMA",
  },
  {
    name: "Basket",
  },
];

const allSports = sports.reduce(
  (prev, curr) => prev ? `${prev}-${curr.name}` : curr.name,
  "" // 初始累加值为空字符串
);

console.log(allSports); // 输出 Soccer-MMA-Basket

写法2：更简洁的实现 #

如果需求只是把数组对象的某个属性拼接成横杠分隔的字符串，不需要用reduce，用map+join可读性更高，也不容易写错：

const allSports = sports.map(item => item.name).join('-');

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