JavaScript二维数组使用push后判断元素存在始终返回false问题

嘿，我来帮你排查下问题所在，以及怎么解决它~

首先，你的代码里有两个关键问题导致判断总是返回false：

1. 数组结构嵌套层级错误 #

你看，初始的stonearray = [[]]本身就带了一个空数组，而后续push的代码：

var pusharr = [[posx2, posy2]];
stonearray.push([pusharr]);

这会让stonearray的结构变得非常奇怪，比如第一次push后，它会变成：
[ [], [[[posx2, posy2]]] ]
你要找的[posx2, posy2]被嵌套了三层，根本不在stonearray的直接元素里，自然找不到它。

2. 引用类型的比较陷阱 #

就算你修正了结构，直接用数组的includes（你说的contains应该是这个？JS数组没有原生contains方法）判断也会失败，因为数组是引用类型。两个内容完全一样的数组，只要不是同一个引用，JS就会认为它们不相等。比如：

console.log([1,2] === [1,2]); // false
console.log([1,2].includes([1,2])); // false

正确的解决步骤 #

第一步：修正数组存储结构

先把初始数组改成空数组（不需要自带空数组），然后直接push坐标数组，不要额外嵌套：

// 初始化为空数组，更符合"存储坐标对"的需求
let stonearray = [];

// 用户点击时的代码
var posx2 = Math.floor(x/colSize)*colSize+colSize/2;
var posy2 = Math.floor(y/rowSize)*rowSize+rowSize/2;
var targetPos = [posx2, posy2]; // 直接是[x,y]的坐标数组

第二步：自定义判断逻辑

我们需要遍历数组，逐个比较坐标的具体值，而不是直接比较数组引用。可以写一个辅助函数：

function isPosExists(arr, target) {
  // 使用some方法遍历，只要找到一个匹配的就返回true
  return arr.some(pos => pos[0] === target[0] && pos[1] === target[1]);
}

然后在push前判断：

if (!isPosExists(stonearray, targetPos)) {
  stonearray.push(targetPos);
  console.log("坐标已添加");
} else {
  console.log("该坐标已存在");
}

可选优化：用Set提升查找效率

如果你的坐标数量很多，数组遍历的效率会比较低。可以把坐标转换成字符串存在Set里，这样查找是O(1)的速度：

let stoneSet = new Set();
let stonearray = [];

// 点击时
var posx2 = Math.floor(x/colSize)*colSize+colSize/2;
var posy2 = Math.floor(y/rowSize)*rowSize+rowSize/2;
var posKey = `${posx2},${posy2}`; // 把坐标转成唯一字符串

if (!stoneSet.has(posKey)) {
  stoneSet.add(posKey);
  stonearray.push([posx2, posy2]);
}

这样就能准确判断坐标是否已经存在啦~

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