javascript 比較演算子がよく理解できません。。。。

Question

Vue.jsを学習中なのですが、javascriptの比較演算子の意味がよく分からず、行き詰まっています。。。

下記script

    computed: {
        result: function() {
            let list = items.slice();
            if(this.sort.key){
           list.sort((a,b)=> {
                a = a[this.sort.key];
                b = b[this.sort.key];
                return ( a === b ? 0 : a > b ? 1 : -1) * (this.sort.isAsc ? 1 : -1);
            });
        }
        return list;
        }
    },

のコード内の

return ( a === b ? 0 : a > b ? 1 : -1) * (this.sort.isAsc ? 1 : -1);

を言語化した場合、

( a === b ? 0 : a > b ? 1 : -1)の箇所は、
a（左辺） と、b ? 0 : a > b ? 1 : -1（右辺）が一致する場合はtrueを返す。　ということだと思うのですが、b ? 0 : a > b ? 1 : -1（右辺）　の意味が全く理解できません。。。。

(this.sort.isAsc ? 1 : -1);　も理解できていません。

( a === b ? 0 : a > b ? 1 : -1)

(this.sort.isAsc ? 1 : -1);

それぞれは何を意味しているのか教えてください。

Answer 1

( a === b ? 0 : a > b ? 1 : -1)の箇所は、

a（左辺） と、b ? 0 : a > b ? 1 : -1（右辺）が一致する場合はtrueを返す。　ということだと思うのですが、

違います。

( ( a === b ) ? 0 : ( ( a > b ) ? 1 : -1 ) )
/*
a === b なら 0
それ以外で ( a > b ) なら 1
それ以外なら -1
*/

【条件 (三項) 演算子 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

【演算子の優先順位 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

Comments

[Fukusuke0604]

コメントありがとうございます。
そもそもの理解が間違えていたのですね。

( ( a === b ) ? 0 : ( ( a > b ) ? 1 : -1 ) )
/*
a === b なら 0
それ以外で ( a > b ) なら 1
それ以外なら -1
*/

と書いて頂き、理解できました！！
ありがとうございました。

Answer 2

三項演算子の重ねは一番やっちゃいけない演算子の書き方の一つです

jsの場合「1?2:3?4:5は「1?2:(3?4:5)」と評価され「2」になります
他の言語だと「(1?2:3)?4:5」と評価され「4」が返ることもあるので
三項演算子を重ねるときには明示的にカッコをつける必要があります

Comments

[Fukusuke0604]

「三項演算子を重ねるときには明示的にカッコをつける必要があります」というのは、
下のkei344さんが書いているように

( ( a === b ) ? 0 : ( ( a > b ) ? 1 : -1 ) )　　

という事ですよね？

確かに、こう書いてあれば初学者の僕でも理解しやすかったと思います。
他言語の場合結果が変わってくる事もあるという事なので、気をつけます。

ありがとうございました。

[yambejp]

最低限こうしてくださいということです
a === b? 0:(a>b?1:-1)

[otn]

> 「三項演算子を重ねるときには明示的にカッコをつける必要があります」というのは、
というのは、PHPの時だけですね。
PHP以外の言語は仕様がちゃんとしているので、if then elseif then elseif then elseif then ～～
の連鎖と一緒で、括弧は不要です。

PHPも勉強するのであれば「PHPの三項演算子の結合優先度は異常」と覚えておきましょう。