[JavaScript]配列のソートに関して

Question

前提・実現したいこと

数値が格納された配列を昇順（降順）に並べ替える際に、ソートメソッドの引数に比較関数を
記述するかと思うのですが、中でどういう処理がされているのかが分かりません。
そのため、具体的にどういう順序でソートされているのかを知りたいです。

試したこと

比較関数内の値を確認してみたが、比較されている値を上手く追えない。

該当のソースコード

let testNumber = [10, 4, 8, 1];
testNumber.sort(function(now, pre){
  console.log("第一引数: " + now);
  console.log("第二引数: " + pre);
  let comp = now - pre;
  if (comp < 0){
    console.log("第一引数の方が小さいので、第一引数のインデックスを第二引数より前に移動させる");
  }
  else{
    console.log("第一引数の方が大きいので、第二引数のインデックスを第一引数より前に移動させる");
  }
  return now - pre;
})
console.log(testNumber);

第一引数: 4
第二引数: 10
第一引数の方が小さいので、第一引数のインデックスを第二引数より前に移動させる

第一引数: 8
第二引数: 4
第一引数の方が大きいので、第二引数のインデックスを第一引数より前に移動させる

第一引数: 8
第二引数: 10
第一引数の方が小さいので、第一引数のインデックスを第二引数より前に移動させる

第一引数: 8
第二引数: 4
第一引数の方が大きいので、第二引数のインデックスを第一引数より前に移動させる

第一引数: 1
第二引数: 8
第一引数の方が小さいので、第一引数のインデックスを第二引数より前に移動させる

第一引数: 1
第二引数: 4
第一引数の方が小さいので、第一引数のインデックスを第二引数より前に移動させる

[1, 4, 8, 10]

分かりやすく教えていただけると嬉しいです。
何卒、よろしくお願いいたします。

Comments

[yasutomi]

すでに答えが質問に書かれているのに
何がわからないのか理解できませんでした。

[hati_32]

比較されている値の順序がよく分かりません・・・。
4と10が比較された後、8と10が比較されるのは分かるのですが、8と10...1と4となるのは何故なのでしょうか。途中経過の配列を確認しようとしたのですが、上手くできませんでした。

Answer 1

既に回答がある通りブラウザによって実装が異なるうえ、いつ変わるかわからないものですが、
例示されている比較順になるのは挿入ソートだと思います。

1回目：[10, 4, 8, 1] ←array[1]の4を何処かに挿入する
10より小さいので10の前に挿入する ←4, 10

2回目：[4, 10, 8, 1] ←array[2]の8を何処かに挿入する
10より小さいので10より前、 ←8, 10
4より大きいので4の後ろに挿入する ←8, 4

3回目：[4, 8, 10, 1] ←array[3]の1を何処かに挿入する
8(array[Math.ceil(3/2)]？多分真ん中から開始するようになっている)より小さいので8より前、 ←1, 8
4より小さいので4の前に挿入する ←1, 4

chromeは今のところ、要素数が少なければ挿入ソート、要素数が多かったらクイックソートなんだとか。

Answer 2

比較されている値の順序がよく分かりません・・・。

4と10が比較された後、8と10が比較されるのは分かるのですが、8と10...1と4となるのは何故なのでしょうか。

比較関数を呼び出す順番に関しては、何も決まっていません。ソートアルゴリズムを見比べてもらえばわかるかと思いますが、隣同士でない値を比較してソートすることも普通に行われます。

Comments

[maisumakun]

端的に言えば「ブラウザによって実装が違うので、呼ばれ方に依存するコードは動かない」ということです。

[hati_32]

そうだったのですね！
調べ方が甘すぎました・・・。ありがとうございます。

Answer 3

やっているのこうです

const testNumber = [10,4,8,4,1];
testNumber.sort((x,y)=>{
  var ret=null;
  if(x==y){
    ret=0;
  }else if(x>y){
    ret=1;
  }else{
    ret=-1;
  }
  console.log([x,y,ret]);
  return ret;
});
console.log(testNumber);

配列から値を２つ取り出して、比較して同じなら0、前者が後者より大きければ正の値
小さければ負の値を返すと、それに応じて値がソートされます
数値の比較の場合前後の数値の差を取れば正・負・ゼロが計算できるので結果これで十分

const testNumber = [10,4,8,4,1];
testNumber.sort((x,y)=>x-y);
console.log(testNumber);

Comments

[hati_32]

負の値が返ってきたら「第一引数を第二引数より前に」、正が返ってきたら「第一引数を第二引数のあとに」という部分は決まっていて、正の値になるか負の値になるかの条件を変えてあげると昇順・降順に切り替えられるって感じですかね・・・（説明下手で申し訳ございません...）
回答ありがとうございます。