使用 map() 方法基于对象数组生成条件化字符串数组-js教程-PHP中文网

使用 map() 方法基于对象数组生成条件化字符串数组

本文详解如何利用 Array.prototype.map() 遍历用户对象数组，根据年龄条件（≥18 或

本文详解如何利用 `array.prototype.map()` 遍历用户对象数组，根据年龄条件（≥18 或

在 JavaScript 中，map() 是一个纯函数式方法，它必须显式返回值，否则每个回调执行结果默认为 undefined——这正是原代码输出 [undefined, undefined, ...] 的根本原因：if/else 分支内缺少 return 语句。

正确做法是：在箭头函数中，若使用大括号 {} 包裹逻辑，则必须手动 return；若使用简洁的单表达式语法（无大括号），则自动隐式返回。以下是推荐的 map() 实现：

function makeStrings(arr) {
  return arr.map(person => 
    person.age >= 18 
      ? `${person.name} can go to The Matrix` 
      : `${person.name} is under age!!`
  );
}

✅ 优势说明：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

使用三元运算符实现简洁、可读性强的条件映射；
箭头函数省略大括号，启用隐式返回，避免遗漏 return；
完全符合函数式编程原则：不修改原数组、无副作用、返回全新字符串数组。

⚠️ 注意事项：

原题示例输出中写的是 "is under age!!"（注意空格与拼写），而错误代码中误写为 "is underage!!"（无空格且少 r），需严格匹配；
年龄判断应为 >= 18（含 18 岁），题干“if age > 18”虽表述为大于，但预期输出中 Bob Ziroll（age: 100）和 Angelina（80）均通过，且标准逻辑中 18 岁即具备法定资格，故采用 >= 更合理；
若坚持使用带 {} 的块级箭头函数，务必显式书写 return：

arr.map(person => {
  if (person.age >= 18) {
    return `${person.name} can go to The Matrix`; // ← 必须有 return！
  } else {
    return `${person.name} is under age!!`;
  }
});

最终调用验证：

console.log(makeStrings([
  { name: "Angelina Jolie", age: 80 },
  { name: "Eric Jones", age: 2 },
  { name: "Paris Hilton", age: 5 },
  { name: "Kayne West", age: 16 },
  { name: "Bob Ziroll", age: 100 }
]));
// → [
//   "Angelina Jolie can go to The Matrix",
//   "Eric Jones is under age!!",
//   "Paris Hilton is under age!!",
//   "Kayne West is under age!!",
//   "Bob Ziroll can go to The Matrix"
// ]

掌握 map() 的返回机制与箭头函数语法细节，是写出健壮、可维护数据转换逻辑的关键一步。