Javascript 替换数组会导致整个列发生变化

Question

我在使用 javascript 时遇到了困难，我正在尝试创建一个函数来在游戏中生成 map ，如下所示。基本模式是 [9, 3, 4, 4, 4, 4, 4, 4, 5, 9] 作为平铺图像框架。

我想将4个tile中的一些更改为12个tile，但结果，所有4个tile都更改为12，

这是代码:

function addMap(stage) 
{
  var map   = new Map(32, 32);
  map.image = game.assets['img/terrain.png'];

  var mapArray    = [9, 3, 4, 4, 4,  4, 4, 4, 5, 9]; // per 50m
  var selectedMap = [];

  for (var i = 0; i < (2 + (stage - 1)) * 10; i++) {
    selectedMap.push(mapArray); 
  }

  for(var row = 0; row < selectedMap.length; row++) {
    for(var col = 0; col < selectedMap[row].length; col++) {
      if (selectedMap[row][col] === 4) {
        var probability = rand(100);

        if (probability < 15) {
          selectedMap[row][col]  = 12;
        }
      }
    }
  }

  map.loadData(selectedMap);

  return map;
}

注意:假设阶段 = 1

你能看出这个阵列系统有什么问题吗？非常感谢

Answer 1

您已将对完全相同的一组列的引用推送到每一行中。因此，当您更改数组的一个副本时，所有其他引用也会看到更改。您需要复制 mapArray在将其插入您的 selectedMap 之前数组。

for (var i = 0; i < (2 + (stage - 1)) * 10; i++) {
    selectedMap.push(mapArray.slice(0)); 
}

.slice(0)将制作一个副本，因此每一行都会有一个单独的、独立的数组副本，您可以单独修改每个副本。

Javascript 中的对象(数组是对象)是通过 Javascript 中的引用(而不是复制)来分配的。所以，当你这样做 selectedMap.push(mapArray);你只是把一个指针指向 mapArray进入selectedMap以及 selectedMap 的所有元素指向 mapArray 的相同副本。所以，如果你改变了其中一个，它们都会改变。