TECH I.S.

JavaScript ソート配列


配列のソート

sort()メソッドは、配列をアルファベット順にソートします。

const fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort();


配列の反転

reverse()メソッドは、配列内の要素を反転します。

これを使用して、配列を降順に並べ替えることができます。

const fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort(); fruits.reverse();


数値ソート

デフォルトでは、sort()関数は文字列を次のようにソートします。

これは文字列に適しています(「Apple」は「Banana」の前に来ます)。

ただし、数値が文字列としてソートされる場合、「2」は「1」よりも大きいため、「25」は「100」よりも大きくなります。

このため、sort()メソッドは、数値を並べ替えるときに誤った結果を生成します。

この問題は、比較関数を用意することで解決できます。

const points = [40, 100, 1, 5, 25, 10]; points.sort(function(a, b){return a - b});

同じトリックを使用して、配列を降順に並べ替えます。

const points = [40, 100, 1, 5, 25, 10]; points.sort(function(a, b){return b - a});


比較機能

比較関数の目的は、別のソート順を定義することです。

比較関数は、引数に応じて、負、ゼロ、または正の値を返す必要があります。

function(a, b){return a - b}

sort()関数は 2 つの値を比較し、その値を比較関数に送信し、返された (負、ゼロ、正) 値に従って値を並べ替えます。

結果が陰性の場合、abの前にソートされます。

結果が陽性の場合、baの前にソートされます。

結果が0の場合、2つの値の並べ替え順序は変更されません。

例:

比較関数は、配列内のすべての値を一度に2つの値で比較します。

40と100を比較すると、sort()メソッドは比較関数(40, 100)を呼び出します。

この関数は40 - 100を計算します(a - b)、結果が負(-60)であるため、並べ替え関数は40を100より小さい値として並べ替えます。

このコード・スニペットを使用して、数値順およびアルファベット順の並べ替えを試すことができます。

<button onclick="myFunction1()">Sort Alphabetically</button> <button onclick="myFunction2()">Sort Numerically</button> <p id="demo"></p> <script> const points = [40, 100, 1, 5, 25, 10]; document.getElementById("demo").innerHTML = points; function myFunction1() {   points.sort();   document.getElementById("demo").innerHTML = points; } function myFunction2() {   points.sort(function(a, b){return a - b});   document.getElementById("demo").innerHTML = points; } </script>


配列をランダムに並べ替える

const points = [40, 100, 1, 5, 25, 10]; points.sort(function(){return 0.5 - Math.random()});

Fisher・Yates・Method

上記の例、*array*.sort()は正確ではありません。一部の数値が他の数値よりも優先されます。

最も一般的な正しい方法は、Fisher、Yates、Shuffleと呼ばれ、1938年にデータサイエンスに導入されました。

JavaScriptでは、メソッドは次のように変換できます。

const points = [40, 100, 1, 5, 25, 10]; for (let i = points.length -1; i > 0; i--) {   let j = Math.floor(Math.random() * (i+1));   let k = points[i];   points[i] = points[j];   points[j] = k; }

最高(または最低)の配列値を見つける

配列内の最大値または最小値を見つけるための組み込み関数はありません。

ただし、配列を並べ替えた後は、インデックスを使用して最大値と最小値を取得できます。

昇順で並べ替え:

const points = [40, 100, 1, 5, 25, 10]; points.sort(function(a, b){return a - b}); // 現在、points[0]には最小値が含まれています // points[points.length-1]には最大値が含まれます

降順で並べ替え:

const points = [40, 100, 1, 5, 25, 10]; points.sort(function(a, b){return b - a}); // 現在、points[0]には最高値が含まれています // points[points.length-1]には最小値が含まれます

最高値(または最低値)だけを見つけたい場合、配列全体を並べ替える方法は非常に非効率的です。


配列でMath.max()を使用する

配列内の最大数を見つけるにはMath.max.applyを使用します。

function myArrayMax(arr) {   return Math.max.apply(null, arr); }
Math.max(1, 2, 3)Math.max.apply(null, [1, 2, 3])と同等です。

配列でMath.min()を使用する

配列内の最小の数値を見つけるにはMath.min.applyを使用できます。

function myArrayMin(arr) {   return Math.min.apply(null, arr); }

Math.min(1, 2, 3)Math.min.apply(null, [1, 2, 3])と同等です。

自作の最小/最大 JavaScriptメソッド

最速の解決策は、「自作」の方法を使用することです。

この関数は、各値を見つかった最大値と比較する配列をループします。

例 (最大値を見つける)

function myArrayMax(arr) {   let len = arr.length;   let max = -Infinity;   while (len--) {     if (arr[len] > max) {       max = arr[len];     }   }   return max; }

この関数は、各値を見つかった最小値と比較する配列をループします。

例 (最小値の検索)

function myArrayMin(arr) {   let len = arr.length;   let min = Infinity;   while (len--) {     if (arr[len] < min) {       min = arr[len];     }   }   return min; }


オブジェクト配列の並べ替え

JavaScript配列には、多くの場合、オブジェクトが含まれます。

const cars = [   {type:"Volvo", year:2016},   {type:"Saab", year:2001},   {type:"BMW", year:2010} ];

オブジェクトが異なるデータ型のプロパティを持っていても、sort()メソッドを使用して、配列をソートできます。

解決策は、比較関数を記述してプロパティ値を比較することです。

cars.sort(function(a, b){return a.year - b.year});

文字列プロパティの比較はもう少し複雑です。

cars.sort(function(a, b){   let x = a.type.toLowerCase();   let y = b.type.toLowerCase();   if (x < y) {return -1;}   if (x > y) {return 1;}   return 0; });

完全な配列リファレンス

配列の完全なリファレンスについては、完全な JavaScript 配列リファレンスを参照してください。

このリファレンスには、配列のすべてのプロパティとメソッドの説明と例が含まれています。


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細