javascript - 如何以正向和反向方式对数组进行排序Javascript

Question

我正在尝试使用数组。我创建了两个按钮 PushUP 和 PushDown。 PushUp 按钮将以正向方式对数组进行排序，而 PushDown 则以反向方式对数组进行排序。我很努力但没有弄清楚但没有这样做。我应该写什么才能获得以下输出。此外，我将如何在单击任何 Push 按钮之前显示此数据，然后相应地按按钮更改顺序。例如，最初我想显示 2 个带有数据的按钮。

例如，点击以下按钮时的输出应该是这样的。

Original array:

1 xyz
2 abc, 123
3 asd

On clicking PushUp:

3 asd
1 xyz
2 abc, 123

On clicking PushDown:

1 xyz
2 abc, 123
3 asd

我的代码:

var details = [
{intro: "ABC"},
{due: " MON"},
{name: "XYZ", sn: "SN xxxxx"},
{lab: "Tuesday 4:30-6:30"}
];
function Push_Up(){
   details.sort();
   displayPUSH();
}
function displayPUSH() {
    document.getElementById("up").innerHTML =
    "<br>" +
    "CSIT128" + " :" + details[0].intro + "<br><br>"      + 
    "Assignment 5"+ ", " + details[1].due   + "<br><br>"    +
     details[2].name + ", " + details[2].sn + "<br><br>" +
    "Computer LAB" + " :" + details[3].lab + "<br><br>";
 }
 function Push_Down(){
    var details_after ="";
    for ( var i=0; i<details.length; i++ )
    {
        displayPUSH(); 
    } 
    document.getElementById("down").innerHTML = details_after;
 }

<button onClick="Push_Up()"> Push Up </button>
<br>
<div id="up">
</div>

<button onClick="Push_Down()"> Push Down </button>
<br>
<div id="down">
</div>
<br>

Answer 1

如果你想做 circular shift ，这是一种可能的方法:

let data = [
  'foo',
  'bar',
  'baz'
];

function output() {
  document.getElementById('results').innerHTML = data.map(item => `<li>${item}</li>`).join('');
}

document.getElementById('up').addEventListener('click', function() {
  const first = data.shift();
  data.push(first);
  output();
});

document.getElementById('down').addEventListener('click', function() {
  const last = data.pop();
  data.unshift(last);
  output();
});

output();

<button id="up">Push Up</button>
<button id="down">Push Down</button>
<ul id="results"></ul>