JavaScript 数组克隆答案

【问题标题】：JavaScript array cloningJavaScript 数组克隆
【发布时间】：2015-02-12 10:00:14
【问题描述】：

我有这种方式来制作数组

var playerList = [];

exports.player = function(socket, name)
{
    this.id = socket.id;
    this.name = name;
    this.x = 20;
    this.y = 40;

    return this
}

exports.addPlayer = function(data)
{
    playerList.push(data)
}

我正在像这样向playerList 数组添加项目

var client = new player(socket, data);
exports.addPlayer(client);

但我也有一个函数可以实现以下功能

exports.getSafeList = function(id)
{
    var player_array = playerList.slice();

    for(var i = 0; i < player_array.length; i++)
    {
        if(player_array[i].id != id)
        {
            player_array[i].id = 'unknown';
        }
    }

    return player_array;
}

现在我执行以下操作

exports.getPlayerList = function()
{
    return playerList;
}

console.log(players.getPlayerList())
console.log(players.getSafeList(id))

到目前为止，代码运行良好，但是当我记录这 2 个函数时，getPlayerList 变量似乎与 player_list 之一合并，这是输出

当阵列上只有一个玩家时

[ { id: 'tjvh8XdMtX-o6QYDAAAB', name: 'Raggaer', x: 20, y: 40 } ]

[ { id: 'tjvh8XdMtX-o6QYDAAAB', name: 'Raggaer', x: 20, y: 40 } ]

但是当有更多时：

[ { id: 'unknown', name: 'Raggaer', x: 20, y: 40 },
  { id: '2-K5At07wLV4BDiAAAAC', name: 'Alvaro', x: 20, y: 40 } ]

[ { id: 'unknown', name: 'Alvaro', x: 20, y: 40 },
  { id: '2-K5At07wLV4BDiAAAAC', name: 'Alvaro', x: 20, y: 40 } ]

正如您在两个数组上看到的那样，id 在不应该显示为“未知”时，因为我没有修改 playerList 数组...

【问题讨论】：

playerList.slice() 只创建一个浅层副本。两个数组将引用相同的对象。

标签： javascript arrays node.js

【解决方案1】：

问题在于，虽然Array.prototype.slice() 将创建原始数组的单独副本，但其项目仍将引用相同的对象实例。所以修改一个数组中的一项最终会修改克隆数组中的对应项。

如果您的项目是简单的数据对象（无函数），此解决方法可能会为您解决问题：

// instead of "var player_array = playerList.slice();"
var player_array = JSON.parse(JSON.stringify(playerList));

【讨论】：