【JavaScript】sort()で配列の要素を並び替える

こんにちは！Kです！

今回は、JavaScriptで配列の中身の並び順を変えることができる「sort()」について書いていきたいと思います。

結構活用することがあると思うのでぜひ覚えておきましょう！

sort()とは？

sort（ソート）メソッドとは、簡単にいうと配列内の中身を並び替えるメソッドです。

例えば、クラスメートの名前の情報がランダムに配列に入っていて、それを昇順や降順で並び替えたい場合などにsortメソッドが使えます！

sort()の使い方

配列内の文字列を並び替えるときは特に難しくありません。
そのままsortメソッドを使えばいいだけです。

下の例では、文字列が格納されている配列に対してsortメソッドを使うとアフファベット順に並び替えられます。

var str = ['sa', 'm', 'p', 'le'];
str.sort();
console.log(str);

■実行結果

["le", "m", "p", "sa"]

引数を指定しない場合は、文字の辞書順で並び替えられます。
文字列の並び替えはsortメソッドを使うだけで簡単に並び替えが可能です。

数値やオブジェクトの場合

まず、昇順や降順を自在に使えるようになるために言葉の勉強として「比較関数」について知っておきましょう。

簡単に説明すると、二つの値を比較しながら一つずつ順番を入れ替えていく手法をとる関数のことを「比較関数」と言います。

先ほども書きましたが、sortメソッドの引数にその比較関数を指定しなかった場合、対象の要素が文字列として（辞書順で）比較されますの気をつけてください。

それでは、数字について昇順（小さい順）、降順（大きい順）でソートするコード例をみてみましょう！

昇順

// 昇順
function ascendingNum(a, b) {
  return a - b;
}
 
var num = [10, 8, 1, 15];
num.sort(ascendingNum);
console.log(num);

■実行結果

[1, 8, 10, 15]

降順

// 降順
function descendingNum(a, b) {
  return b - a;
} 

var num = [10, 8, 1, 15];
num.sort(descendingNum); 
console.log(num);

■実行結果

[15, 10, 8, 1]

このようにsortメソッドに比較関数を指定することで昇順、降順での並び替えが実現できます(^^)

オブジェクトのソート

以前記事にもしましたが、オブジェクトとは一般的に「プロパティ: 値」の形になっていますが、その並び替えについても簡単に説明したいと思います。

これも先ほど説明した比較関数を使えばいいだけです。

例を見た方が早いので見てみましょう！

var obj = [
  {name: 'タナカ', age: 28},
  {name: 'サトウ', age: 37},
  {name: 'スズキ', age: 22},
  {name: 'イイダ', age: 30}
];

// 昇順で並び替え
obj.sort(function(a, b) {
  if (a.name > b.name) {
    return 1;
  } else {
    return -1;
  }
});
console.log(obj);

■実行結果

[ {name: "イイダ", age: 30}, 
  {name: "サトウ", age: 37}, 
  {name: "スズキ", age: 22}, 
  {name: "タナカ", age: 28} ]

例で「a.name > b.name」としていますが、このようにプロパティを比較することで昇順での並び替えを可能にしています。

※補足
sortメソッドは破壊的メソッドと言われ、元の配列は残らず変更されてしまいますのでご注意ください。
元の配列を残しておきたい場合は、配列をコピーするなどして対応しましょう！

最後に

データを並び替える機会はよくあることなので、並び替えをしたいときはsortメソッドを使って華麗に並び替えましょう！笑

昇順、降順で並び替えをしたい！というときはぜひこの記事を参考にしてみてください！

それでは、また！

Follow me!