sort() を使用して任意の順番で並び替え

April 11

・javascript

sort() を使用して、昇順や降順ではない任意の順番を指定して、配列を並び替える方法です。

sort() メソッドは配列の要素を並び替えるメソッドで、オリジナルの配列自体を変更する mutable なメソッドです。

基本的な使い方

デフォルトでは昇順に並び替えが行われます。

const cities = ["Tokyo", "Osaka", "Kyoto", "Nagoya"];

cities.sort();

console.log(cities); // Kyoto, Nagoya, Osaka, Tokyo

また、 sort() メソッドは値を文字列として並び替えを行うため、数値の並び替えを行う場合は比較関数により正しい結果が得られます。

const numbers = [58, 100, 1, 5, 32, 10];

/** 文字列として並び替え */
numbers.sort();
console.log(numbers); // 1, 10, 100, 32, 5, 58

/** 比較関数 */
numbers.sort((a, b) => a - b);
console.log(numbers); // 1, 5, 10, 32, 58, 100

任意の順番で並び替える方法

並び替えは比較関数で行います。数値の比較では単純に配列の値である数値の大小の比較でした。任意の順番の場合は、配列の要素の値が基準となる配列ではどの位置にあるか（インデックス番号）を indexOf() で調べ、そのインデックス番号の比較により並び替えを行います。

Demo & Source（CodePen）

並び替えを行うデータの例です。 genre の値を基に任意の順番で並び替えを行います。

const DATA = [
  { name: "Interstellar", genre: "Sci-fi" },
  { name: "Tenet", genre: "Action" },
  { name: "Dunkirk", genre: "Drama" },
  { name: "Inception", genre: "Adventure" },
  { name: "The Dark Knight", genre: "Action" },
  { name: "Memento", genre: "Mystery" },
];

1. 並び替えの基準となる任意の配列を作成する

const order = ["Action", "Adventure", "Drama", "Mystery", "Sci-fi"];

2. 並び替えを実行する

比較は配列 DATA の各要素が持つ genre で行います。コード内の x.genre y.genre で比較対象となる要素の genre の値を取得しています。

そして order.indexOf(x.genre) order.indexOf(y.genre) で、取得した値の order におけるインデックス番号をそれぞれ取得しています。

DATA.sort((x, y) => {
  return order.indexOf(x.genre) - order.indexOf(y.genre);
});

例えば配列の1つ目の要素 { name: "Interstellar", genre: "Sci-fi" } の genre は Sci-fi です。 order における Sci-fi のインデックス番号は 4 です。次の要素 { name: "Tenet", genre: "Action" } も同様にインデックス番号を取得すると 0 です。

Interstellar と Tenet の比較は 4 - 0 となり結果は positive (+) なので、Tenet (y) が Interstellar (x) より前に並び替えられます。比較の結果が negative (-) の場合は、x が y より前に並び替えられ、比較の結果が0の場合は元の順序が維持されます。

この比較が配列の全要素に行われ、並び替えられた配列が返されます。

基準となる order の順に配列の要素が並び替えられました 🎉

console.log(DATA);
/*
[
  {name: "Tenet", genre: "Action"},
  {name: "The Dark Knight", genre: "Action"},
  {name: "Inception", genre: "Adventure"},
  {name: "Dunkirk", genre: "Drama"},
  {name: "Memento", genre: "Mystery"},
  {name: "Interstellar", genre: "Sci-fi"}
]
*/