NEW ARTICLE
PyCharm 最近の変更を一覧表示するショートカットキー
  1. HOME
  2. javascript
  3. javascript オブジェクトの配列内の日付をソートする

javascript オブジェクトの配列内の日付をソートする

javascript オブジェクトの配列内の日付をソートする

javascriptで、オブジェクトの配列内の日付をソートするサンプルコードを記述してます。

目次

環境

  • OS windows11 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 106.0.5249.103
Javascript サンプル集はこちら

日付をソート

日付でソートするには、「getTime()」で日付を「ミリ秒」に変換してソートすることで可能です。

アロー関数の使い方
const arr = [
  {id: 2, date: new Date(2020, 1, 2)},
  {id: 1, date: new Date(2020, 1, 1)},
  {id: 3, date: new Date(2020, 2, 28)},
  {id: 5, date: new Date(2025, 1, 1)},  
  {id: 4, date: new Date(2020, 2, 29)},  
];

console.log(
    arr.sort(
        (x, y) => (x.date.getTime()) - (y.date.getTime()),
    )
)

console.log(arr);

実行結果

降順にする場合は「sort」のコールバック関数を逆にします。

const arr = [
  {id: 2, date: new Date(2020, 1, 2)},
  {id: 1, date: new Date(2020, 1, 1)},
  {id: 3, date: new Date(2020, 2, 28)},
  {id: 5, date: new Date(2025, 1, 1)},  
  {id: 4, date: new Date(2020, 2, 29)},  
];

console.log(
    arr.sort(
        (x, y) => -(x.date.getTime()) - (y.date.getTime()),
    )
)

console.log(arr);

実行結果

元の配列を変えない

元の配列を、そのままにしておきたい場合は「スプレッド構文」を使用します。

const arr = [
  {id: 2, date: new Date(2020, 1, 2)},
  {id: 1, date: new Date(2020, 1, 1)},
  {id: 3, date: new Date(2020, 2, 28)},
  {id: 5, date: new Date(2025, 1, 1)},  
  {id: 4, date: new Date(2020, 2, 29)},  
];

console.log(
    [...arr].sort(
        (x, y) => -(x.date.getTime() - (y.date.getTime())),
    )
)

console.log(arr);

実行結果

サンプルコード

以下は、
「ソート」ボタンをクリックすると、用意したオブジェクトの配列を日付でソートして表示する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container text-center w-25" style="margin-top:150px">

    <h2><span class="badge badge-info">ソート前</span></h2>
    <ul id="txt1" class="list-group"></ul>

    <h2><span class="badge badge-info">ソート後</span></h2>
    <ul id="txt2" class="list-group"></ul>

    <button id="btn" type="button" class="btn btn-raised btn-info">
      ソート
    </button>

  </div>

  <script>

    const arr = [
      { id: 2, date: new Date(2020, 1, 2) },
      { id: 1, date: new Date(2020, 1, 1) },
      { id: 3, date: new Date(2020, 2, 28) },
      { id: 5, date: new Date(2025, 1, 1) },
      { id: 4, date: new Date(2020, 2, 29) },
    ];

    const hoge = () => {

      // 表示
      disp(arr, "txt1");

      // ソート
      arr.sort(
        (x, y) => (x.date.getTime() - (y.date.getTime())),
      )

      // ソートしたものを表示する
      disp(arr, "txt2");

    }

    //フロントに表示する関数
    const disp = (arr, id) => {

      let text = [];

      // for ofを使用
      for (let item of arr) {
        text.push('<li class="list-group-item">' + JSON.stringify(item) + '</li>');
      }

      //innerHTMLを使用して表示    
      document.getElementById(id).innerHTML = text.join('');

    }

    // ボタンを取得
    let elmbtn = document.getElementById('btn');

    // クリックイベントを登録
    elmbtn.onclick = () => {
      hoge();
    };

  </script>
</body>

</html>

ソートされていることが確認できます。

また、javascriptは以下のようにdocument.getElementByIdを省略して「id」要素名のみで記述することもできます。

// クリックイベントを登録
btn.onclick  = () => {
  hoge();
};