JavaScriptにおけるオブジェクト配列のソート方法

概要: このチュートリアルでは、オブジェクトのプロパティの値に基づいてオブジェクト配列をソートする方法を学びます。

Array sort() メソッドの紹介

JavaScriptのArrayオブジェクトは、配列項目をその場でソートし、ソートされた配列を返すsort()メソッドを提供します。

sort()メソッドの構文を以下に示します。

sort(comparator)

この構文において

comparatorは、配列内の項目の順序を決定するオプションの関数です。

comparator関数は、比較する配列の要素である2つのパラメータaとbを受け取ります。

function fn(a,b) {
   // ...
}Code language: JavaScript (javascript)

comparator関数は、aがbより大きいか、小さいか、等しいかを決定する数値を返す必要があります。

負の数は、sort()関数にaをbの前に配置するよう指示します。
正の数は、sort()関数にaをbの後に配置するよう指示します。
0またはNaNは、sort()関数にaとbを等しいと扱うよう指示します。

sort()メソッドは、項目がソートされた同じ元の配列への参照を返します。言い換えれば、元の配列内の項目の順序を変更します。

ソートされた項目を含む元の配列のコピーを返したくない場合は、toSorted()メソッドを使用できます。

sort()メソッドを使用してオブジェクト配列をソートする方法を説明します。

数値によるオブジェクト配列のソート

次の例は、employeeオブジェクトの配列をスコアで昇順にソートする方法を示しています。

let employees = [
  { name: 'John', dob: 'Dec 15, 2007', score: 80 },
  { name: 'Ana', dob: 'Jan 15, 2009', score: 75 },
  { name: 'Zion', dob: 'Feb 15, 2011', score: 90 },
];

employees.sort((a, b) => a.score - b.score);

employees.forEach((e) => {
  console.log(`${e.name} ${e.score}`);
});
Code language: JavaScript (javascript)

出力

Ana 75
John 80
Zion 90

動作原理

まず、各オブジェクトにname、dob、scoreのプロパティを持つemployeeオブジェクトの配列を宣言します。

次に、sort()メソッドを使用してスコアで従業員をソートします。

employees.sort((a, b) => a.score - b.score);Code language: JavaScript (javascript)

sort()メソッドは次の比較関数を使用します。

(a, b) => a.score - b.scoreCode language: PHP (php)

この例では、aとbはどちらもname、dob、scoreプロパティを持つemployeeオブジェクトです。比較関数は、2つのemployeeオブジェクトのスコアを比較します。

スコアの降順での従業員のソート

スコアで降順に従業員をソートするには、比較関数を次のように変更する必要があります。

let employees = [
  { name: 'John', dob: 'Dec 15, 2007', score: 80 },
  { name: 'Ana', dob: 'Jan 15, 2009', score: 75 },
  { name: 'Zion', dob: 'Feb 15, 2011', score: 90 },
];

employees.sort((a, b) => b.score - a.score);

employees.forEach((e) => {
  console.log(`${e.name} ${e.score}`);
});
Code language: JavaScript (javascript)

出力

Zion 90
John 80
Ana 75

文字列によるオブジェクト配列のソート

次の例は、従業員の名前をアルファベット順にソートする方法を示しています。

let employees = [
  { name: 'John', dob: 'Dec 15, 2007', score: 80 },
  { name: 'Ana', dob: 'Jan 15, 2009', score: 75 },
  { name: 'Zion', dob: 'Feb 15, 2011', score: 90 },
];

employees.sort((a, b) => a.name.localeCompare(b.name));

employees.forEach((e) => {
  console.log(`${e.name} ${e.score}`);
});Code language: JavaScript (javascript)

出力

Ana
John
Zion

日付によるオブジェクト配列のソート

従業員を誕生日（dob）でソートするには、

dobを文字列からDateオブジェクトに変換します。
日付で従業員をソートします。

次のコードは、このアイデアを示しています。

let employees = [
  { name: 'John', dob: 'Dec 15, 2007', score: 80 },
  { name: 'Ana', dob: 'Jan 15, 2009', score: 75 },
  { name: 'Zion', dob: 'Feb 15, 2011', score: 90 },
];

employees.sort((a, b) => new Date(a.dob) - new Date(b.dob));

employees.forEach((e) => {
  console.log(`${e.name} ${e.dob}`);
});Code language: JavaScript (javascript)

出力

John - Dec 15, 2007
Ana - Jan 15, 2009
Zion - Feb 15, 2011

まとめ

指定されたプロパティの値でオブジェクト配列をソートするには、比較関数付きのsortメソッドを使用します。

このチュートリアルは役に立ちましたか？