JavaScript sort の使い方 #2

株式会社リュディアです。JavaScript sort の 使い方 #1 に続き、JavaScript でサポートしている高階関数の1つである sort メソッド（以下、sort ） についてまとめてみます。掲載するソースコードはすべて GAS の開発環境で動作確認をしています。

文字列として sort、数字の大小による sort は JavaScript sort の使い方 #1 でまとめているので今回は応用編です。前回の復習もかねて以下の例から始めます。この例は元配列の要素を数字が大きいものから小さい順に並べるもので前回と方向は逆ですが簡単ですね。ちなみに、大きいものから小さい順にに並べることを降順といいます。

function myFunction4() {
 const inputArray = [ 1, 3, 10, 17, 20, 31 ] ;
 
 inputArray.sort( function ( a, b ) {
                   return b - a;
                  } );
 
 console.log( inputArray );
}

// 実行結果
//  [ 31, 20, 17, 10, 3, 1 ]

もう気づかれているかもしれませんが、map や reduce とは異なり sort は元配列を破壊します。map や reduce では元配列はそのままで戻り値として新しい配列や値を返しました。これは sort を使うときの注意点です。では元配列は保持したまま戻り値として sort した配列を返すにはどうすればよいでしょうか？

function myFunction5() {
 const inputArray = [ 1, 3, 10, 17, 20, 31 ] ;
 
 const resultArray = inputArray.slice().sort( function ( a, b ) {
                                                return b - a;
                                              } );
 
 console.log( inputArray );
 console.log( resultArray );
}

// 実行結果
//  [ 1, 3, 10, 17, 20, 31 ]
//  [ 31, 20, 17, 10, 3, 1 ]

この例では slice( ) を使っています。実行結果を見ると元配列は保持されたまま sort 後の配列は降順になっていることがわかります。

ついでに配列の順番をひっくり返すメソッド reverse も一緒にまとめておきます。

function myFunction6() {
 const inputArray = [ 1, 3, 10, 17, 20, 31 ] ;
 
 const resultArray = inputArray.slice().sort( function ( a, b ) {
                                                return b - a;
                                              } );
 console.log( inputArray );
 console.log( resultArray );
 
 resultArray.reverse();
 
 console.log( resultArray );
}

// 実行結果
//  [ 1, 3, 10, 17, 20, 31 ]
//  [ 31, 20, 17, 10, 3, 1 ]
//  [ 1, 3, 10, 17, 20, 31 ]

配列の順序がひっくり返っているのがわかりますね。この例からわかるように reverse も元配列を破壊します。破壊されたくない場合は slice( ) を使ってみてください。

sort についてまとめてみました。コールバック関数を定義することで、どのように並べたいか、を自分で制御できることがポイントです。たとえば、以下のようなことも可能ですので試してみてください。
1. sort したときに重複する要素を削除
2. 2次元配列のデータに対して要素 1 で sort し、もし要素 1 が同じ場合は要素 2 で sort する
ぜひ、自分でもいろいろと試してみてください。

では、ごきげんよう。