比较打字稿中的颜色字符串

Question

我试图将以下颜色字符串相互比较，我使用localeCompare进行此操作，在这里我们有以下颜色:"黄色"、"绿色"、"白色"和透明。这些都保存在变量'status'中，如下所示。

我如何比较这些字符串的最佳方式?有没有我可以设置的排序顺序?

arr1.sort((a, b) => (a.status != null) ? a.status.localeCompare(b.status) : 0)

我试着逆转它，但这是纯粹的随机的东西，我有困难理解这个。

arr1中存储了多个数据，如

name: 'name'
firstName: 'firstname'
status: 'yellow'

我有一个已经渲染的表格，在这个表格中，我们希望黄色第一次显示，绿色第二次显示，白色在那之后，透明在表格的末尾。

黄色

绿色
白色
透明

使用localeCompare，当我按字母顺序排序时，当然黄色显示在列表的末尾。

Answer 1

既然字符串中似乎没有一个可以使用的明确值，那么您自己定义顺序如何:

type StatusColor = 'yellow' | 'green' | 'white' | 'transparent';
const colorOrder: Record<StatusColor, number> = {
yellow: 0,
green: 1,
white: 2,
transparent: 3
};
const exampleStatus: StatusColor[] = ['yellow', 'white', 'transparent', 'green', 'green', 'yellow', 'transparent', 'yellow'];
exampleStatus.sort((a, b) => colorOrder[a] - colorOrder[b]);
console.log(exampleStatus); // [ "yellow", "yellow", "yellow", "green", "green", "white", "transparent", "transparent" ]