JavaScript中array.map()如何返回对象数组而非值数组

嘿，作为JS新手遇到map的问题太正常啦，我来给你捋清楚～

首先，你当前得到["Potter"]的原因应该是在map回调里直接返回了item.lastName——这样每个元素会被转换成对应的字符串值，最终就变成了字符串数组。而你想要的是保留对象结构，只提取包含lastName的对象，那调整一下回调的返回值就好啦！

正确的实现代码 #

const array1 = [{firstName: "Harry"}, {lastName: "Potter"}];
const resultArray = array1.map(item => {
  // 检查当前元素是否有lastName属性，避免生成空对象
  if (item.lastName) {
    return { lastName: item.lastName };
  }
  // 对于没有lastName的元素，返回null方便后续过滤
  return null;
});

// 过滤掉null元素，得到纯目标对象数组
const filteredResult = resultArray.filter(item => item !== null);
console.log(filteredResult); // 输出: [{lastName: "Potter"}]

简化写法（合并过滤与映射） #

如果你的数组里只有带lastName的元素需要保留，也可以把filter和map合并，一步到位：

const array1 = [{firstName: "Harry"}, {lastName: "Potter"}];
const resultArray = array1
  .filter(item => item.hasOwnProperty('lastName'))
  .map(item => ({ lastName: item.lastName }));

console.log(resultArray); // 输出: [{lastName: "Potter"}]

小细节提醒 #

• map会遍历数组的每一个元素，所以如果不对元素做判断，没有lastName的元素会返回{lastName: undefined}，这可能不是你想要的，所以加上过滤或判断很有必要。
• 箭头函数返回对象的时候，记得用小括号把对象包起来（() => ({ key: value })），不然JS会把大括号当成函数体的分隔符，导致语法错误哦～

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