LoginSignup
62

More than 5 years have passed since last update.

jsのsort関数(自分用解説)

Last updated at Posted at 2017-08-30

sort関数とは

配列をアルファベット順に並べ替える関数。sortの実行後は新しい配列が返されるのではなく、対象の配列が書き換えられる。

デフォルトでは文字列で比較する

sort関数のデフォルトでは要素を文字列に変換して文字コード順に並び替える。

var array = [1975,11,20];

array.sort();

// [11, 1975, 20]
console.log(array);

文字と数字が混在する場合、「数字→ローマ字→日本語」の順となる。

var array = ["お誕生日",1975,11,"デイヴィー",20,"Havok"];

array.sort();

// [11, 1975, 20, "Havok", "お誕生日", "デイヴィー"]
console.log(array);

数値の昇順・降順でソートするには

sort関数は引数に関数を指定でき、関数でソートのルールを定義できる。
関数を指定すると、配列の要素2つを取り出して関数に引数として渡してソートする。

  • 関数の戻り値が正の時 → 引数1を引数2の後ろに並べ替え。
  • 関数の戻り値が負の時 → 引数1を引数2の前に並べ替え。
  • 関数の戻り値が0の時 → 何もしない。

昇順

昇順(第1引数と第2引数の差)
var array = [1975,11,20];

array.sort(
  function(a,b) {
    // 戻り値が正(a-bの差が正)のとき、aをbの後ろに並べ替え
    // 戻り値が負(a-bの差が負)のとき、aをbの前に並べ替え
    return a - b;
  }
);

// [11, 20, 1975]
console.log(array);
昇順(第1引数と第2引数を比較)
var array = [1975,11,20];

array.sort(
  function(a,b) {
    if (a > b){
       return 1;
    }else if (a < b){
       return -1;
    }else{
       return 0;
    }
  }
);

// [11, 20, 1975]
console.log(array);
昇順(三項演算子)
var array = [1975,11,20];

array.sort(
  function(a,b){
    return (a < b ? -1 : 1);
  }
);

// [11, 20, 1975]
console.log(array);

降順

降順(第1引数と第2引数の差)
var array = [1975,11,20];

array.sort(
  function(a,b) {
    // 戻り値が正(b-aの差が正)のとき、aをbの前に並べ替え
    // 戻り値が負(b-aの差が負)のとき、aをbの後ろ並べ替え
    return b - a;
  }
);

// [1975, 20, 11]
console.log(array);
降順(第1引数と第2引数を比較)
var array = [1975,11,20];

array.sort(
  function(a,b) {
    if (a < b){
       return 1;
    }else if (a > b){ 
       return -1;
    }else{
       return 0;
    }
  }
);

// [1975, 20, 11]
console.log(array);
降順(三項演算子)
var array = [1975,11,20];

array.sort(
  function(a,b){
    return (a < b ? 1 : -1);
  }
);

// [1975, 20, 11]
console.log(array);

逆順(おまけ)

var array = [1975,11,20];

array.sort(
  function(a,b) {
    return 1;
  }
);

// [20, 11, 1975]
console.log(array);

参考

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
https://www.ajaxtower.jp/js/array_class/index6.html
https://so-zou.jp/web-app/tech/programming/javascript/grammar/array/#no21

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
62