TypeScript でオブジェクトの配列を並べ替える

Migel Hewage Nimesha 2023年1月30日
  1. TypeScript オブジェクト
  2. TypeScript のオブジェクトの配列
  3. TypeScript の sort() メソッド
TypeScript でオブジェクトの配列を並べ替える

この記事では、TypeScript でオブジェクトの配列を並べ替える方法を示します。

TypeScript オブジェクト

TypeScript は厳密に型指定された言語です。プリミティブ、配列、オブジェクトタイプなどのさまざまなタイプをサポートします。

オブジェクトタイプは、プロパティを使用してデータを表すことができる特殊なタイプです。TypeScript オブジェクトは、次のように JSON オブジェクトのように見えます。

{ id: 001, username: 'rick' }

idusername は、上記のオブジェクトの 2つのプロパティです。値は各プロパティにも割り当てられています。

TypeScript では、インターフェイスを使用してカスタムオブジェクトタイプを作成できます。次のように、インターフェイスを使用してオブジェクト構造を作成できます。

interface employee {
    empId: number,
    empDesignation: string
}

上記の employee インターフェースは、employee オブジェクトを、それぞれ数値タイプと文字列タイプである empIdempDesignation の 2つのプロパティで定義します。

TypeScript のオブジェクトの配列

TypeScript は、要素のコレクションを格納できる配列タイプをサポートします。プリミティブ型の値とカスタムオブジェクトの両方を格納することもできます。

employee オブジェクトの配列を作成しましょう。

let employeesList: Array<employee> = [
    {empId: 20, empDesignation: 'senior engineer'},
    {empId: 14, empDesignation: 'junior engineer'},
    {empId: 25, empDesignation: 'program manager'},
    {empId: 12, empDesignation: 'director'}
]

上記の配列 employeesList には、4つの employee オブジェクトが含まれています。場合によっては、これらのオブジェクトを特定のプロパティで並べ替える必要があります。

これは、SQL が 1つまたは複数の列でデータを並べ替えるようなものです。TypeScript は、箱から出してソートすることをサポートします。

組み込みの sort() メソッドは、オブジェクトの配列を並べ替えることができます。

TypeScript の sort() メソッド

sort メソッドは要素の配列を受け取り、ソートされた配列を返します。返される配列のソート順を指定するために使用できるオプションの関数を受け入れます。

構文:

//1.
Array.sort()
//2.
Array.sort(<custom_function>)

Array は、ソートするオブジェクトの配列です。 <custom_function> はソート順を指定できます。

オブジェクトの配列をそのプロパティの 1つで並べ替える必要があるため、並べ替え順序とオブジェクトプロパティを決定するカスタム関数を渡して、sort メソッドを使用する必要があります。

プロパティ id で配列を並べ替えましょう。

employeesList.sort(
    (firstObject: employee, secondObject: employee) =>
    	(firstObject.empId > secondObject.empId) ? 1 : -1
);

上記の例では、矢印関数を使用してソート条件を指定しています。

関数が 1 を返すときはいつでも、それは secondObjectfirstObject よりも高いソート優先順位を持っていることを意味します。それ以外の場合、firstObject はより高いソート優先順位を取ります。

これにより、employeesList オブジェクトが empId プロパティで昇順で並べ替えられます。

出力:

TypeScript1 の sort メソッド

矢印関数内で以下の条件を使用して、同じ配列を降順で並べ替えることができます。

(firstObject: employee, secondObject: employee) =>
	(firstObject.empId > secondObject.empId) ? -1 : 1

最初に empId、次に empDesignation プロパティで並べ替える必要があるシナリオがいくつかあります。empId プロパティ値が特定のオブジェクトで同じである場合、条件演算子で empDesignation プロパティを確認できます。

let employeesList: Array<employee> = [
    {empId: 20, empDesignation: 'senior engineer'},
    {empId: 14, empDesignation: 'junior engineer'},
    {empId: 14, empDesignation: 'developer'},
    {empId: 25, empDesignation: 'program manager'},
    {empId: 12, empDesignation: 'director'}
]

employeesList.sort(
    (firstObject: employee, secondObject: employee) =>
    	(firstObject.empId > secondObject.empId) ? 1 :
    		(firstObject.empId === secondObject.empId) ? (
                (firstObject.empDesignation > secondObject.empDesignation) ? 1 : -1 )
    	: -1
);

出力:

TypeScript2 の sort メソッド

ご覧のとおり、2つのオブジェクトは同じ empId``14 を持っています。したがって、これら 2つのオブジェクトは empDesignation プロパティで並べ替えられています。

sort メソッドは、プロパティに基づいてオブジェクトを並べ替えるときに非常に強力です。複雑なタイプの並べ替えにも使用できます。

Migel Hewage Nimesha avatar Migel Hewage Nimesha avatar

Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.

関連記事 - TypeScript Array