排序数组四次，不同的权重在类型记录中

Question

我想排序一个数组四次，每次按下排序数组按钮，不同的状态应该在顶部。

0: {id: 1, status: "danger"}
1: {id: 2, status: "danger"}
3: {id: 3, status: "red"}
4: {id: 4, status: "red"}
5: {id: 5, status: "yellow"}
6: {id: 6, status: "yellow"}
7: {id: 7, status: "green"}

首先点击排序按钮：danger, danger, red, red, yellow, yellow, green，第二次按：red, red, yellow, yellow, green, danger, danger，第三次按：yellow, yellow, green, danger, danger, red, red，第四次按：green, danger, danger, red, red, yellow, yellow，第五次按下，你又回到第一次排序-- danger, danger, red, red, yellow, yellow, green

通常，我会对数组进行如下排序：

myArray.sort((x, y) => x.status < y.status ? -1 : 1);

如何扩展该类型以使颜色具有更高的值以使其再次工作？

Answer 1

通常我会像这样对数组进行排序

首先我们得解决这个问题。-)当0和x.status相同时，您需要返回y.status。一般来说，对于字符串，它是(x, y) => x.status.localeCompare(y.status)，对于数字，它是(x, y) => x.status - y.status (反向x和y从升序切换到降序)。

在您的示例中，您希望为status类型分配值，并且这些值根据单击(显然)而不同。要做到这一点，请提供状态->数字的映射，您可以根据单击的内容选择这些映射：

const sortStyles = [
    {
        danger: 0,
        red: 1,
        yellow: 2,
        green: 3,
    },
    {
        red: 0,
        yellow: 1,
        green: 2,
        danger: 3,
    },
    {
        yellow: 0,
        green: 1,
        danger: 2,
        red: 3,
    },
    {
        green: 0,
        danger: 1,
        red: 2,
        yellow: 3,
    }
];

然后是这样的：

const style = sortStyles[index]; // index = 0 for first click, 1 for second, etc.
data.sort((x, y) => style[x.status] - style[y.status]));

活生生的例子：

​

const data = [
    {id: 1, status: "danger"},
    {id: 2, status: "danger"},
    {id: 3, status: "red"},
    {id: 4, status: "red"},
    {id: 5, status: "yellow"},
    {id: 6, status: "yellow"},
    {id: 7, status: "green"}
];

const sortStyles = [
    {
        danger: 0,
        red: 1,
        yellow: 2,
        green: 3,
    },
    {
        red: 0,
        yellow: 1,
        green: 2,
        danger: 3,
    },
    {
        yellow: 0,
        green: 1,
        danger: 2,
        red: 3,
    },
    {
        green: 0,
        danger: 1,
        red: 2,
        yellow: 3,
    }
];

example("First click, sortStyles[0]:", data, sortStyles[0]);
example("Second click, sortStyles[1]:", data, sortStyles[1]);
example("Third click, sortStyles[2]:", data, sortStyles[2]);
example("Fourth click, sortStyles[3]:", data, sortStyles[3]);

function example(label, data, style) {
    console.log(label);
    console.log(data.slice().sort((x, y) => style[x.status] - style[y.status]));
}

​

Answer 2

在概念上(不太注意性能)，您需要为您的status属性定义一个顺序，然后旋转该顺序。你可以这样做：

let order = ["danger", "red", "yellow", "green"];

function click() {
  order.push(order.shift()!)
  myArray.sort((x, y) => order.indexOf(x.status) - order.indexOf(y.status))
}

因此，当您调用click()时，order数组将从列表中删除第一个元素并将其推到末尾。然后，根据myArray的status属性在order中的位置对order进行排序(如果您在order中缺少一个状态，那么不管发生什么事情，这些状态都会出现在列表的最前面；不确定您想对这种边缘情况做什么，但您可以处理它们)。

这为此代码提供了以下行为：

function show() {
  console.log(myArray.map(x => x.status).join(", "))
}

show();
for (let x = 0; x < 10; x++) {
  console.log("CLICK");
  click();
  show();
}

控制台日志：

danger, danger, red, red, yellow, yellow, green 
CLICK 
red, red, yellow, yellow, green, danger, danger 
CLICK 
yellow, yellow, green, danger, danger, red, red 
CLICK 
green, danger, danger, red, red, yellow, yellow 
CLICK 
danger, danger, red, red, yellow, yellow, green 
CLICK 
red, red, yellow, yellow, green, danger, danger 
CLICK 
yellow, yellow, green, danger, danger, red, red 
CLICK 
green, danger, danger, red, red, yellow, yellow 
CLICK 
danger, danger, red, red, yellow, yellow, green 
CLICK 
red, red, yellow, yellow, green, danger, danger 
CLICK 
yellow, yellow, green, danger, danger, red, red

看上去像你想要的。希望这会有所帮助；祝你好运！

操场链接到代码

Answer 3

谢谢你们的帮助。这是我现在使用的解决方案。

let sortStyle = {};
    switch (this.sortStatus) {
      case ('none'):
        sortStyle = {alert: 0, red: 1, yellow: 2, green: 3};
        this.myArray.sort((x, y) => sortStyle[x.status] - sortStyle[y.status]);
        this.sortStatus= 'alert';
        break;
      case ('alert'):
        sortStyle = {red: 0, yellow: 1, green: 2, alert: 3};
        this.myArray.sort((x, y) => sortStyle[x.status] - sortStyle[y.status]);
        this.myArray= 'red';
        break;
      case ('red'):
        sortStyle = {yellow: 0, green: 1, alert: 2, red: 3};
        this.myArray.sort((x, y) => sortStyle[x.status] - sortStyle[y.status]);
        this.sortStatus = 'yellow';
        break;
      case ('yellow'):
        sortStyle = {green: 0, alert: 1, red: 2, yellow: 3};
        this.myArray.sort((x, y) => sortStyle[x.status] - sortStyle[y.status]);
        this.sortStatus= 'green';
        break;
      case ('green'):
        sortStyle = {alert: 0, red: 1, yellow: 2, green: 3};
        this.myArray.sort((x, y) => sortStyle[x.status] - sortStyle[y.status]);
        this.sortStatus= 'alert';
        break;
      default:
        console.log('Error');
        break;
    }
  }