0%

Programmingプログラミングナレッジ

Posted:2019.12.11

javascriptで配列を扱う時によく使うメソッド#8【配列の値を並び替える・ランダムにシャッフルする】

いろんな配列処理のメソッドを紹介してきましたが、今回は比較的いろんな場面で使える、配列の値の並び替えについてのメソッドを見てきたいと思います。中でもランダムに値をシャッフルするのは応用すればゲームの実装にも活用できます。

 

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【配列の値を切り取る・値を差し替える・配列を合体する】

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】