JavaScript中如何按坐标位置与颜色对图形对象数组排序

核心逻辑分为两步，完全匹配你提到的实现思路：

• 第一步：用reduce统计每个颜色对应的最小Y轴坐标（即该颜色最靠上的元素的位置）
• 第二步：自定义sort的排序规则，优先按颜色的最小Y值排序保证组的顺序，再按颜色排序保证同色元素聚合，最后同色内部按Y值排序

完整实现代码 #

const Nodes = [{
    type: "triangle",
    position: {
      x: 10,
      y: 15
    },
    color: "yellow"
  },
  {
    type: "square",
    position: {
      x: 20,
      y: 55
    },
    color: "yellow"
  },
  {
    type: "square",
    position: {
      x: 30,
      y: 25
    },
    color: "blue"
  },
  {
    type: "triangle",
    position: {
      x: 40,
      y: 45
    },
    color: "yellow"
  },
  {
    type: "circle",
    position: {
      x: 10,
      y: 55
    },
    color: "blue"
  },
  {
    type: "circle",
    position: {
      x: 20,
      y: 35
    },
    color: "green"
  }
];

// 第一步：统计每个颜色的最小Y坐标
const colorMinY = Nodes.reduce((acc, node) => {
  const { color, position: { y } } = node;
  if (!acc[color] || y < acc[color]) {
    acc[color] = y;
  }
  return acc;
}, {});

// 第二步：多优先级排序，复制原数组避免sort原地修改原始数据
const sortedNodes = [...Nodes].sort((a, b) => {
  // 优先按颜色的最小Y值排序，决定不同颜色组的先后顺序
  const minY_A = colorMinY[a.color];
  const minY_B = colorMinY[b.color];
  if (minY_A !== minY_B) {
    return minY_A - minY_B;
  }
  // 最小Y值相同时按颜色名称排序，保证同颜色元素聚合在一起
  if (a.color !== b.color) {
    return a.color.localeCompare(b.color);
  }
  // 同颜色内部按Y轴从小到大排序，实现同色元素从上到下排列
  return a.position.y - b.position.y;
});

console.log(sortedNodes);

输出结果说明 #

用示例中的Nodes数组运行后，排序结果顺序为：

1. 所有黄色元素（黄色最小Y为15，是所有颜色里最小的），内部按Y从小到大排列：y=15的三角形 → y=45的三角形 → y=55的正方形
2. 所有蓝色元素（蓝色最小Y为25），内部按Y从小到大排列：y=25的正方形 → y=55的圆形
3. 所有绿色元素（绿色最小Y为35）：y=35的圆形
   完全满足「同色归组、组按最靠上元素排序、组内从上到下排序」的需求。

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