我如何 sort/align 两个单独的数组？

Question

我从 .txt 文档中加载了两组数组，其中一个文件的每一行都有三个值；一个 ID，一个 x 坐标和一个 y 坐标，第二个文件只有 ID，但按我需要调用 x 和 y 的时间排序。

第一个文件看起来像这样

1 565.0 575.0
2 25.0 185.0
3 345.0 750.0
4 945.0 685.0
5 845.0 655.0

第二个看起来像这样：

我将尝试在下面演示我所做的事情，而不使用我的确切代码，因为它是针对 class 项目的：

let fileData = {id: [], x: [], y: []};
let data = [];

function preload() {
  tempFileName = loadStrings('address/to.txt');
  tempFileName2 = loadStrings('address/to/other.txt');
}

function setup() {
  createCanvas(750, 750);
  loadFile(tempFileName);
}

function draw() {
  background(0);
}

function loadFile(filename) {
  probData = new Array(filename.length);
  for (let i = 0; i < probData.length; i++) {
    data[i] = splitTokens(filename[i]);
    fileData.id.push(data[i][0]);
    fileData.x.push(data[i][1]);
    fileData.y.push(data[i][2]);
  }
}

这让我可以使用 fileData.x 和 fileData.y 在屏幕上绘制点作为我创建的单独函数中的点，但现在我需要编写另一个函数从x 和 y 坐标与第二个文件中的 ID 匹配，问题是我找不到对齐两个数组的方法，我需要在不更改已有代码的情况下执行此操作（除非有更好的方法拆分数据并使用它）

Answer 1

我认为您对如何存储 id、x 和 y 感到困惑。您目前将它们全部存储在它们自己的数组中，将它们存储为对象数组更有意义。

然后当您遍历数组并绘制点时，您可以使用该索引来查找您应该对齐的其他点。

下面的示例应该为您指明了正确的方向。还有，这里有个linkto the p5.js sketch可以看看运行.


let dots = [];
let dotsData;
let orderData;
function preload() {
  dotsData = loadStrings('./dots.txt');
  orderData = loadStrings('./orderFile.txt');
}

function setup() {
  createCanvas(1000, 1000);
  createDots(dotsData);
}

function draw() {
  background(220);
  fill(255, 100, 200);
  
  
  for (let i = 0; i < dots.length; i++) {
     circle(dots[i].x, dots[i].y, 20);
     let goalDot = dots.find(e => e.id == orderData[i]);
     if (goalDot) {
       line(dots[i].x, dots[i].y, goalDot.x, goalDot.y);
     }
  }
}

function createDots(filename) {
  const probData = new Array(filename.length);
  for (let i = 0; i < probData.length; i++) {
    dotsData[i] = splitTokens(filename[i]);
    dots.push({
      id: dotsData[i][0],
      x: dotsData[i][1],
      y: dotsData[i][2]
    })
  }
}

我如何 sort/align 两个单独的数组？

How would I sort/align two serparate arrays?

p5.js