更改同一数组中的另一个对象时更改的Javascript对象

Question

似乎正在发生的事情是当我更改 player[1].pHand 时 player[0].pHand 正在更改（pHand 是一个包含对象的数组）

for(var j = 0; j < 2; j++){


        console.log(cardDeck[deckCounter]);

        player[0].pHand[j] = cardDeck[deckCounter];

        player[0].cardNumber ++;


        console.log(player[0].pHand[j]);

        deckCounter ++;         

    } 


    for(var k = 0; k < 2; k++){


        console.log(cardDeck[deckCounter]);

        player[1].pHand[k] = cardDeck[deckCounter];

        player[1].cardNumber ++;


        console.log(player[1].pHand[k]);
        console.log(player[0].pHand[k]);

        deckCounter ++;         

    } 

为了便于解释，我稍微更改了代码（我会为玩家索引设置一个循环，而不是 2 个单独的循环），但每次都会出现相同的结果，其中给每个玩家的最后一组卡片目的。 在控制台中，日志通常是例如：

卡片{花色：“Heart”，faceValue：“10”，价值：10，打出：false，img：“10Heart.png”…}

卡{花色：“Heart”，faceValue：“10”，价值：10，打出：false，img：“10Heart.png”…}

卡片{花色：“Heart”，faceValue：“3”，value：3，打出：false，img：“3Heart.png”…}

卡片{花色：“Heart”，faceValue：“3”，value：3，打出：false，img：“3Heart.png”…}

卡{花色：“黑桃”，面值：“J”，价值：10，出牌：假，img：“JSpade.png”…}

卡{花色：“黑桃”，面值：“J”，价值：10，出牌：假，img：“JSpade.png”…}

卡{花色：“黑桃”，面值：“J”，价值：10，出牌：假，img：“JSpade.png”…}

卡{花色：“黑桃”，面值：“K”，价值：10，出牌：假，img：“KSpade.png”…}

卡{花色：“黑桃”，面值：“K”，价值：10，出牌：假，img：“KSpade.png”…}

卡{花色：“黑桃”，面值：“K”，价值：10，出牌：假，img：“KSpade.png”…}

任何帮助或见解将不胜感激:)

Answer 1

Javascript 在分配变量时通常使用引用，并且您将相同的 cardDeck-Object 分配给两个玩家的 pHand-attribute。比如：

var pHand = {a:1,b:2};

var player = [];
player[0] = {};
player[1] = {};

player[0].pHand = pHand;
player[1].pHand = pHand; // we assign a REFERENCE here

console.log(player[0].pHand);
console.log(player[1].pHand);

console.log("changing value of b for player 0");
player[0].pHand.b = 3;

console.log(player[0].pHand);
console.log(player[1].pHand);
// both consolel logs above will be identical!

关于“如何克隆”一个 js 对象，您可以查看这篇文章： How do I correctly clone a JavaScript object?

只要您的对象是可序列化的（例如，不包含函数，而只包含数组和对象），您就可以使用它来创建简单的深拷贝：

player[0].pHand = JSON.parse(JSON.stringify(pHand));

完整示例：https://jsfiddle.net/41f07f1a/