如何将数组传递给函数而不改变原始数组？

Question

我正在一个更大的函数中处理一个辅助函数。

我有一个团队对象数组（每个团队看起来像这样 {team: unique number of the team , points:0,goalDiff:0,goalsFor:0}）作为我函数的第一个参数，我有一个游戏结果数组作为第二个参数（每场比赛看起来像这样[主队裁判号码，客队裁判号码，主队进球数，客队进球数]）。

我的函数查看第二个数组中的每场比赛，并为获胜的球队分配 2 分，为失败的球队分配 0 分。 在平局的情况下，每队分配 1 分。 函数还计算每支球队的进球数。

    let computeGames = (arr, games) => {

  
    games.forEach((game) => {
      
      let homeTeamIndex = arr.findIndex(team => team.team === game[0])
      let awayTeamIndex = arr.findIndex(team => team.team === game[1])
      let homeTeam = arr[homeTeamIndex]
      let awayTeam = arr[awayTeamIndex]
    
      
      game[2] > game[3]
        ? (homeTeam.points += 2)
        : game[2] === game[3]
        ? ((homeTeam.points += 1), (awayTeam.points += 1))
        : (awayTeam.points += 2);
      homeTeam.goalsFor += game[2];
      awayTeam.goalsFor += game[3];
      homeTeam.goalDiff += game[2] - game[3];
      awayTeam.goalDiff += game[3] - game[2];
    });

  return arr
    
  };

我的代码按预期计算积分和目标，但我的问题是，当我执行类似下面的代码时，积分会在我的团队数组和 doNotMutate 数组中计算。 我不明白为什么团队会发生变异，因为它是传递给函数的团队副本，而不是团队数组本身。 如果有人能解释一下，我在这里真的很困惑。

干杯

const teams = createTeams(number) // this is a helper function to generate my teams with all values = 0
let doNotMutate = [...teams]

doNotMutate= computeGames(doNotMutate,games)
  
  console.log(teams, doNotMutate)

Answer 1

执行[...teams]不会复制存储在数组中的对象。 数组的每一项都被简单地复制到一个新数组中。 在您的情况下，每个项目都是一个对象，这意味着新数组将包含完全相同的对象（如果有帮助，可以将它们视为“对相同值的引用” ）。

你可以观察到这一点：

teams[0] === doNotMutate[0] // true! (we don't want this)

您需要遍历数组并将每个项目映射到其自身的副本 ( {...obj} )。 像这样的东西：

const doNotMutate = [...teams].map(game => ({...game}));

或者，探索深度克隆实现，例如lodash 的.