javascript 配列のバブルソートを1行で記述する
- 2021.02.28
- javascript
- javascript

javascriptで、sortとアロー関数を使用して、配列のバブルソートを1行で記述するサンプルコードを掲載してます。ブラウザはchromeを使用しています。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 84.0.4147.105
arr.sort構文
arr.sortは以下の通り、コールバック関数を使用することができ、これとアロー関数を使用することで、1行でバブルソートを記述することが可能です。
1 |
配列.sort( コールバック関数( 1つ目の値, 2つ目の値 ) ) |
アロー関数のサンプルは以下となります。
バブルソートを1行で記述
右から左、横の数字を比較していって、小さい順に入れ替えていく「バブルソート」を、上記のarr.sortとアロー関数を使用すると、以下のように1行で記述することが可能です。
1 |
配列.sort((n, m) => (n - m)); |
降順にする場合は、引数を逆にします。
1 |
arr.sort((n, m) => (m - n)); |
実際に実行してみると、ソートされているることが確認できます。
1 2 3 4 5 6 |
let arr = [7, 1, 3, 6, 10, 2, 8, 2]; arr.sort(function(n, m) { return n - m;}) console.log(arr); // [1, 2, 2, 3, 6, 7, 8, 10] |
また、アロー関数を使用しない場合は、以下の通りになります。
1 2 3 4 5 6 |
let arr = [7, 1, 3, 6, 10, 2, 8, 2]; arr.sort(function(n, m) { return n - m;}) console.log(arr); // [1, 2, 2, 3, 6, 7, 8, 10] |
コールバック関数を、外に記述することも当然可能です。
1 2 3 4 5 6 7 8 9 |
let arr = [7, 1, 3, 6, 10, 2, 8, 2]; function func(n, m) { return n - m; } arr.sort(func); console.log(arr); |
サンプルコード
以下は、
「実行」ボタンをクリックすると、ランダムに5個の配列を生成して、ソートした結果を表示する
サンプルコードとなります。
※cssには「tailwind」を使用してます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>mebeeサンプル</title> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <script> const hoge = () => { const arr = Array(5).fill().map(x => ~~(Math.random() * 10)); // 生成した配列を表示 disp(arr, "rand"); // ソート arr.sort((n, m) => (n - m)); // ソートした配列を表示 disp(arr, "result"); } //フロントに表示する関数 const disp = (arr, id) => { let text = []; // 配列を利用してfor文を作成 arr.forEach((x, i) => text.push('<li>' + arr[i] + '</li>')) //innerHTMLを使用して表示 document.getElementById(id).innerHTML = text.join(''); } window.onload = () => { // クリックイベントを登録 btn.onclick = () => { hoge(); }; // document.getElementById('btn');を省略 } </script> <body> <div class="container mx-auto my-56 w-56 px-4"> <div class="flex justify-center"> <p id="result1" class="bg-teal-500 text-white py-2 px-4 rounded-full mb-3 mt-4">sort前</p> </div> <div class="flex justify-center"> <ul id="rand"></ul> </div> <div class="flex justify-center"> <p id="result2" class="bg-yellow-500 text-white py-2 px-4 rounded-full mb-3 mt-4">sort後</p> </div> <div class="flex justify-center"> <ul id="result"></ul> </div> <div class="flex justify-center"> <button id="btn" type="button" class="mt-5 bg-transparent border border-red-500 hover:border-red-300 text-red-500 hover:text-red-300 font-bold py-2 px-4 rounded-full"> 実行 </button> </div> </div> </body> </html> |
ランダムに生成された配列がソートされていることが確認できます。

-
前の記事
Ruby 指定した配列の値を削除する 2021.02.28
-
次の記事
Active Directoryで外部のNTPサーバを使用する 2021.02.28
コメントを書く