React+Redux中按位置排序球员数组的优化需求

你的问题核心有两个：一是当前代码输出了二维数组（每个位置的球员单独成子数组），不符合单一有序数组的需求；二是重复的filter调用导致代码冗余。下面给出两种简洁的优化方案，都能解决这两个问题：

方案一：利用权重映射实现排序（推荐） #

通过定义位置优先级的权重对象，直接使用Array.sort()对球员数组排序，代码最简洁且性能高效：

function sortPlayersByPosition(data) {
  // 定义位置优先级：数字越小优先级越高
  const positionPriority = {
    'Keeper': 1,
    'Centre-Back': 2,
    'Right-Back': 3,
    'Left-Back': 4,
    'Defensive Midfield': 5,
    'Central Midfield': 6,
    'Attacking Midfield': 7,
    'Right Wing': 8,
    'Left Wing': 9,
    'Centre-Forward': 10
  };

  // 复制原数组避免修改原始数据，然后按权重排序
  const sortedPlayers = [...data.players].sort((playerA, playerB) => {
    return positionPriority[playerA.position] - positionPriority[playerB.position];
  });

  // 返回新的对象，不修改原payload
  return { ...data, players: sortedPlayers };
}

export const fetchTeamPlayersReducer = (state = [], action) => {
  switch (action.type) {
    case 'FETCH_TEAM_PLAYERS_SUCCESS':
      return sortPlayersByPosition(action.payload);
    default:
      return state;
  }
};

方案二：按顺序收集球员（确保严格顺序） #

如果需要严格按照你定义的位置顺序排列（包括处理未在列表中的位置），可以用flatMap按顺序收集每个位置的球员，最后合并为一维数组：

function sortPlayersByPosition(data) {
  // 定义你需要的位置排序顺序
  const positionOrder = [
    'Keeper',
    'Centre-Back',
    'Right-Back',
    'Left-Back',
    'Defensive Midfield',
    'Central Midfield',
    'Attacking Midfield',
    'Right Wing',
    'Left Wing',
    'Centre-Forward'
  ];

  // 按顺序收集对应位置的球员，自动展开为一维数组
  const sortedPlayers = positionOrder.flatMap(position => 
    data.players.filter(player => player.position === position)
  );

  // 处理不在优先级列表中的球员，放在数组末尾
  const remainingPlayers = data.players.filter(player => 
    !positionOrder.includes(player.position)
  );

  return { ...data, players: [...sortedPlayers, ...remainingPlayers] };
}

export const fetchTeamPlayersReducer = (state = [], action) => {
  switch (action.type) {
    case 'FETCH_TEAM_PLAYERS_SUCCESS':
      return sortPlayersByPosition(action.payload);
    default:
      return state;
  }
};

为什么原代码会生成二维数组？ #

原代码中每次push的是filter返回的子数组，导致result变成了[[Keeper数组], [Centre-Back数组], ...]的二维结构。如果要修复原代码（不推荐，因为冗余），可以在最后用result.flat()展开为一维数组，但上面的方案更优。

优化点说明 #

• 消除冗余：新增或调整位置顺序时，只需要修改positionPriority对象或positionOrder数组，无需重复编写filter逻辑
• 不修改原数据：使用扩展运算符[...]复制数组，避免副作用
• 输出单一数组：两种方案最终都返回一维的有序球员数组，符合你的需求

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