日付値を使用してオブジェクトの配列を単一のキーで並べ替える

  2. プログラミングのヒント
  3. JavaScript ハウツー
  4. 日付値を使用してオブジェクトの配列を単一のキーで並べ替える
Tahseen Tauseef 2023年10月12日
JavaScript JavaScript Array JavaScript Object
  1. JavaScript 配列とは
  2. JavaScript オブジェクトとは
  3. オブジェクトの配列とは
  4. Javascript の array.sort プロトタイプとは
  5. 日付値を使用してオブジェクトの配列を並べ替える
日付値を使用してオブジェクトの配列を単一のキーで並べ替える

この記事では、オブジェクトの配列を日付値を持つ単一のキーで並べ替える方法について説明し、次のことを理解します。

  • 配列とは
  • オブジェクトとは
  • オブジェクトの配列とは
  • JavaScript の array.sort プロトタイプとは
  • 日付値を使用してオブジェクトの配列を並べ替える方法

JavaScript 配列とは

JavaScript では、配列は 1つの変数に複数のデータ型を格納します。他のプログラミング言語とは異なり、JavaScript 配列は同じ配列に異なるデータ型を保持できます。

配列内の各アイテムは、RAM に次々に格納されます。

const randomArray = ['Tahseen', 1, 0.3, true];
console.log(randomArray);
// logs: Tahseen , 1 , 0.3 , true

配列内のすべてのアイテムには、そのインデックスを配列変数に渡すことでアクセスできます。

注
JavaScript 配列はゼロインデックスです。
console.log(randomArray[0]);
// logs: Tahseen

JavaScript オブジェクトとは

JavaScript オブジェクトは、キーと値のペアのコレクションです。

キーは、オブジェクトの特性またはプロパティです。一方、値はその対応するプロパティの値です。

const Car = {
  company: 'Tesla',
  model: 'Model 3',
  year: 2017
};

JavaScript オブジェクトプロパティの値は、オブジェクト名とプロパティ名を組み合わせることで取得できます。次のコードセグメントでそれを見ることができます。

console.log(Car.company);
// logs: Tesla

オブジェクトの配列とは

オブジェクトの配列は、JavaScript 配列内の各アイテムがオブジェクトである配列です。オブジェクトの配列は他の JavaScript 配列と似ていますが、各アイテムが JavaScript オブジェクトであるという違いがあります。

理解を深めるために、次の例を確認してみましょう。

const MyAppointments = [
  {
    'with': 'Doctor Tauseef',
    'designation': 'Dentist',
    'reason': 'Toothache',
    'date': '2021-12-01T06:25:24Z',
  },
  {
    'with': 'Abdullah Abid',
    'designation': 'Software Engineer',
    'reason': 'An Idea for a App',
    'date': '2021-12-01T06:25:24Z',
  },
  {
    'with': 'Muhammad Haris',
    'designation': 'Painter',
    'reason': 'Need to pain the house',
    'date': '2021-13-01T06:25:24Z',
  },
]

Javascript の array.sort プロトタイプとは

引数のない Array.prototype.sort() は、配列を昇順で並べ替えるために使用されます。ただし、この関数は配列要素を文字列に変換し、UTF-16 コードユニットのシーケンスに基づいてそれらを比較するため、通常のユーザーにはソートされていないように見える場合があることに注意してください。

const Months = ['March', 'Jan', 'Feb', 'Dec'];
Months.sort();
console.log(Months);
// logs: ["Dec", "Feb", "Jan", "March"]

または、比較関数を array.sort へのコールバック関数として提供することもできます。これにより、次の基準で配列が並べ替えられます。

比較関数(x,y) ソート順
return 値がゼロより大きい場合 x の前に y を配置します
return 値がゼロ未満の場合 x を y の前に配置
return 値がゼロに等しい場合 同じシーケンスを維持する 
const Numbers = [4, 2, 5, 1, 3];
Numbers.sort((x, y) => x - y);
console.log(Numbers);
// logs: [1, 2, 3, 4, 5]

日付値を使用してオブジェクトの配列を並べ替える

上記と同じ並べ替え方法を使用して、オブジェクトの配列を日付で並べ替えることができます。

let MyAppointments = [
  {
    'with': 'Doctor Tauseef',
    'designation': 'Dentist',
    'reason': 'Toothache',
    'appointment_date': '2021-12-01T06:25:24Z',
  },
  {
    'with': 'Abdullah Abid',
    'designation': 'Software Engineer',
    'reason': 'An Idea for a App',
    'appointment_date': '2021-12-09T06:25:24Z',
  },
  {
    'with': 'Muhammad Haris',
    'designation': 'Painter',
    'reason': 'Need to pain the house',
    'appointment_date': '2021-12-05T06:25:24Z',
  },
]

MyAppointments.sort(function(x, y) {
  var firstDate = new Date(x.appointment_date),
      SecondDate = new Date(y.appointment_date);

  if (firstDate < SecondDate) return -1;
  if (firstDate > SecondDate) return 1;
  return 0;
});

console.log(MyAppointments);

これにより、各日付が比較され、最初の日付が 2 番目の日付よりも小さい場合は -1 が返されます。最初の日付が 2 番目の日付よりも大きい場合、1 を返します。それ以外の場合は、0 を返します。

上記のコードセグメントは、次の配列をログに記録します。

[{
  with: 'Doctor Tauseef',
  designation: 'Dentist',
  reason: 'Toothache',
  appointment_date: '2021-12-01T06:25:24Z'
},
 {
   with: 'Muhammad Haris',
   designation: 'Painter',
   reason: 'Need to pain the house',
   appointment_date: '2021-12-05T06:25:24Z'
 },
 {
   with: 'Abdullah Abid',
   designation: 'Software Engineer',
   reason: 'An Idea for a App',
   appointment_date: '2021-12-09T06:25:24Z'
 }]

関連記事 - JavaScript Array

関連記事 - JavaScript Object