使用map()方法映射数组时函数返回undefined问题求助

你的代码核心问题是：productsByPrice函数没有返回map()生成的新数组。

JavaScript中，函数如果没有显式编写return语句，执行完毕后会默认返回undefined。你在map的回调函数里确实返回了每个output对象，但外层的productsByPrice函数没有把map生成的整个新数组返回出去，因此最终console.log拿到的结果是undefined。

修正后的代码 #

const products = [
  { product: "banana", price: 3 },
  { product: "mango", price: 6 },
  { product: "potato", price: " " },
  { product: "avocado", price: 8 },
  { product: "coffee", price: 10 },
  { product: "tea", price: "" },
];

const productsByPrice = function (arr) {
  // 新增return，将map生成的数组作为函数返回值
  return arr.map((item) => {
    let output = {};
    output[item.product] = item.price;
    return output;
  });
};

console.log(productsByPrice(products))

代码优化建议 #

你可以简化回调逻辑，不用临时变量output，直接返回对象字面量（注意箭头函数返回对象时，要用括号包裹，避免被解析为函数体）：

const productsByPrice = function (arr) {
  return arr.map((item) => ({
    [item.product]: item.price
  }));
};

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