JavaScript:sort()を用いた並び替え方法のサンプル

Tips

JavaScript:sort()を用いた並び替え方法のサンプル

JavaScriptで配列内の要素を並び替えたい(ソートしたい)場合に使用するsort()メソッドは、デフォルトでは各要素の文字列比較に基づいて辞書順にソートするため、多くの場合は利用する際に何らかのルールを指定すると思います。
いずれも簡易的にはなりますが、その何らかのルールを用いたsort()の記述サンプルを紹介します。

非破壊ソートを行う

sort()は元の配列内容を変更する破壊的メソッドとなるので、ソート処理は行いたいけど元の配列は別の処理で使うなどの理由でそのまま残しておきたい場合は、処理を行う前にあらかじめ配列を複製しておき、その複製した配列に対して処理を行う必要があります。
配列を複製する方法はいくつかありますが、代表的で且つ短い記述量でできるものとしては下記があります。

JavaScript

// 元の配列
const array = ['red', 'blue', 'yellow', 'green', 'orange'];

// slice()で複製
const copyArray01 = array.slice();

// Array.from()で複製
const copyArray02 = Array.from(array);

// スプレッド構文で複製
const copyArray03 = [...array];

ちなみに、以下でsort()の使用例をいくつか紹介していきますが、サンプルコードとして記載しているものはいずれもスプレッド構文で複製したものに対して処理を行っています。

数値を基準に昇順・降順に並び替える

数値の大きさで並び替える場合は下記のように記述し、サンプルコードのascArrayで行っている処理が昇順、descArrayで行っている処理が降順となります。

JavaScript

const array = [2, 8, 1, 4, 9, 7, 10, 5, 3, 6];

const ascArray = [...array].sort((a, b) => a - b);
console.log(ascArray);  // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const descArray = [...array].sort((a, b) => b - a);
console.log(descArray); // [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

文字列を長さを基準に昇順・降順へ並び替える

文字列の長さで並び替える場合はlengthを使用します。

JavaScript

const array = ['HTML', 'JavaScript', 'Go', 'PHP', 'Python', 'Swift', 'CSS', 'Ruby'];

const ascArray = [...array].sort((a, b) => a.length - b.length);
console.log(ascArray);  // ['Go', 'PHP', 'CSS', 'HTML', 'Ruby', 'Swift', 'Python', 'JavaScript']

const descArray = [...array].sort((a, b) => b.length - a.length);
console.log(descArray); // ['JavaScript', 'Python', 'Swift', 'HTML', 'Ruby', 'PHP', 'CSS', 'Go']

日付を基準に昇順・降順へ並び替える

日付で並び替える場合はnew Date()を使用します。

JavaScript

const array = ['1940/10/9', '1967/2/20', '1943/2/25', '1942/6/18', '1969/1/14', '1940/7/7', '1965/5/16'];

const ascArray = [...array].sort((a, b) => new Date(a) - new Date(b));
console.log(ascArray);  // ['1940/7/7', '1940/10/9', '1942/6/18', '1943/2/25', '1965/5/16', '1967/2/20', '1969/1/14']

const descArray = [...array].sort((a, b) => new Date(b) - new Date(a));
console.log(descArray); // ['1969/1/14', '1967/2/20', '1965/5/16', '1943/2/25', '1942/6/18', '1940/10/9', '1940/7/7']

大文字・小文字関係なくアルファベット順に並び替える

例として下記のような配列があったとします。

JavaScript

const array = ['red', 'Blue', 'yellow', 'green', 'Orange', 'Pink', 'aqua', 'purple', 'White', 'black'];

これをアルファベット順に並び替えとなると、アルファベットはA(a)から始まるので['aqua', 'black', 'Blue', 'green', ...]のようになるのを想定しますが、単純にsort()を実行するだけでは下記のように大文字の文字列が先頭から並びます。

JavaScript

const sortArray = [...array].sort();
console.log(sortArray); // ['Blue', 'Orange', 'Pink', 'White', 'aqua', 'black', 'green', 'purple', 'red', 'yellow']

大文字・小文字関係なくアルファベット順で並び替える場合は下記のようにtoLowerCase()を使用し、一時的に文字列を小文字に変換してから比較を行うことで想定通りのアルファベット順になります。

JavaScript

const sortArray = [...array].sort((a, b) => a.toLowerCase() < b.toLowerCase() ? -1 : 1);
console.log(sortArray); // ['aqua', 'black', 'Blue', 'green', 'Orange', 'Pink', 'purple', 'red', 'White', 'yellow']

独自の並びルールに基づいて並び替える

こちらは上で紹介してきたものとは違い、予め並び順の正解となるルール(サンプルコードのorderRule)を用意しておき、その並び順に合わせて指定した配列内の要素を並び替えるものです。

JavaScript

const orderRule = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'],
      array = ['午', '辰', '卯', '子', '申'];

const sortArray = [...array].sort((a, b) => orderRule.indexOf(a) - orderRule.indexOf(b));
console.log(sortArray); // ['子', '卯', '辰', '午', '申']

オブジェクトを並び替える

上で紹介してきたものはすべて配列を例にしてきましたが、もちろんオブジェクトでも使用できます。
ここでは例として下記のようなオブジェクトがあったとします。

JavaScript

const array = [
  { id: 5, name: 'Banana', price: 400 },
  { id: 1, name: 'Grape', price: 600 },
  { id: 3, name: 'Orange', price: 300 },
  { id: 4, name: 'Apple', price: 300 },
  { id: 2, name: 'Strawberry', price: 300 },
];

ひとつの値を基準に並び替える

サンプルオブジェクトには5種類の果物がバラバラに格納されていますが、これをpriceの値を基準に昇順へ並び替えたい場合は下記のように記述します。

JavaScript

const sortArray = [...array].sort((a, b) => a.price - b.price);
console.log(sortArray);
// [
//   {id: 3, name: 'Orange', price: 300}
//   {id: 4, name: 'Apple', price: 300}
//   {id: 2, name: 'Strawberry', price: 300}
//   {id: 5, name: 'Banana', price: 400}
//   {id: 1, name: 'Grape', price: 600}
// ]

複数の値を基準に並び替える

並び替えのルールはひとつの値だけでなく複数の値を基準にすることもできます。
例えば、priceの値を基準に降順へ並び替えつつ、priceの値が同じ場合はさらにidの値を基準に昇順へ並び替えたい場合は下記のように記述します。

JavaScript

const sortArray = [...array].sort((a, b) => (b.price - a.price) || (a.id - b.id));
console.log(sortArray);
// [
//   {id: 1, name: 'Grape', price: 600}
//   {id: 5, name: 'Banana', price: 400}
//   {id: 2, name: 'Strawberry', price: 300}
//   {id: 3, name: 'Orange', price: 300}
//   {id: 4, name: 'Apple', price: 300}
// ]

Close the search window,
please press close button or esc key.