如何通过多层嵌套Array.map()提取JS嵌套数组的player.name？

嘿，这事儿其实挺清晰的，咱们可以通过三层嵌套的Array.map()来一步步钻到目标属性里，我给你拆解清楚：

首先，先把你的三个game对象放到一个顶层数组里，方便统一处理：

// 先定义好你的三个game对象示例
let game1 = { 
  teamLineup: [
    { team: { actual: { starters: [{ player: {name: 'Joe'} }, { player: {name: 'Kim'} }] } } },
    { team: { actual: { starters: [{ player: {name: 'John'} }, { player: {name: 'Shauna'} }] } } }
  ] 
};
let game2 = { 
  teamLineup: [
    { team: { actual: { starters: [{ player: {name: 'Mike'} }, { player: {name: 'Lily'} }] } } },
    { team: { actual: { starters: [{ player: {name: 'Tom'} }, { player: {name: 'Emma'} }] } } }
  ] 
};
let game3 = { 
  teamLineup: [
    { team: { actual: { starters: [{ player: {name: 'Bob'} }, { player: {name: 'Alice'} }] } } },
    { team: { actual: { starters: [{ player: {name: 'Dave'} }, { player: {name: 'Zoe'} }] } } }
  ] 
};

// 把三个game放到一个数组里
const games = [game1, game2, game3];

接下来就是核心的多层map()操作了，每一层对应一个数组层级：

// 提取所有名字，结果是三维数组（按game -> team -> 球员名字的层级）
const allPlayerNames = games.map(game => 
  // 第一层：遍历每个game，处理它的teamLineup数组
  game.teamLineup.map(teamEntry => 
    // 第二层：遍历当前game里的每个队伍阵容项，处理该队伍的首发球员数组
    teamEntry.team.actual.starters.map(starter => 
      // 第三层：遍历每个首发球员，提取name属性
      starter.player.name
    )
  )
);

结果说明 #

运行后allPlayerNames的结构是这样的：

[
  [ ["Joe", "Kim"], ["John", "Shauna"] ], // game1的所有球员名字
  [ ["Mike", "Lily"], ["Tom", "Emma"] ],  // game2的所有球员名字
  [ ["Bob", "Alice"], ["Dave", "Zoe"] ]   // game3的所有球员名字
]

如果你想把所有名字合并成一个一维数组（不管属于哪个game或team），可以在最后加上.flat(2)来展开两层嵌套：

const flattenedPlayerNames = games.map(game => 
  game.teamLineup.map(teamEntry => 
    teamEntry.team.actual.starters.map(starter => 
      starter.player.name
    )
  )
).flat(2);

// 结果：["Joe","Kim","John","Shauna","Mike","Lily","Tom","Emma","Bob","Alice","Dave","Zoe"]

每一层map()的作用就是把当前数组的每个元素转化成我们需要的内容，层层深入就拿到了最终的player.name啦～

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