astris.design

［JS］配列の並び替えメソッド sort, reverse

JavaScriptのArrayオブジェクトの並び替えメソッドには、sortとreverseがあります。数値、アルファベット、平仮名、漢字の並び替えや、カテゴリーによる並び替えの処理について、解説します（サンプルあり）。

【目次・配列の並び替えメソッド】

sort：数値の並び替え

sortメソッドは、配列の要素を昇順に並べ替えます。
メソッドを呼び出した配列そのものを、加工します。
戻り値は、並び替え後の配列です。
要素にundefinedが含まれている場合、配列の末尾にソートされます。

sortメソッドは、引数を指定しない場合、要素を文字列として昇順に並べ替えます。
数値の大小で並び変える場合は、大小関係のルールを記述した比較関数を渡す必要があります。
比較関数は、2つの引数を受け取り、それらの大小関係を数値として返すものです。
配列を昇順で並べ替える場合、比較関数を以下のように記述します。
（第1引数をa、第2引数をbとする。）

  • aの方がbより小さい場合、負の数を返す
  • aとbの大小が等しい場合、0を返す
  • aの方がbより大きい場合、正の数を返す

配列を降順で並べ替える場合は、正負を逆にします。

構文
配列.sort((a, b) => {
  if ( aの方がbより小さい ) return -1;
  if ( aの方がbより大きい ) return 1;
  return 0;
});

サンプル

sort_number.js
const array = [100, 3, undefined, 20];
console.log(array.sort());
//「[ 100, 20, 3, undefined ]」
console.log(array.sort((a, b) => a - b));
//「[ 3, 20, 100, undefined ]」
console.log(array);
//「[ 3, 20, 100, undefined ]」

sort：アルファベットの並び替え

sortメソッドは、引数を指定しない場合、要素を文字列として昇順に並べ替えます。
要素が英語の文字列の場合は、アルファベット順に並べ替えます。
ただし、大文字と小文字の比較は、大文字の方が先になります。
大文字と小文字を区別しないで並べ替える場合は、toLowerCaseメソッドで小文字に変換して比較を行います。

sort_alphabet.js
const array = ['dog', 'bat', 'mouse', 'Pig', 'Cat'];
console.log(array.sort());
//「[ 'Cat', 'Pig', 'bat', 'dog', 'mouse' ]」
console.log(array.sort((a, b) => {
  let aLower = a.toLowerCase();
  let bLower = b.toLowerCase();
  if (aLower < bLower) return -1;
  if (aLower > bLower) return 1;
  return 0;
}));
//「[ 'bat', 'Cat', 'dog', 'mouse', 'Pig' ]」

sort：仮名の並び替え

sortメソッドは、引数を指定しない場合、要素を文字列として昇順に並べ替えます。
要素が仮名の文字列の場合は、50音順に並べ替えます。
ただし、平仮名と片仮名の比較は、平仮名の方が先になります。

sort_kana.js
const array = ['さとう', 'エトウ', 'すどう', 'いとう', 'かとう'];
console.log(array.sort());
//「[ 'いとう', 'かとう', 'さとう', 'すどう', 'エトウ' ]」

sort：漢字の並び替え

sortメソッドは、引数を指定しない場合、要素を文字列として昇順に並べ替えます。
要素が漢字の文字列の場合は、日本語の読み方通りの順序になるとは限りません。
そのため、漢字を並べ替えるには、読み方のデータで比較を行う必要があります。

sort_chinesechar.js
const array = ['佐藤', '江藤', '須藤', '伊藤', '加藤'];
console.log(array.sort());
//「[ '伊藤', '佐藤', '加藤', '江藤', '須藤' ]」
const users = [
  { name: '佐藤', reading: 'さとう' },
  { name: '江藤', reading: 'えとう' },
  { name: '須藤', reading: 'すどう' },
  { name: '伊藤', reading: 'いとう' },
  { name: '加藤', reading: 'かとう' },
];
users.sort((a, b) => {
  if (a.reading < b.reading) return -1;
  if (a.reading > b.reading) return 1;
  return 0;
});
console.log(users);
/*「[
  { name: '伊藤', reading: 'いとう' },
  { name: '江藤', reading: 'えとう' },
  { name: '加藤', reading: 'かとう' },
  { name: '佐藤', reading: 'さとう' },
  { name: '須藤', reading: 'すどう' }
]」*/

sort：カテゴリーによる並び替え

sortメソッドとindexOfメソッドを使用して、カテゴリーによる並び替えを実装することができます。
まず、並び替えの順序となるカテゴリーの配列を用意します。
並び替えを行うオブジェクト配列のプロパティの値で、カテゴリー配列を検索し、そのインデックスで比較を行います。

sort_category.js
const positions = ['PM', 'SE', 'PG'];
const members = [
  { name: '佐藤', position: 'SE' },
  { name: '江藤', position: 'PM' },
  { name: '須藤', position: 'PG' },
  { name: '伊藤', position: 'PG' },
  { name: '加藤', position: 'SE' },
];
members.sort((a, b) => {
  return positions.indexOf(a.position) - positions.indexOf(b.position);
});
console.log(members);
/*「[
  { name: '江藤', position: 'PM' },
  { name: '佐藤', position: 'SE' },
  { name: '加藤', position: 'SE' },
  { name: '須藤', position: 'PG' },
  { name: '伊藤', position: 'PG' }
]」*/

reverse：逆順に並び替え

reverseメソッドは、配列の要素を逆順に並べ替えます。
メソッドを呼び出した配列そのものを、加工します。
戻り値は、並び替え後の配列です。

reverse.js
const array = ['Cupcake', 'Donut', 'Eclair', 'Froyo', 'Gingerbread'];
console.log(array.reverse());
//「[ 'Gingerbread', 'Froyo', 'Eclair', 'Donut', 'Cupcake' ]」
console.log(array);
//「[ 'Gingerbread', 'Froyo', 'Eclair', 'Donut', 'Cupcake' ]」

まとめ

JavaScriptの配列の並び替えメソッドについて、解説しました。
配列要素の並び替えメソッドには、sortとreverseがあります。
それぞれの用途は、以下のようになります。

  • sort：汎用
  • reverse：逆順