时间戳

首页 > 解决方案 > 如何以正向和反向方式对数组进行排序Javascript

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

问题描述

我正在尝试使用数组。我创建了两个按钮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>

标签： javascript

解决方案

如果您尝试进行循环移位，这是一种可能的方法：

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>

推荐阅读