如何对齐两个独立数组？按指定ID顺序匹配坐标点实现连线绘制

方案1：完全不改动现有代码 #

复用已有的fileData三个数组，新增ID匹配坐标的工具函数，再按第二个文件的ID顺序绘制连线即可：

// 新增工具函数：传入ID返回对应坐标
function getCoordById(id) {
  const index = fileData.id.findIndex(item => item === id);
  if (index === -1) return null;
  // 转换为数字避免字符串类型导致绘制异常
  return {
    x: parseFloat(fileData.x[index]),
    y: parseFloat(fileData.y[index])
  }
}

// 新增连线绘制函数
function drawLineByOrder() {
  const orderIds = tempFileName2;
  if (orderIds.length < 2) return;
  // 自定义线条样式
  stroke(255);
  strokeWeight(2);
  noFill();
  // 按顺序连线
  beginShape();
  for (let i = 0; i < orderIds.length; i++) {
    const coord = getCoordById(orderIds[i]);
    coord && vertex(coord.x, coord.y);
  }
  endShape();
  // 如果需要首尾闭合连线，把上面一行替换为 endShape(CLOSE)
}

调用方式：在draw()函数里添加一行drawLineByOrder()即可。

方案2：优化查询效率（仅新增少量代码，不破坏原有逻辑） #

如果ID数量较多，每次查找ID遍历数组的性能开销较大，可以新增一个ID到坐标的映射表，查询复杂度直接降到O(1)：

1. 新增全局变量，原有全局变量保持不变：

let fileData = {id: [], x: [], y: []};
let data = [];
let idMap = {}; // 新增的ID映射表

2. 修改loadFile函数，新增一行逻辑生成映射表，原有逻辑完全保留：

function loadFile(filename) {
  probData = new Array(filename.length);
  for (let i = 0; i < probData.length; i++) {
    data[i] = splitTokens(filename[i]);
    const id = data[i][0];
    fileData.id.push(id);
    fileData.x.push(data[i][1]);
    fileData.y.push(data[i][2]);
    // 仅新增这一行，不影响原有代码的使用
    idMap[id] = {x: parseFloat(data[i][1]), y: parseFloat(data[i][2])};
  }
}

3. 简化getCoordById工具函数：

function getCoordById(id) {
  return idMap[id] || null;
}

后续连线绘制逻辑和调用方式和方案1完全一致。

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