如何从数组对象中提取红队成员的username并生成单一数组？

嗨，我懂你的困扰啦！你用filter方法后得到完整对象数组是正常的——因为filter的作用只是筛选出符合条件的整个元素，并不会帮你提取特定属性。要得到只包含目标用户名的数组，咱们可以把filter和map搭配起来用，或者用reduce一步到位，两种方法都能实现你的需求：

方法一：filter + map（直观易懂） #

先用filter筛选出所有team为red的用户对象，再用map把每个对象转换成对应的username值：

const array = [ 
  { username: "Mike", team: "red", score: 20, items: ["bat", "book", "gloves"] }, 
  { username: "Moe", team: "blue", score: 30, items: ["cellphone", "backpack", "cards"] }, 
  { username: "Ellie", team: "red", score: 15, items: ["ball", "canteen", "crayon"] }, 
  { username: "little_joe", team: "green", score: 1, items: ["book", "pencil"] }, 
];

const redTeamUsernames = array
  .filter(user => user.team === "red") // 筛选出red团队的用户对象
  .map(user => user.username); // 提取每个对象的username属性

console.log(redTeamUsernames); // 输出: ["Mike", "Ellie"]

方法二：reduce（一步完成，适合追求简洁的场景） #

用reduce可以在一次遍历中完成筛选和提取，效率稍高（小数组差异不明显）：

const array = [ 
  { username: "Mike", team: "red", score: 20, items: ["bat", "book", "gloves"] }, 
  { username: "Moe", team: "blue", score: 30, items: ["cellphone", "backpack", "cards"] }, 
  { username: "Ellie", team: "red", score: 15, items: ["ball", "canteen", "crayon"] }, 
  { username: "little_joe", team: "green", score: 1, items: ["book", "pencil"] }, 
];

const redTeamUsernames = array.reduce((result, user) => {
  // 如果当前用户属于red团队，就把username加入结果数组
  if (user.team === "red") {
    result.push(user.username);
  }
  return result;
}, []); // 初始化结果为空数组

console.log(redTeamUsernames); // 输出: ["Mike", "Ellie"]

简单总结下：

• filter负责"挑出符合条件的元素"，返回的是原结构的子集
• map负责"转换元素格式"，把每个元素变成你想要的样子
• reduce则是更灵活的工具，能同时完成筛选和转换的工作

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