特別な条件の並べ替え。

Question

前提・実現したいこと

下記のコードのような配列を、コメントのように並び変えたいのですが、
どういったコードを組めばよいでしょうか？
やり方によっては、かなり冗長なコードになってしまいそうなので、効率的な書き方を考えています。
ご教示お願いします。

//要素の並び順が、
//オブジェクトのgradeのアルファベットの昇順で優先に並べられていて、
//gradeごとにnumberが昇順の配列。
//要素は、gradeとnumberを持つ任意のオブジェクトで、
//上記の並び順だけが保証されている。
var objArray = [ 
    { grade: 'A', number: 2 },
    { grade: 'A', number: 3 },
    { grade: 'B', number: 1 },
    { grade: 'B', number: 2 },
    { grade: 'S', number: 1 },
    { grade: 'S', number: 2 } 
];

//目的の並び替え。
//gradeでSだけをトップに持ってきて、
//以降のgradeはアルファベットの昇順のままとなる。
//gradeごとにnumberが昇順であることも保たれている。
// var objArray = [ 
//     { grade: 'S', number: 1 },
//     { grade: 'S', number: 2 },
//     { grade: 'A', number: 2 },
//     { grade: 'A', number: 3 },
//     { grade: 'B', number: 1 },
//     { grade: 'B', number: 2 },
// ];

試したこと

イメージ的には、下記のようなwhile文の書き方がスマートな気がするのですが、
条件で代入はできないのでしょうか？
構文エラーになってしまいます。

//要素の並び順が、
//オブジェクトのgradeのアルファベットの昇順で優先に並べられていて、
//gradeごとにnumberが昇順の配列。
//要素は、gradeとnumberを持つ任意のオブジェクトで、
//上記の並び順だけが保証されている。
var objArray = [ 
    { grade: 'A', number: 2 },
    { grade: 'A', number: 3 },
    { grade: 'B', number: 1 },
    { grade: 'B', number: 2 },
    { grade: 'S', number: 1 },
    { grade: 'S', number: 2 } 
];

while((var sValue = objArray.pop["grade"]) == "S"){
  objArray.unshift(sValue);
}

//目的の並び替え。
//gradeでSだけをトップに持ってきて、
//以降のgradeはアルファベットの昇順のままとなる。
//gradeごとにnumberが昇順であることも保たれている。
// var objArray = [ 
//     { grade: 'S', number: 1 },
//     { grade: 'S', number: 2 },
//     { grade: 'A', number: 2 },
//     { grade: 'A', number: 3 },
//     { grade: 'B', number: 1 },
//     { grade: 'B', number: 2 },
// ];

エラーメッセージ。

