我的通用map函数为何返回undefined？

先看你提供的汽车数组：

const cars = [
  {
    id: 1,
    make: "Honda",
    model: "Civic",
    style: "Coupe"
  },
  {
    id: 2,
    make: "Toyota",
    model: "Corolla",
    style: "Sedan"
  },
  {
    id: 3,
    make: "Subaru",
    model: "Forester",
    style: "Hatchback"
  },
];

你提到直接执行cars.map(car => car["make"])能得到预期的["Honda", "Toyota", "Subaru"]，但封装成DisplayItems函数后，调用DisplayItems("make")返回undefined，常见原因有以下几种：

• cars变量作用域不可达
  如果cars是在某个局部作用域（比如另一个函数内部）定义的，DisplayItems函数无法访问到这个变量。此时cars会被视为未定义，调用cars.map会抛出ReferenceError，若代码环境吞掉了错误（比如异步回调、未处理的try-catch），函数可能返回undefined。

• cars被意外赋值为undefined
  在调用DisplayItems("make")前，如果cars被重新赋值为undefined（比如cars = undefined），调用map方法会触发错误，错误未被捕获时函数会返回undefined。

• 函数被错误使用new关键字调用
  若调用时写成new DisplayItems("make")，构造函数在无显式返回对象的情况下会返回空实例。如果代码把这个实例误判为undefined，就会出现看似返回undefined的情况。

• cars不是可迭代数组
  如果cars是null、对象或其他非数组类型，调用map方法会抛出错误，错误未被捕获时函数执行中断，最终返回undefined。

排查方法 #

可以在函数内部添加日志快速定位问题：

function DisplayItems(desiredKey) {
  console.log('当前cars的值:', cars);
  console.log('传入的目标key:', desiredKey);
  // 使用可选链避免直接报错
  return cars?.map(car => car[desiredKey]);
}

通过打印cars的值，就能明确是变量不存在、类型错误还是其他问题。

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