1. ホーム
  2. javascript

[解決済み] JavaScript三項演算子と関数の例

2023-01-24 16:32:50

質問

jQuery 1.7.1を使っています。

私はちょうどJavaScriptの三項演算子を使って、単純なif/else文を置き換えようとしているところです。私はいくつかの場所で成功しました。 確実に動作しないと思っていたのに、うまく他のものを動作させたときは驚きましたが、とにかくやってみました。

これが元の文です。

function updateItem() {
    $this = $(this);
    var IsChecked = $this.hasClass("IsChecked");
    if (IsChecked == true){
        removeItem($this);
    } else {
        addItem($this);
    }
}

以下は三項演算子を使った同じ関数です。

function updateItem() {
    $this = $(this);
    var IsChecked = $this.hasClass("IsChecked");
    (IsChecked == true) ? removeItem($this) : addItem($this);
}

私が見た使われている例は、どれもこのように変数を設定するだけのものだったので、驚きました。

x = (1 < 2) ? true : false;

私の質問は、これが"normal"使用であるかどうか、そしてJavaScriptのほとんどのバージョンで動作するかどうかということです。どこで失敗するのでしょうか? それのための他のあまり明白でない使用法がありますか?

UPDATE -- "リアルワールド"アドバイスありがとうございました!!!

私はこれを関数として使っています。

function updateItem() {
    $this = $(this);
    $this.hasClass("IsChecked") ? removeItem($this) : addItem($this);
}

どのように解決するのですか?

へー、あなたの質問にはかなりエキサイティングな三項構文の使い方がありますね。私は最後のものが一番好きです...

x = (1 < 2) ? true : false;

ここで3項を使うのは全く不要で、単に

x = (1 < 2);

同様に、3項文のcondition要素は常にBoolean値として評価されるため、表現することができます。

(IsChecked == true) ? removeItem($this) : addItem($this);

として単純に

(IsChecked) ? removeItem($this) : addItem($this);

実際、私なら IsChecked も一時的に削除し、次のようにします。

($this.hasClass("IsChecked")) ? removeItem($this) : addItem($this);

これが受け入れられる構文かどうかについては、確かにそうです! 読みやすさに影響を与えることなく、4行のコードを1行に減らすことができる素晴らしい方法です。唯一のアドバイスは、同じ行に複数の三項文をネストしないようにすることです (その方法は狂気の沙汰です!)。