Javascript 如何按坐标位置和颜色对对象数组进行排序？

有一个具有位置和颜色的对象数组（图上的数字）。并且需要从上到下（Y）获得一个新数组 按颜色排序。如果用文字

{blueF，yellowF，whiteF，yellowF，yellowF，blueF，blackF}

和之后：

{blueF，blueF，yellowF，yellowF，yellowF，whiteF，blackF}

我在尝试用

reduce

对

进行排序时受到了折磨。但我意识到我需要两个功能。返回顶色位置数组的一种。我会把第二个分类。
换句话说，我明白了。但目前还没有关于如何发布它的想法

const节点=[{
键入：“三角形”，
职位：{
x:10，
y:15
},
颜色：“黄色”
},
{
字体：“方形”，
职位：{
x:20，
y:55
},
颜色：“黄色”
},
{
字体：“方形”，
职位：{
x:30，
y:25
},
颜色：“蓝色”
},
{
键入：“三角形”，
职位：{
x:40，
y:45
},
颜色：“黄色”
},
{
类型：“圆圈”，
职位：{
x:10，
y:55
},
颜色：“蓝色”
},
{
类型：“圆圈”，
职位：{
x:20，
y:35
},
颜色：“绿色”
}
];
log（Nodes.sort（（a，b）=>（a.position.y>b.position.y？1:-1））；
好的，我想我知道你现在想做什么了：

根据我的想法，这将：

const colors=[]；
//这将根据颜色的顺序（在y方向）将颜色推入阵列
节点
.sort（（a，b）=>a.position.y-b.position.y）
.forEach（n=>！colors.includes（n.color）和&colors.push（n.color））；
//这将按颜色和位置对所有节点进行排序
Nodes.sort（（a，b）=>{
设iA=colors.findIndex（c=>c==a.color）；
设iB=colors.findIndex（c=>c==b.color）；
返回iA===iB？a.position.y-b.position.y:iA-iB；
});

这将首先按位置对所有节点进行排序，以便获得颜色的显示顺序（从上到下）。之后，它将按颜色和位置对所有节点进行排序。
如何确定哪个颜色比另一个颜色大？您是否希望对列表进行排序，以便如果两个项目具有不同的颜色和不同的位置，您可以按位置进行排序，还是颜色是排序时更重要的因素？黄色F中的F是什么意思？现在还不清楚。请弄清楚你到底在做什么want@BenStephens这只是一个数字，我想要的是找到Y轴上的第一个颜色代表并填充它。之后，将不再考虑该颜色的其他代表。因此，我们将获得一个颜色代表数组，并使用它对数组进行排序。（添加了img）因此您希望按颜色对它们进行排序，如果颜色相同，则按position@MrCodingB不结果表明，通过坐标和颜色两种方式。首先，我必须按照从上到下的顺序获取数组。然后使用它对原始数组进行排序。（更新图片）在这里，通过颜色进行比较的功能是我想做的第二个功能。我对第一个有问题。这将创建一个颜色数组，如示例中的const colors=[“蓝色”、“黄色”、“白色”、“黑色”]我更新了答案