在 typescript 中以不同的权重对数组进行四次排序

Question

I want to sort an array four times, each time the sort-array-button is pressed a different status should be on top.

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"}

First click on the sort button: danger, danger, red, red, yellow, yellow, green second press: red, red, yellow, yellow, green, danger, danger third press: yellow, yellow, green, danger, danger, red, red fourth press: green, danger, danger, red, red, yellow, yellow and with the fifth press you are back to the first sort again danger, danger, red, red, yellow, yellow, green

Normally I sort arrays like this:

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

How can I extend the sort to give a color a higher value to make this work again?

Answer 1

Normally I sort arrays like this

First we have to fix that. :-) You need to return 0 when x.status and y.status are the same. In general, for strings it's (x, y) => x.status.localeCompare(y.status) and for numbers it's (x, y) => x.status - y.status (reverse x and y to switch from ascending to descending).

In your case, you want to assign values to the status types, and those values differ based on the click (apparently). To do that, give yourself mappings of status->number that you can pick based on what click it is:

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,
    }
];

Then the sort is:

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

Live Example:

 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

Conceptually (and not paying much attention to performance), you need to define an order for your status properties, and then rotate that order. You could do it like this:

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

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

So when you call click() , the order array will take the first element off the list and push it onto the end. And then you sort myArray based on the location of its status property in order (and if you are missing a status in order you can expect those to appear at the very front of the list no matter what; not sure what you want to do about edge cases like this, but you can handle them).

This gives the following behavior for this code:

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

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

Console log:

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

Looks like what you want. Hope that helps; good luck!

Playground link to code

Answer 3

Thank you all for your help. This is the working solution I'm using now.

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;
    }
  }