如何通过匹配x和y值从对象数组中获取对应angle值？

问题背景 #

我有一个如下结构的对象数组：

const fieldArray = [
  { "angle": 32.0, "y": 0, "x": 0 },
  { "angle": 33.0, "y": 0, "x": 10 },
  { "angle": 34.0, "y": 0, "x": 20 },
  { "angle": 35.0, "y": 0, "x": 30 },
  { "angle": 36.0, "y": 0, "x": 40 }
]
// 实际使用的数组更大，但格式一致

已知一组x和y值，我想编写函数找到匹配该x、y值的对象并返回对应的angle值。目前我写了如下函数，但想知道有没有更简便的方法，比如用filter或数组的find方法？

原函数代码：

function getFieldAngleValue (x, y) {
    for (let i = 0; i < fieldArray.length; i++){
            if(fieldArray[i].x == x && fieldArray[i].y == y ){
                let index = i
                break
            }
        }
        angle = fieldArray[index].angle;
        return angle;
},

优化方案 #

1. 使用Array.find()（推荐） #

find()方法会返回数组中第一个满足条件的元素，一旦找到就停止遍历，效率比filter更高（filter会遍历整个数组返回所有匹配元素），完全适配你的需求：

function getFieldAngleValue(x, y) {
  const matchItem = fieldArray.find(item => item.x === x && item.y === y);
  // 处理无匹配项的情况，避免访问undefined的属性报错
  return matchItem ? matchItem.angle : undefined;
}

• 优势：代码简洁直观，语义明确，找到匹配项后立即终止遍历，性能更优
• 注意：如果没有找到对应x/y的对象，find会返回undefined，所以必须添加判断逻辑，防止出现运行时错误

2. 使用Array.filter()（适合多匹配场景） #

如果你的数组可能存在多个x、y值完全相同的对象，filter可以返回所有匹配结果，但如果只需要第一个匹配项，find是更优选择：

function getFieldAngleValue(x, y) {
  const matchedItems = fieldArray.filter(item => item.x === x && item.y === y);
  // 返回第一个匹配对象的angle，无匹配则返回undefined
  return matchedItems.length ? matchedItems[0].angle : undefined;
}

原函数的问题修复 #

你的原函数存在两处明显问题：

• index变量在if代码块内部声明，外部无法访问，会导致fieldArray[index]抛出引用错误
• 未处理无匹配项的情况，此时index未定义，访问fieldArray[index].angle会报错

修复后的传统循环版本：

function getFieldAngleValue(x, y) {
  let matchIndex = -1;
  for (let i = 0; i < fieldArray.length; i++) {
    if (fieldArray[i].x === x && fieldArray[i].y === y) {
      matchIndex = i;
      break;
    }
  }
  return matchIndex !== -1 ? fieldArray[matchIndex].angle : undefined;
}

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