いろんな配列処理のメソッドを紹介してきましたが、今回は比較的いろんな場面で使える、配列の値の並び替えについてのメソッドを見てきたいと思います。中でもランダムに値をシャッフルするのは応用すればゲームの実装にも活用できます。
Array.sort()
バラバラと不規則に並んだ配列の値は「Array.sort()」を使うことで、名前の並び順できれいに並び替えることができます。使い方もいたってシンプルで、対象の配列に対してメソッドを実行するだけです。
【javascript】
const dataArray = [ 'D', 'C', 'B', 'E', 'A' ]; const result = dataArray.sort(); console.log(result); console.log(dataArray);
実際にメソッドを実行すると、このように並び変わっているのが確認できます。文字列であればアルファベット、もしくは50音順に、数値であれば小さい数から順に並んでいきます。
【console】
[ "A", "B", "C", "D", "E" ] // result [ "A", "B", "C", "D", "E" ] // dataArray
ただし、このArray.sort()ですが、元の配列も破壊してしまうので注意が必要です。あらかじめコピーしたもので実行するなどしておきます。
Array.reverse()
配列の並びをそのまま逆にする場合には「Array.reverse()」が便利です。先ほどと同じく、対象の配列にメソッドを実行する形になります。
【javascript】
const dataArray = [ '1st', '2nd', '3rd' ]; const result = dataArray.reverse(); console.log(result); console.log(dataArray);
結果を見てみると、このように並びが逆になっているのが確認できますね。こちらも見ての通り同じく元の配列に影響が出るので、扱う際には注意します。
【console】
[ "3rd", "2nd", "1st" ] // result [ "3rd", "2nd", "1st" ] // dataArray
比較関数を使った昇順と降順での並び替え
Array.sort()を使った場合、デフォルトでは昇順になりますが、降順で並べたいなど、並びの順をコントロールしたい場合もあるかと思います。そんな時には、コールバック関数にて、比較関数を使うことで並び順を制御することができます。下記のサンプルでは、オブジェクト内にあるpriceの値が小さい順に並べ替える例となります。
【javascript】
const dataObject = [
{ name: 'みかん', price: 300 },
{ name: 'バナナ', price: 90 },
{ name: 'ぶどう', price: 500 },
{ name: 'りんご', price: 100 },
]
const result = dataObject.sort((a, b) => {
// 昇順での並び替え
return a.price - b.price;
});
console.log(result);
Array.sort()の引数に、「a」「b」などの値を指定し、コールバック関数にて、その2つの値を比較評価します。そしてその返り値を返すようにすると、下記のように指定した順番で並び変わっているのが確認できます。
【console】
{ name: 'バナナ', price: 90 },
{ name: 'りんご', price: 100 },
{ name: 'みかん', price: 300 },
{ name: 'ぶどう', price: 500 }
もちろん、昇順だけでなく降順でも並べることができます。その場合には比較関数内の式を下記のように逆にしてあげるだけでOKです。
【javascript】
const dataObject = [
{ name: 'みかん', price: 300 },
{ name: 'バナナ', price: 90 },
{ name: 'ぶどう', price: 500 },
{ name: 'りんご', price: 100 },
]
const result = dataObject.sort((a, b) => {
// 降順での並び替え
return b.price - a.price;
});
console.log(result);
今度は逆にpriceの値が高いものから並んでいるのが確認できますね。比較関数をコールバックで使うことで、並び順のコントロールだけでなく、オブジェクトのプロパティ値を参照した並べ替えも可能となります。
【console】
{ name: 'ぶどう', price: 500 },
{ name: 'みかん', price: 300 },
{ name: 'りんご', price: 100 },
{ name: 'バナナ', price: 90 }
乱数を使った配列のシャッフル
配列の並び替えの応用としてよく使われるのが、配列の値をランダムにシャッフルする方法です。いくつか方法はあるのですが、今回は下記のような乱数を使ったものをサンプルとして用意しました。
【javascript】
const dataArray = ['1月', '2月', '3月', '4月', '5月'];
const randomNumbers = [];
for (let i = 0; i < dataObject.length; i++) {
randomNumbers.push(Math.random());
}
const result = dataObject.sort((a, b) => {
return randomNumbers[dataObject.indexOf(a)] - randomNumbers[dataObject.indexOf(b)]
});
console.log(result);
処理を詳しく見てみると、まず乱数を入れる空の配列を用意します。次に配列の長さ分だけfor文で繰り返し処理を行います。その中で、乱数を作成し、配列の中に入れておきます。そして、先ほどの比較関数で配列を並び変えるのですが、比較対象となる値に乱数が入ることになりますので、昇順と降順がバラバラに繰り返されます。そのようにすることで、配列の値の並びを変えている形になります。
【console】
[ "2月", "1月", "3月", "5月", "4月" ]
このように並び替えの結果を見てみると、確かにランダムでシャッフルされているのが確認できますね。ただし、この方法だと、たまたま乱数の比較結果で同じものが続く場合もあります。そこでより精度の高いシャッフルを行うために「フィッシャーイェーツのアルゴリズム」を使った配列のシャッフルという方法もあります。
【javascript】
const dataArray = ['1月', '2月', '3月', '4月', '5月'];
for (let i = dataArray.length - 1; i >= 0; i--) {
const randomNumber = Math.floor(Math.random() * (i + 1));
[dataArray[i], dataArray[randomNumber]] = [dataArray[randomNumber], dataArray[i]];
}
console.log(dataArray);
先ほどと大きく違うのは、Array.sort()のメソッドを使っていない点が挙げられます。行われてる処理としては、インデックスに応じて、配列の値同士を入れ替えているという形になります。コードもシンプルになり、より精度の高いシャッフルができるので、ランダムにシャッフルしたい場合にはこちらを使うといいのではないでしょうか。
【console】
[ "1月", "5月", "4月", "3月", "2月" ]
同じく、配列の値がランダムにシャッフルされているのが確認できますね。
まとめ
【配列の値をソートして整える】
Array.sort();
【配列の値を逆に並べ替える】
Array.reverse();
【配列の値を昇順にソートする】
Array.sort( ( a, b ) => a – b );
【配列の値を降順にソートする】
Array.sort( ( a, b ) => b – a );
【配列の値をランダムにシャッフルする】
const num = [];
for ( let i = 0; i < Array.length; i++ ) {
num.push( Math.random() );
}
Array.sort( ( a, b ) => num[Array.indexOf( a )] – num[Array.indexOf( b )] );
もしくは
for ( let i = Array.length – 1; i >= 0; i– ) {
const num = Math.floor( Math.random() * ( i + 1 ) );
[Array[i], Array[num]] = [num[num], Array[i]];
}
今回は配列において値の並び替えについてのメソッドをまとめてみました。他の処理と組み合わせた形で、いろんな場面で使われるのではないでしょうか。当サイトでは別記事にもいろんなメソッドをまとめていますので、そちらも是非ご参考にどうぞ。
（こちらの記事もどうぞ）
JavaScriptで配列を扱う時によく使うメソッド＃1【配列の作成・値や総数の取得・空判定など】
JavaScriptで配列を扱う時によく使うメソッド＃2【配列の値に対して繰り返し処理を行う】
JavaScriptで配列を扱う時によく使うメソッド＃3【配列に値が含まれるか・値のインデックスを検索する】
JavaScriptで配列を扱う時によく使うメソッド＃4【配列から条件に合う値を取得・フィルタリングする】
JavaScriptで配列を扱う時によく使うメソッド＃5【配列の値から別の配列を作成・単一の値を算出する】
JavaScriptで配列を扱う時によく使うメソッド＃6【配列の値を追加・削除する】
JavaScriptで配列を扱う時によく使うメソッド＃7【配列の値を切り取る・値を差し替える・配列を合体する】
