JavaScript中声明为常量的数组仍被修改的问题排查

嘿，我一眼就看出问题所在了——这是JavaScript里引用类型的经典坑！

你遇到的核心问题是JavaScript中数组属于引用类型。当你执行colours = origColours时，并没有把origColours的内容复制给colours，而是让colours变量直接指向了origColours数组所在的同一个内存地址。这就意味着，后续对colours做的任何修改（比如colours.shift()或者shuffleArray(colours)），都会直接作用在origColours本身上——因为它们本质上是同一个数组。

要解决这个问题，你需要在每次重置colours时，创建origColours的一个全新独立副本，而不是直接引用它。这里有几种简单可靠的实现方式：

方法1：使用数组slice()方法 #

slice()方法如果不传参数，会返回原数组的浅拷贝，生成一个新数组：

colours = origColours.slice();

方法2：使用ES6扩展运算符... #

扩展运算符是最直观的数组拷贝方式之一：

colours = [...origColours];

方法3：使用Array.from() #

Array.from()可以基于现有数组创建一个新的数组实例：

colours = Array.from(origColours);

在你的setup()函数里，把colours = origColours替换成上面任意一种拷贝方式即可。比如修改后的setup()函数片段：

function setup() {
  if (innerHeight >= innerWidth) {
    mainRadius = innerWidth/6;
  } else {
    mainRadius = innerHeight/6;
  }
  smallRadius = mainRadius/2;
  c.clearRect(0,0,innerWidth,innerHeight);
  circles = [];
  // 替换成数组拷贝，避免修改原origColours数组
  colours = [...origColours]; 
  pointerCircle = new Circle(0,0,1, "rgba(0,0,0,0)");
  circles.push(new Circle(innerWidth/2, innerHeight/2, mainRadius, "white"));
  // ... 你的其他后续代码
}

这样每次窗口resize触发setup时，colours都会是origColours的全新副本，修改colours再也不会影响到原数组，颜色不足的问题就能解决啦。

内容的提问来源于stack exchange，提问作者Cake Hook