如何在使用filter时从两个数组返回匹配的x与y值？

嗨，我来帮你搞定这个问题～ 首先咱们先理清核心需求：你需要找到arr1和arr2中所有碰撞的元素对(x,y)，然后把这两个值传给其他函数（比如explode），而不是只拿到其中一个或者返回undefined。

为什么你之前的filter写法不生效？ #

你尝试的arr1.filter(x => arr2.filter(y => isCollision(x,y)).map(x,y => ...))有两个关键问题：

1. filter的作用是筛选出符合条件的原数组元素，所以外层arr1.filter最终只会返回arr1里的x值，没法同时带上对应的y；
2. 内层的map语法错误——map的回调参数是(元素, 索引)，不能直接写(x,y)，而且这里的逻辑也没法把x和y关联起来返回。

推荐的解决方案 #

方案1：先收集所有碰撞配对，再处理（最直观）

先用嵌套遍历把所有碰撞的x和y存成对象数组，之后想怎么用就怎么用：

// 第一步：收集所有碰撞的配对
const collisionPairs = [];
arr1.forEach(x => {
  arr2.forEach(y => {
    if (isCollision(x, y)) {
      collisionPairs.push({ x, y }); // 把x和y打包成对象存起来
    }
  });
});

// 第二步：遍历配对数组，调用你的函数
collisionPairs.forEach(pair => {
  explode(pair.x, pair.y);
  // 这里可以直接调用其他需要x和y的函数，比如：
  // doSomethingElse(pair.x, pair.y);
});

方案2：用flatMap简化收集过程（更简洁）

如果想少写点代码，可以用flatMap来一次性生成配对数组：

const collisionPairs = arr1.flatMap(x => 
  // 对每个x，筛选出arr2中碰撞的y，再把每个y转换成{x,y}对象
  arr2.filter(y => isCollision(x, y)).map(y => ({ x, y }))
);

// 后续处理和方案1一样
collisionPairs.forEach(({ x, y }) => {
  explode(x, y);
  // 其他操作...
});

方案3：直接在遍历中处理（不需要收集配对时）

如果你不需要把配对存下来，只是想直接执行操作，那其实可以直接修改你原来的forEach代码，去掉没必要的三元表达式（毕竟undefined不用特意返回）：

arr1.forEach(x => {
  arr2.forEach(y => {
    if (isCollision(x, y)) {
      explode(x, y);
      // 这里直接调用其他需要x和y的函数即可
    }
  });
});

这样既不会返回undefined，又能同时拿到x和y去执行后续逻辑啦～

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