- Home ›
- JavaScript入門 ›
- Arrayクラス ›
- HERE
sortメソッド
sortメソッドは対象のArrayクラスのオブジェクトの各要素をアルファベット順に並べ替えます。
sort() sort(func)
対象となるArrayクラスのオブジェクトの各要素に含まれる値を比較し、要素を 並べ替えます。このメソッドでは対象となるオブジェクトそのものを変更しま す。 パラメータ: func 並べ替えを決定するための関数 戻り値： 対象のArrayクラスのオブジェクトへの参照
要素に含まれる値を比較し、要素を並べ替えます。引数を指定しなかった場合はアルファベット順に並べ替えられます(大文字の方が小文字よりも前です)。要素の値は比較を行うために文字列に変換された上で比較されます。
注意して頂きたいのは、並べ替えが行われた新しい配列が返されるのではなく、対象のオブジェクトそのものを変更するという点です。
次の例を見てください。
var ary = new Array("tokyo", "osaka", "nagoya");
ary.sort();
alert(ary); // nagoya,osaka,tokyo
対象のオブジェクトの要素が並べ替えられています。
並べ替えを行う時は、要素の値を文字列に変換した上で比較します。その為、次のような場合は注意が必要です。
var ary = new Array(89, 4103, 123); ary.sort(); alert(ary); // 123,4103,89
要素に格納されている数値の大きさを比較するならば"89,123,4103"となりそうですが、並べ替えの時はあくまでアルファベット順での比較となります。その為、要素の値を"89"、"4103"、"123"に変換した上でアルファベット順で比較するため"123,4103,89"となります。
未定義値が格納されている要素は並べ替えを行うと必ず最後の要素となります。次の例を見て下さい。
var ary = ["札幌", "沖縄",,"東京",,"京都"]; ary.sort(); alert(ary); // 京都,札幌,東京,沖縄,,
配列には未定義値が含まれる要素が2つありますが、この配列に対してsortメソッドを呼び出すと未定義値が含まれる要素は配列の最後の要素となります。
sortメソッドではアルファベット順で並べ替えを行っていますが、並べ替えを行う規則を定義した関数を自分で用意してsortメソッドの引数に指定することができます。
関数は2つの引数を指定して自動的に呼び出されます。基本的な構成は次の通りです。
function hikaku(val1, val2){
// ...
}
var ary = new Array(...);
ary.sort(hikaku);
sortメソッドの引数に関数名を指定すると、配列の各要素の値を2つ取り出して関数に引数として渡し、関数が返す値に応じて並べ替えを行ってくれます。
関数では2つの引数を比較して戻り値を返します。関数の戻り値がプラスの値だった場合は引数1が引数2よりも大きいことを表し、戻り値が0だった場合は2つの引数が等しく、戻り値がマイナスの値だった場合は引数2が引数1よりも大きいことを表します。
そこでアルファベット順の逆順で並べ替えを行うような関数は次のように定義できます。
function hikaku(val1, val2){
if (val1.toString() < val2.toString()){
return 1;
}else{
return -1;
}
}
var ary = new Array(...);
ary.sort(hikaku);
また要素の値を数値として比較し、数値が小さい順に並べ替える関数は次のように定義できます。
function hikaku(val1, val2){
return val1 - val2;
}
var ary = new Array(...);
ary.sort(hikaku);
「-」演算子を使うと対象の値は数値に変換されます。数値に変換した値を減算した結果を戻り値とすると、引数1が引数2よりも大きければプラスの値を返し、引数1が引数2よりも小さい場合にはマイナスの値を返すことになります。
なお関数では引数として未定義値が渡されてくるかどうかを考慮する必要はありません。要素の値に未定義値が含まれていた場合は、比較用の関数に値が渡されずに無条件で配列の最後に配置されます。
では簡単なサンプルで試してみます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>JavaScript テスト</title> </head> <body> <script type="text/javascript" src="./js/script6_1.js"> </script> </body> </html>
function print(str){
document.write(str + "<br />");
}
var ary;
document.write("<p>");
ary = new Array("tokyo", "osaka", "nagoya");
print("before : " + ary);
ary.sort();
print("after : " + ary);
document.write("</p>");
document.write("<p>");
ary = new Array(89, 4103, 123);
print("before : " + ary);
ary.sort();
print("after : " + ary);
document.write("</p>");
document.write("<p>");
ary = ["札幌", "沖縄",,"東京",,"京都"];
print("before : " + ary);
ary.sort();
print("after : " + ary);
document.write("</p>");
上記を実際にブラウザ見てみると次のように表示されます。
今度は並べ替えを行う関数を定義したサンプルを試してみます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>JavaScript テスト</title> </head> <body> <script type="text/javascript" src="./js/script6_2.js"> </script> </body> </html>
function print(str){
document.write(str + "<br />");
}
function hikaku(val1, val2){
if (val1.toString() < val2.toString()){
return 1;
}else{
return -1;
}
}
function numhikaku(val1, val2){
return val1 - val2;
}
var ary;
document.write("<p>");
ary = new Array(123, 89, 4103);
print("before : " + ary);
ary.sort();
print("after : " + ary);
ary.sort(hikaku);
print("after : " + ary);
ary.sort(numhikaku);
print("after : " + ary);
document.write("</p>");
上記を実際にブラウザ見てみると次のように表示されます。
( Written by Tatsuo Ikura )
AjaxTower