IE11にも対応した配列の並び替え。

Question

前提・実現したいこと

以前、こちらの質問で、配列の並び替えに関してご教示いただいたのですが、
IE11では、localeCompareがうまく動作しなかったので、代替の方法を教えていただきたいです。

下記コメントのような並び替えを考えています。
ご教示お願いします。

//要素の並び順が、
//オブジェクトのgradeのアルファベットの昇順で優先に並べられていて、
//gradeごとにnameが昇順の配列。
//要素は、gradeとnameを持つ任意のオブジェクトで、
//上記の並び順だけが保証されている。

var arr = [ 
    { grade: 'A', name: 'いいA' },
    { grade: 'B', name: 'ああB' },
    { grade: 'S', name: 'ああS' },
    { grade: 'A', name: 'ああA' },
    { grade: 'S', name: 'ええS' } 
];


//目的の並び替え。
//gradeでSだけをトップに持ってきて、
//以降のgradeはアルファベットの昇順のままとなる。
//gradeごとにnameが昇順であることも保たれている。

var arr = [ 
    { grade: 'S', name: 'ああS' },
    { grade: 'S', name: 'ええS' } 
    { grade: 'A', name: 'ああA' },
    { grade: 'A', name: 'いいA' },
    { grade: 'B', name: 'ああB' },
];

試したこと

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

            arr.sort(function(a, b){
                if (a.grade === 'S') return -1;
                if (b.grade === 'S') return 1;
                if (a.grade < b.grade){
                    return -1;
                }else if (a.grade > b.grade) {
                    return 1;
                }else{
                    return 0;                    
                }
            });

上記でうまくいくと考えたのですが、Sグレードに関して、nameが意図しない並び順となってしまいました。

    { grade: 'S', name: 'ええS' } 
    { grade: 'S', name: 'ああS' },
    { grade: 'A', name: 'ああA' },
    { grade: 'A', name: 'いいA' },
    { grade: 'B', name: 'ああB' },

Answer 1

不調なのでコメント欄に書きます

Comments

[yambejp]

var grade_list=["S","A","B"];
var arr = [
{ grade: 'A', name: 'いいA' },
{ grade: 'B', name: 'ああB' },
{ grade: 'S', name: 'ああS' },
{ grade: 'A', name: 'ああA' },
{ grade: 'S', name: 'ええS' }
];
arr.sort(function(x,y){
var x_grade=grade_list.indexOf(x.grade);
var y_grade=grade_list.indexOf(y.grade);
if(x_grade==y_grade) return x.name<y.name?-1:1;
return x_grade-y_grade;
});
console.dir(arr);

[tkshp]

ご回答ありがとうございます。
ご教示いただいたコードで目的の並び替えができました。
ご教示いただきありがとうございました。

Answer 2

上記でうまくいくと考えたのですが、Sグレードに関して、nameが意図しない並び順となってしまいました。

JavaScriptのArray.prototype.sortは、比較関数が0を返した場合、現状ではもとの順番が保証されません（MDN）。今後は順序が保証されるようになるとのことですが、IE11にフィードバックはされないでしょう。

そういうことを行うnpmのパッケージがあったので中身を見てみたら、自分でソートを行っていました。

Comments

[tkshp]

ご回答ありがとうございます。
現状、GoogleChromeで試したことのコードや、nameに関してreturn0の処理を省いたのですが、やはりうまくいかなかったのですが、Chromeに関してでも何か解決策はありませんか？
あとログを取ってみると、sort前でもsort後のようなログに見れる気がするのですが、sortは非同期だったりしますか？

[maisumakun]

ソートを2回に分けず、1回で行いましょう。

[maisumakun]

> あとログを取ってみると、sort前でもsort後のようなログに見れる気がするのですが、sortは非同期だったりしますか？

ブラウザによっては、オブジェクトに対して「コンソールに出力した時点」ではなく「コンソールで展開した時点」のデータを表示する場合があります。

[tkshp]

ご回答ありがとうございます。
>ソートを2回に分けず、1回で行いましょう。
この1回で書く方法がわからないのですが、ご教示いただけませんか？

[maisumakun]

「グレード順」と「名前順」を1つの比較関数の中で評価するようにすればいいです。

[tkshp]

ご回答ありがとうございます。
その書き方もわからなかったのですが、yambejp様のような書き方ということでしょうか？
他の書き方もあれば、勉強の為、ご教示いただきたいです。