使用Array.reduce()处理对象数组时返回单个字符字符串的问题

我懂你遇到的糟心情况了——用reduce处理对象数组时，结果居然变成了一堆单个字符组成的数组，完全不是你想要的样子。咱们来一步步把问题捋顺，搞定它：

问题出在哪？ #

你当前的代码里有两个关键错误：

1. 没给reduce设置初始值：如果不指定初始累加器的值，reduce会默认把数组的第一个元素当作初始的a，这直接打乱了后续的逻辑。
2. 错误扩展了字符串：你用了...currentValue.productTitle，扩展运算符作用在字符串上时，会把字符串拆成单个字符的数组，这就是你得到一堆零散字符的根本原因。

正确的实现代码 #

按照你期望的结果，我们需要做这两件事：

• 给reduce设置初始值为["Stuff"]（这是你想要的数组第一个元素）
• 直接把每个对象的productTitle转成小写后添加到累加器数组里，别再扩展它了

const productArray = [ 
  { id: 1, productTitle: "Necklace" }, 
  { id: 2, productTitle: "Ring" }, 
  { id: 3, productTitle: "Bracelet" } 
];

const newStuff = productArray.reduce(function(a, currentValue) {
  // 把productTitle转成小写后添加到累加器数组
  return [...a, currentValue.productTitle.toLowerCase()];
}, ["Stuff"]); // 这里一定要设置初始值

console.log(newStuff); // 输出: ["Stuff", "necklace", "ring", "bracelet"]

更简洁的写法（可选） #

如果你喜欢箭头函数的简洁风格，也可以写成这样：

const newStuff = productArray.reduce((a, { productTitle }) => 
  [...a, productTitle.toLowerCase()], ["Stuff"]
);

这样就能完美得到你想要的结果啦！

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