如何防止阵列副本编辑原件？

Question

 var level1screen = [ ["B", "B", "B", "B", "B", "B", "B", "B", "B", "B", "B", "B"], ["B", "A", "A", "A", "A", "D", "C", "A", "A", "A", "A", "B"], ["B", "A", "A", "A", "A", "B", "B", "A", "A", "A", "A", "B"], ["B", "A", "A", "A", "A", "A", "A", "A", "A", "A", "A", "B"], ["B", "A", "B", "B", "A", "A", "A", "A", "B", "B", "A", "B"], ["B", "E", "D", "D", "A", "A", "A", "A", "D", "D", "A", "B"], ["B", "B", "B", "B", "B", "B", "B", "B", "B", "B", "B", "B"] ]; var screen = [ ["B", "B", "B", "B", "B", "B", "B", "B", "B", "B", "B", "B"], ["B", "C", "C", "C", "C", "C", "A", "C", "C", "A", "C", "B"], ["B", "C", "A", "A", "A", "C", "C", "A", "C", "C", "A", "B"], ["B", "C", "C", "C", "C", "C", "A", "A", "C", "A", "A", "B"], ["B", "C", "A", "A", "A", "C", "A", "A", "C", "A", "A", "B"], ["B", "C", "C", "C", "C", "C", "A", "A", "C", "A", "A", "B"], ["B", "B", "B", "B", "B", "B", "B", "B", "B", "B", "B", "B"] ]; var selectedScreen = screen; var player = { posX: 0, posY: 0, speed: 0, maxSpeed: 5, movementTime: 0, jump: 0, maxJump: 3, health: 100, coins: 0, maxCoins: 1, movement: true }; var textures = { A: "skyblue", B: "firebrick", C: "gold", D: "black", E: "green", P: "white" }; function ready(screen){ var start = []; for(i in screen){ if(screen[i].includes("E")){ start[0] = screen[i].indexOf("E"); start[1] = parseInt(i); } } if(start.length == 0){ alert("Bad level layout"); throw "Bad level layout"; } player.posX = start[0]; player.posY = start[1]; screen[player.posY][player.posX] = "P"; } function updateScreen(screen, pixelWidth, pixelHeight){ var canvas = document.getElementById("screen"); context = canvas.getContext("2d"); canvas.width = screen[0].length * pixelWidth; canvas.height = screen.length * pixelHeight; context.clearRect(0, 0, canvas.width, canvas.height); var x = 0; var y = 0; for(i in screen){ for(j in screen[i]){ var colour = textures[screen[i][j]]; context.fillStyle = colour; context.fillRect(x, y, 100, 100); x += pixelWidth; } x = 0; y += pixelHeight; } if(!player.movement){ context.font = "32px Arial"; context.fillText("Paused. P to resume.", 450, 350); context.textAlign="center"; } } document.onkeydown = function(event){ event = event || window.event; if(player.movement && (event.keyCode == 87 || event.keyCode == 38 || event.keyCode == 32)){ event.preventDefault(); console.log(selectedScreen[player.posY][player.posX]); screen[player.posY][player.posX] = selectedScreen[player.posY][player.posX]; if(screen[player.posY - 1] != "B"){ player.posY -= 1; alert("JUMP"); } } else if(player.movement && (event.keyCode == 83 || event.keyCode == 40)){ event.preventDefault(); screen[player.posY][player.posX] = selectedScreen[player.posY][player.posX]; if(screen[player.posY + 1] != "B"){ player.posY += 1; alert("DUCK"); } } else if(player.movement && (event.keyCode == 65 || event.keyCode == 37)){ event.preventDefault(); screen[player.posY][player.posX] = selectedScreen[player.posY][player.posX]; if(screen[player.posX - 1] != "B"){ player.posX -= 1; alert("LEFT"); } } else if(player.movement && (event.keyCode == 68 || event.keyCode == 39)){ event.preventDefault(); screen[player.posY][player.posX] = selectedScreen[player.posY][player.posX]; if(screen[player.posX + 1] != "B"){ player.posX += 1; alert("RIGHT"); } } else if(event.keyCode == 80){ player.movement = !player.movement; } screen[player.posY][player.posX] = "P"; console.log(event.keyCode); updateScreen(screen, 100, 100); } screen = level1screen; selectedScreen = level1screen; updateScreen(screen, 100, 100); ready(screen);

 <canvas id="screen">HTML5 Canvas is not supported by your browser.</canvas>

当我尝试播放时，播放器（白色补丁）填满了整个屏幕，而不是一个点。 我检查并意识到 level1screen、screen 和 selectedScreen 都是相同的。 我认为这个问题的根源是 level1screen 和 selectedScreen 在它们不应该被编辑的时候被编辑。 这可能是数组按引用传递的问题吗？

Answer 1

你已经通过你的代码： var selectedScreen = screen; , screen = level1screen; , 和selectedScreen = level1screen; . 正如你所说，数组是通过引用传递的，所以它们最终都是 level1screen。 如果要复制这些数组并使它们保持独立，则必须创建一个新数组。 这可以使用扩展操作var selectedScreen = [...screen]或评论中提到的切片var selectedScreen = screen.slice(0) 。 然后，您还需要以相同的方式再次在底部声明新数组，而不是我上面提到的现有screen =和selectedScreen = 。