如何反轉一組按日期排序的物件的順序？

我能夠按日期對下面串列中的物件進行正確排序。我還希望能夠在單擊按鈕時以相反的順序對它們進行排序。

如何在單擊時反向排序物件？

//array of objects
const cards = [
  {
    title: 'One Fish',
    sub: '(hover me)',
    isGreen: true,
    datePub: `November 11, 2021`
  },
  {
    title: 'Two Fish',
    sub: '(hover me)',
    isGreen: false,
    datePub: `November 11, 2020`
  },
  {
    title: 'Red Fish',
    sub: '(hover me)',
    isGreen: true,
    datePub: `December 21, 2021`
  },
  {
    title: 'Blue Fish',
    sub: '(hover me)',
    isGreen: true,
    datePub: `January 11, 2019`
  },
  {
    title: 'By Dr. Seuss',
    sub: '(hover me)',
    isGreen: false,
    datePub: `March 05, 2018`
  }  
];

//sorts by year, then month, then day
cards.sort((a, b) => new Date(b.datePub) - new Date(a.datePub));

//reverses date order on click
reverse.addEventListener('click', function() {
  cards.sort((b, a) => new Date(a.datePub) - new Date(b.datePub));
});

//create html
let cardsTemplate = (cardData) => {
  return `
    <div hljs-subst">${cardData.isGreen ? `green` : ``}">
      <h2>${cardData.title}</h2>
      <h4>${cardData.sub}</h4>
      <p>${cardData.datePub}</p>
    </div>  
  `;  
}

//output
cardGroup.innerHTML = `
  ${cards.map(cardsTemplate).join('')}
`;

.container {
  display: flex;
  flex-direction: row;
  padding: 0.5rem;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  background: lightblue;
  flex-wrap: wrap;
  flex-direction: column;
  margin: 0 0.5em;
  padding: 0.5em;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}
.card.green {
  background: lightgreen;
}
.card:hover {
  background: darkblue;
  color: white;
  cursor: pointer;
}

<div class="container" id="cardGroup"></div>
<button type="button" id="reverse">Reverse Order</button>

uj5u.com熱心網友回復：

您需要在比較函式中交換a和b并重新呈現您的 HTML。

reverse.addEventListener('click', function() {
  cards.sort((a, b) => new Date(a.datePub) - new Date(b.datePub));

  cardGroup.innerHTML = `
    ${cards.map(cardsTemplate).join('')}
  `;
});

uj5u.com熱心網友回復：

將所有內容包裝在外部函式中并使按鈕切換為一個類：.reverse它決定了事件處理程式如何對陣列進行排序。

const cards = [{
    title: 'One Fish',
    sub: '(hover me)',
    isGreen: true,
    datePub: `November 11, 2021`
  },
  {
    title: 'Two Fish',
    sub: '(hover me)',
    isGreen: false,
    datePub: `November 11, 2020`
  },
  {
    title: 'Red Fish',
    sub: '(hover me)',
    isGreen: true,
    datePub: `December 21, 2021`
  },
  {
    title: 'Blue Fish',
    sub: '(hover me)',
    isGreen: true,
    datePub: `January 11, 2019`
  },
  {
    title: 'By Dr. Seuss',
    sub: '(hover me)',
    isGreen: false,
    datePub: `March 05, 2018`
  }
];

function main(array) {
  const cG = document.querySelector('#cardGroup');
  const toggle = document.querySelector('#toggle');

  const dateOrd = array => array.sort((a, b) => new Date(a.datePub) - new Date(b.datePub));

  const dateRev = array => array.sort((a, b) => new Date(b.datePub) - new Date(a.datePub));

  const buildDeck = array => {
    cG.innerHTML = '';
    array.forEach(obj => {
      cG.insertAdjacentHTML('beforeEnd', `<div hljs-subst">${obj.isGreen ? `green` : ``}"><h2>${obj.title}</h2><h4>${obj.sub}</h4><p>${obj.datePub}</p></div>`);
    });
  };

  toggle.addEventListener('click', function() {
    this.classList.toggle('reverse');
    let data;
    if (this.classList.contains('reverse')) {
      data = dateOrd(array);
    } else {
      data = dateRev(array);
    }
    buildDeck(data);
  });
  buildDeck(dateOrd(array));
  toggle.classList.toggle('reverse');
};

main(cards);

.container {
  display: flex;
  flex-direction: row;
  padding: 0.5rem;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  background: lightblue;
  flex-wrap: wrap;
  flex-direction: column;
  margin: 0 0.5em;
  padding: 0.5em;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}

.card.green {
  background: lightgreen;
}

.card:hover {
  background: darkblue;
  color: white;
  cursor: pointer;
}

#toggle {
  display: inline-block;
  width: 150px;
  cursor: pointer;
}
#toggle.reverse::before {
  content: 'Reverse ';
}

<div id="cardGroup" class="container"></div>
<button id="toggle" type="button">Order</button>

標籤：javascript 排序

上一篇：如何根據另一個串列對元組串列進行排序

下一篇：如何使用Python中的比較器按頻率對整數串列進行排序？