JavaScript Reduce挑战：提取对象数组指定键的值

嘿，我完全懂你碰到的这个问题！用reduce的时候很容易踩两个关键的坑，这也是你现在得到奇怪结果（返回1、累加器变成undefined）的原因。

问题根源分析 #

你提到累加器会变成undefined，大概率是这两个原因之一：

• 没有给reduce设置初始累加器值（也就是第二个参数）
• 在reduce的回调函数里，没有返回更新后的累加器数组

举个反例，如果你之前的代码是这样的：

// 错误写法示例1
function extractKey(arr, key) {
  return arr.reduce((acc, current) => {
    acc.push(current[key]);
    // 这里没return acc！
  });
}

或者没加初始数组：

// 错误写法示例2
function extractKey(arr, key) {
  return arr.reduce((acc, current) => {
    acc.push(current[key]);
    return acc;
  }); // 没传初始[]
}

第一种情况：回调没返回值，默认返回undefined，下一轮循环的acc就变成undefined，自然没法执行push操作；第二种情况：reduce会把数组第一个元素当作初始acc，如果第一个元素是对象，push后返回的是数组的长度（数字），下一轮acc就变成这个数字，数字没有push方法，最终可能返回一个数字（比如你看到的1）。

正确的实现代码 #

只需要补上初始数组，并且确保每次回调都返回更新后的累加器：

function extractKey(arr, key) {
  // 第二个参数[]是初始累加器，必须设置
  return arr.reduce((acc, currentObj) => {
    // 将当前对象的key对应值推入累加器数组
    acc.push(currentObj[key]);
    // 关键：返回更新后的累加器，供下一轮循环使用
    return acc;
  }, []);
}

测试示例 #

调用这个函数试试：

const testData = [
  { id: 1, name: "Jason" },
  { id: 2, name: "Emma" },
  { id: 3, name: "Liam" }
];

console.log(extractKey(testData, "name")); // 输出: ["Jason", "Emma", "Liam"]

这样就能得到你想要的、仅包含指定键对应值的数组了。

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