while((var sValue = objArray.pop["grade"]) == "S"){
       ^^^

SyntaxError: Unexpected token var

さらに考えたのですが、この書き方だと代入できたとしても、
sValueにオブジェクトじゃなくて、gradeの値が入ってしまうことに気づきました。
このようなイメージでコードを組むことは可能ですか？
もしくはもっと簡潔な組み方はありますか？
ご教示お願いします。

追記 VSCodeでデバッグを繰り返すと、並び順が変わる問題について。

VSCodeでデバッグを繰り返すと、何故か並び順がたまに変わるという現象が起きました。
VSCodeのデバッグでは、
console.log(objArray);
では、要素のオブジェクトがObjectと表示されるだけで、オブジェクトの中身まで表示されないので、
forEachで回して表示させるようにしました。

  var objArray = [ 
    { grade: 'B', number: 2 },
    { grade: 'S', number: 2 },
    { grade: 'A', number: 2 },
    { grade: 'A', number: 3 },
    { grade: 'B', number: 1 },
    { grade: 'S', number: 1 },
  ];

const compare = (a, b) => {

    if (a.grade !== b.grade) {
        if (a.grade === 'S') return -1;
        if (b.grade === 'S') return 1;
        return a.grade.localeCompare(b.grade);
    }
  
    return a.number - b.number;
};

objArray.sort(compare);

//console.log(objArray);

objArray.forEach(function( value ) {
     console.log( value );
});

上記をデバッグすると、基本的には下記出力となるのですが、

Object {grade: "S", number: 1}
Object {grade: "S", number: 2}
Object {grade: "A", number: 2}
Object {grade: "A", number: 3}
Object {grade: "B", number: 1}
Object {grade: "B", number: 2}

しかし、デバッグを繰り返すと、下記のような出力になることもあります。

Object {grade: "S", number: 1}
Object {grade: "S", number: 2}
Object {grade: "B", number: 1}
Object {grade: "A", number: 2}
Object {grade: "B", number: 2}
Object {grade: "A", number: 3}

下記のようになったりもしました。

Object {grade: "S", number: 1}
Object {grade: "S", number: 2}
Object {grade: "A", number: 2}
Object {grade: "B", number: 1}
Object {grade: "A", number: 3}
Object {grade: "B", number: 2}

Answer 1

var grade = ['S','A','B'];
var array = [{grade:'A',number:2},{grade:'A',number:3},{grade:'B',number:1},{grade:'B',number:2},{grade:'S',number:1},{grade:'S',number:2}];

array.sort((a,b) => (grade.indexOf(a.grade) - grade.indexOf(b.grade) || a.number - b.number));
console.log(array);

Re: tkshp さん

Comments

[退会済みユーザー]

const h = {S:0, A:1, B:2};
objArray.sort ((a, b) => h[a.grade] - h[b.grade] || a.number - b.number);

[tkshp]

ご回答ありがとうございます。
ベストアンサー迷いましたが、私のwhileのイメージの疑問かつ、他の提案もしていただいたjun68ykt様にベストアンサーを付けさせていただきました。
とても勉強になりました。
ありがとうございました。

Answer 2

var objArray = [ 
    { grade: 'A', number: 2 },
    { grade: 'A', number: 3 },
    { grade: 'B', number: 1 },
    { grade: 'B', number: 2 },
    { grade: 'S', number: 1 },
    { grade: 'S', number: 2 } 
];
console.table(objArray);

objArray.sort((a, b) => {
  if(a.grade !== b.grade) {
    if(a.grade === 'S') return -1;
    return a.grade > b.grade? 1 : -1
  }
  if(a.number === b.number) return 0;
  return a.number > b.number? 1 : -1
});
console.table(objArray);

Comments

[tkshp]

ご回答ありがとうございます。
ベストアンサー迷いましたが、私のwhileのイメージの疑問かつ、他の提案もしていただいたjun68ykt様にベストアンサーを付けさせていただきました。
とても勉強になりました。
ありがとうございました。

Answer 3

こんにちは

ご質問にあるtkshp さんのコード

while((var sValue = objArray.pop["grade"]) == "S"){
  objArray.unshift(sValue);
}

について、

このようなイメージでコードを組むことは可能ですか？

とのことですが、一例としては以下かなと思います。

const len = objArray.length;

while (objArray[len-1].grade === 'S') {
    objArray.unshift(objArray.pop());
}

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/zYxGGgx?editors=0012

または、 tkshp さんのコードにある、 「whileの条件式の中でpopして、末尾にあった要素を変数に格納する」というやり方を踏襲するならば、以下です。

var sValue;
while((sValue = objArray.pop()).grade === "S") {
    objArray.unshift(sValue);
}
objArray.push(sValue);

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/MWYwaMj?editors=0012

上記のように、 while の条件の中で pop させると、 while から抜けた後に、最後にpopされた（gradeが 'S'ではない）要素を再度、objArray に追加しなければなりません。

追記

ご質問に

もしくはもっと簡潔な組み方はありますか？

とありましたので、（簡潔になっているかは分かりませんが、）別解を挙げます。
このご質問の前提である、入力される配列は

var objArray = [ 
    { grade: 'A', number: 2 },
    { grade: 'A', number: 3 },
    { grade: 'B', number: 1 },
    { grade: 'B', number: 2 },
    { grade: 'S', number: 1 },
    { grade: 'S', number: 2 } 
];

というもので、この配列のインデクス4の要素{ grade: 'S', number: 1 }から末尾の要素{ grade: 'S', number: 2 }までの部分配列を、先頭に移動するにはどうしたらいいか？というのが与題です。 tkshp さんのご質問にあるコードは whileを使って1個ずつ移動するものですが、「（1個ずつではなく）部分配列ごと移動する」あるいは「ある配列を（共通部分を持たない）2つの部分配列に分割し、それらを入れ換える」という考え方もできます。以下はこの考え方によるコードです。

const startIndexOfGradeS = objArray.findIndex(e => e.grade === 'S');

if (startIndexOfGradeS >= 0) {
  objArray = [
    ...objArray.slice(startIndexOfGradeS),
    ...objArray.slice(0, startIndexOfGradeS)
  ];
}

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/oNgXjqo?editors=0012

追記2

ご質問の本題からは離れるかもしれませんが、以下、参考までに追記します。
もし、ご質問の前提である、入力される配列

var objArray = [ 
    { grade: 'A', number: 2 },
    { grade: 'A', number: 3 },
    { grade: 'B', number: 1 },
    { grade: 'B', number: 2 },
    { grade: 'S', number: 1 },
    { grade: 'S', number: 2 } 
];

を得るためのソートを見直すことが可能で、ソートした結果として

[ 
    { grade: 'S', number: 1 },
    { grade: 'S', number: 2 },
    { grade: 'A', number: 2 },
    { grade: 'A', number: 3 },
    { grade: 'B', number: 1 },
    { grade: 'B', number: 2 }
]

が得られると望ましいということでしたら、sort に渡す比較関数を以下のようにすればよいかと思います。

const compare = (a, b) => {

    if (a.grade !== b.grade) {
        if (a.grade === 'S') return -1;
        if (b.grade === 'S') return 1;
        return a.grade.localeCompare(b.grade);
    }
  
    return a.number - b.number;
};

以下は、 要素をランダムに入れ換えたobjArrayを作り、それを上記の比較関数によってソートするサンプルです。

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/PowqZGM?editors=0012

Comments

[tkshp]

ご回答ありがとうございます。
ベストアンサー迷いましたが、私のwhileのイメージの疑問かつ、他の提案もしていただいたjun68ykt様にベストアンサーを付けさせていただきました。
とても勉強になりました。
ありがとうございました。

[jun68ykt]

どういたしまして。解決されたようで、よかったです????

[tkshp]

すみません、解決後の質問で申し訳ないのですが、コードを何度かデバッグするうちに出力結果がおかしくなりまして、もし御存知でしたら教えていただけませんか？
詳細は追記しました。

[tkshp]

もしかしたら、VSCode+node.jsのデバッグの特有のバグなのかもしれません。
https://ja.stackoverflow.com/questions/40283/vscodenode-js%E3%81%A7%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%82%92%E3%82%84%E3%81%A3%E3%81%9F%E3%82%89%E7%B5%90%E6%9E%9C%E3%81%AE%E8%A1%A8%E7%A4%BA%E3%81%8C%E3%81%8A%E3%81%8B%E3%81%97%E3%81%84%E3%81%AE%E3%81%AF%E4%BB%95%E6%A7%98%E3%81%A7%E3%81%99%E3%81%8B