Javascriptで配列をソートする方法

Javascriptで配列をソートする方法

Javascriptでソートを行う方法

Javascriptで配列をソートするには、sort() を使用します。使用方法は以下の通りです。

文字列の配列をソートするサンプル

// sort()で文字列の配列をソートする。
var array = ['C', 'B', 'D', 'E', 'A'];
var sortedArray = array.sort();
console.log(sortedArray); // [ 'A', 'B', 'C', 'D', 'E' ]
console.log(array); // [ 'A', 'B', 'C', 'D', 'E' ]

文字列の配列の sort メソッドを実行することで、戻り値としてソートされた配列を返します。ちなみにこのメソッドは破壊的なソートを行うため、ソート前の配列も同様にソートされます。一応注意しておきましょう。

比較関数がないと文字列としてソートされる

文字列の配列と同様に数値の入った配列をソートすると、文字列としてソートされてしまいます。

// 文字列としてソートされてしまっている
var array = [8, 1, 9, 12, 10];
var sortedArray = array.sort();
console.log(sortedArray); // [ 1, 10, 12, 8, 9 ]

これは比較関数が与えられないと、sort メソッドが各要素を文字列に変換したデータを比較して、辞書順でソートするためです。これを正しく数値としてソートするには、比較関数を引数として sortメソッドに渡してやります。

比較関数の指定

sort メソッドは、引数に compareFunction(比較関数) を受け取ることができます。

比較関数は、function compare(a, b) { } のように、比較を行う要素2つを受け取る関数として定義します。a, b 値を比較し、戻り値で大小の判定結果を返します。

  • 戻り値 < 0: a が b より小さい (a, b の順)
  • 戻り値 = 0: a と b が等しい (並び順は変わらない)
  • 戻り値 > 0: a が b より大きい (b, a の順)

例えば、数値順でソートするには比較関数を以下のように定義します。

数値の配列をソートするサンプル

// 数値用の比較関数を定義
function compareNumbers(a, b) {
  return a - b;
}

var array = [8, 1, 9, 12, 10];
var sortedArray = array.sort(compareNumbers);
console.log(sortedArray); // [ 1, 8, 9, 10, 12 ]

数値順で比較を行うための比較関数を定義し、sortメソッドに渡してやるとうまくソートされます。

数値順の比較は、a が b より小さいと負の数を返せばよいので、単純に a - b の結果を返せばよいです。

独自オブジェクトの配列をソートする

比較関数を使えな、独自に定義したオブジェクトの配列に対してもソートできます。たとえば以下のような年齢(age)と名前(name)を持ったオブジェクトの配列を定義し、それを並べ替えてみます。

年齢昇順で並び替えるとすると、比較関数内でageを参照して比較するとよいでしょう。

// オブジェクトについてもソート可能
var persons = [
  { age: 22, name: "次郎" },
  { age: 25, name: "太郎" },
  { age: 21, name: "三郎" },
  { age: 24, name: "花子" },
];
var sortedArray = persons.sort(compareAge);
console.log(sortedArray);

// [ { age: 21, name: '三郎' },
//   { age: 22, name: '次郎' },
//   { age: 24, name: '花子' },
//   { age: 25, name: '太郎' } ]

これでどのようなデータの配列についても並べ替えることができるようになりました。

破壊的ソートと非破壊的ソート

前述のとおり、sortメソッドは破壊的なソートを行うため、元の配列の中身もソートされてしまいます。場合によってはもとの配列はそのままで、新しいソート済の配列を生成して返してほしい場合もあるかもしれません。

非破壊的なソートを行うためには、slice() で配列のコピーを作成してからsortメソッドを呼びだします。

// 非破壊的なソートなのでで元の配列が書き換わっていない
var array = ['C', 'B', 'D', 'E', 'A'];
var sortedArray = array.slice().sort();
console.log(sortedArray); // [ 'A', 'B', 'C', 'D', 'E' ]
console.log(array) // [ 'C', 'B', 'D', 'E', 'A' ]

まとめ

  • sort() で配列のソートができる。
  • sort() は破壊的なソート。
  • sort() は比較関数を指定しないと文字列として辞書順ソート。
  • 非破壊的なソートを行う場合は、slice() を挟む。

以上です。

参考URL

Javascriptカテゴリの最新記事