JavaScript 配列のソート

❮ 前章へ 次章へ ❯

sort() メソッドは、最も強力な配列メソッドの1つです。


配列のソート

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // Sorts the elements of fruits
Try it Yourself »

配列の反転

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

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // Sorts the elements of fruits
fruits.reverse();         // Reverses the order of the elements
Try it Yourself »

数値のソート

デフォルトで、sort() 関数は値を文字列としてソートします。

これは文字列ではうまく動作します("Apple" は "Banana" 前に来ます)。

しかし、数値を文字列としてソートした場合、 "2" は "1" より大きいので、"25" は "100" より大きくなってしまいます。

このため、数値をソートする場合、sort() メソッドの結果は不正なものになってしまいます。

これを解決するために、比較関数を用意します:

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
Try it Yourself »

同じトリックを使用して、配列を降順にソートします:

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
Try it Yourself »

比較関数

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

比較関数は、引数に応じて負、ゼロ、または正の値を返すようにします:

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

sort() 関数は、2つの値を比較するときに比較関数へ値を送り、返された値(負、ゼロ、正)に従って値をソートします。

例:

40 と 100 を比較する場合、sort() メソッドは比較するため function(40,100) を呼び出します。

この関数は、40-100 を計算し、-60(負の値)を返します。

sort 関数は、40 を 100 より小さい値としてソートします。

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

<button onclick="myFunction1()">Sort Alphabetically</button>
<button onclick="myFunction2()">Sort Numerically</button>

<p id="demo"></p>

<script>
var 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>
Try it Yourself »

ランダムな順序で配列をソートする

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});
Try it Yourself »

最も大きい(または最も小さい)値を探す

配列の中で最も大きい値を探すには?

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
// now points[0] contains the highest value
Try it Yourself »

最も小さい値は:

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
// now points[0] contains the lowest value
Try it Yourself »

オブジェクト配列のソート

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

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

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

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

cars.sort(function(a, b){return a.year - b.year});
Try it Yourself »

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

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

練習問題による自己診断

Exercise 1 » 


❮ 前章へ 次章へ ❯