p5.js使用get()获取像素RGBA数组对比预设值失效，鼠标悬停碰撞检测求助

问题原因 #

你遇到的比较逻辑失效问题，核心是JavaScript的基础语法规则：数组属于引用类型，==和===运算符对引用类型做比较时，判断的是两个变量是否指向内存中的同一个对象，而非对比对象内部的属性/元素值。
你通过get()方法拿到的RGBA颜色数组，和你预设在colors数组里的颜色值，哪怕四个通道的数值完全一致，也是两个完全独立的数组对象，内存地址不同，所以c == colors[i]的判断永远为假。

解决方法 #

有两种常用的实现方式：

方案1：逐个比对颜色通道值（性能最优，无副作用） #

直接对比两个数组的四个RGBA通道数值即可，同时可以把get()操作放到循环外，每一帧只需要取一次鼠标位置的颜色，避免重复调用浪费性能，修改后的代码如下：

function draw() {
  background(220);
  let c = get(mouseX, mouseY);
  for(var i = 0; i < colors.length; i++){
    fill(colors[i]);
    ellipse(120, 40 + 45 * i, 40);
    // 逐个通道比对
    if(c[0] === colors[i][0] && c[1] === colors[i][1] && c[2] === colors[i][2] && c[3] === colors[i][3]){
      console.log(colors[i]);
    }
  }
}

方案2：数组转字符串比对（写法更简洁） #

如果你的场景不需要极致性能，也可以把两个数组都转成字符串后再做对比：

if(c.toString() === colors[i].toString()){
  console.log(colors[i]);
}

以上两种方案都可以解决你当前的比较失效问题。

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