为何‘===’无法判断Color数组值相等？如何实现值比较？

一、为什么getPixel返回值和COLORS.RED用===判断不相等？ #

在JavaScript/TypeScript中，数组属于引用类型。===运算符对引用类型的判断逻辑是：检查两个变量是否指向内存中的同一个对象实例，而非比较对象的内容。

getPixel每次调用都会创建并返回一个新的Color数组实例，即使它的内容[255,0,0]和COLORS.RED完全一致，二者在内存中的地址也不相同，因此===会返回false。

二、如何实现颜色数组的值相等判断？ #

针对Color这种固定结构的三元组数组，可以用以下几种方法：

1. 手动逐个比较元素（最直观严谨） #

因为Color是固定的[r,g,b]结构，直接比较三个通道的值：

function isColorEqual(a: Color, b: Color): boolean {
  return a[0] === b[0] && a[1] === b[1] && a[2] === b[2];
}

// 使用示例
const targetColor = getPixel(img, 5, 5);
if (isColorEqual(targetColor, COLORS.RED)) {
  // 颜色值相等的逻辑
}

2. 转换为字符串比较（简洁但需注意场景） #

将数组转为字符串后比较，适合元素顺序固定且无特殊字符的场景：

const targetColor = getPixel(img, 5, 5);
const isEqual = targetColor.join(',') === COLORS.RED.join(',');

3. 使用Array.every方法（通用型方案） #

如果需要适配长度不固定的数组，every方法更通用：

const targetColor = getPixel(img, 5, 5);
const isEqual = targetColor.length === COLORS.RED.length 
  && targetColor.every((value, index) => value === COLORS.RED[index]);

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