96

jQuery1.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;

私の質問は、これが「通常の」使用であり、JavaScriptのほとんどのバージョンで機能するかどうかです。どこで失敗しますか？それの他のあまり明白でない使用法はありますか？

更新-「現実世界」のアドバイスをありがとう!!!

私はこれを私の関数として使用しています：

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

6 に答える 6

195

ええと、あなたの質問には三項構文のかなりエキサイティングな使用法がいくつかあります。私は最後のものが一番好きです...

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

ここでの三項の使用は完全に不要です-あなたは単に書くことができます

x = (1 < 2);

同様に、3項ステートメントの条件要素は常にブール値として評価されるため、次のように表すことができます。

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

単に：

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

IsChecked実際、私は一時的なものも削除します。これにより、次のことが可能になります。

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

これが許容できる構文であるかどうかについては、確かにそうです！これは、読みやすさに影響を与えることなく、4行のコードを1行に減らすための優れた方法です。私があなたに与える唯一のアドバイスは、同じ行に複数の三項ステートメントをネストしないようにすることです（そうすれば狂気になります！）

于 2012-04-25T21:17:11.497 に答える
24

三項スタイルは、通常、スペースを節約するために使用されます。意味的には、それらは同一です。私は読みやすさを犠牲にするのが好きではないので、完全なif / then / else構文を使用することを好みます-私は古い学校であり、中かっこが好きです。

完全なif/then / else形式は、ほとんどすべてに使用されます。これは、各ブランチでより大きなコードブロックに入る場合、複数のif / elseツリーがある場合、または長い文字列に複数のelse/ifがある場合に特に人気があります。

三項演算子は、単純な条件に基づいて変数に値を割り当てる場合、または非常に短い結果で複数の決定を行う場合に一般的です。式は追加のロジックなしで2つの値のいずれかに評価されるため、引用した例は実際には意味がありません。

良い考え：

this > that ? alert(this) : alert(that);  //nice and short, little loss of meaning

if(expression)  //longer blocks but organized and can be grasped by humans
{
    //35 lines of code here
}
else if (something_else)
{
    //40 more lines here
}
else if (another_one)  /etc, etc
{
    ...

あまり良くない：

this > that ? testFucntion() ? thirdFunction() ? imlost() : whathappuh() : lostinsyntax() : thisisprobablybrokennow() ? //I'm lost in my own (awful) example by now.
//Not complete... or for average humans to read.

if(this != that)  //Ternary would be done by now
{
    x = this;
}
else
}
    x = this + 2;
}

本当に基本的な経験則-全体を1行で理解できますか？三部形式はOKです。それ以外の場合は展開します。

于 2012-04-25T21:22:19.650 に答える
11

また、私から何かを追加したいと思います。

三項演算子を使用して関数を呼び出すためのその他の可能な構文は、次のとおりです。

(condition ? fn1 : fn2)();

両方の関数に同じパラメーターのリストを渡す必要がある場合は便利なため、一度だけ書き込む必要があります。

(condition ? fn1 : fn2)(arg1, arg2, arg3, arg4, arg5);

スペースを節約するために私が個人的に非常に気に入っているメンバー関数名でも、三項演算子を使用できます。

$('.some-element')[showThisElement ? 'addClass' : 'removeClass']('visible');

また

$('.some-element')[(showThisElement ? 'add' : 'remove') + 'Class']('visible');

もう一つの例：

var addToEnd = true; //or false
var list = [1,2,3,4];
list[addToEnd ? 'push' : 'unshift'](5);
于 2016-05-17T08:51:31.270 に答える
9

あなたが投稿した例については、特にトリッキーなことは何もありません。

三項演算子では、最初の引数（条件付き）が評価され、結果がの場合trueは2番目の引数が評価されて返されます。それ以外の場合は、3番目の引数が評価されて返されます。これらの各引数は、関数呼び出しを含む任意の有効なコードブロックにすることができます。

このように考えてください：

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

次のように書くこともできます：

var x = (1 < 2) ? getTrueValue() : getFalseValue();

これは完全に有効であり、これらの関数には、値の戻りに関連しているかどうかに関係なく、任意のコードを含めることができます。さらに、関数の結果を何かに割り当てる必要がないのと同様に、三項演算の結果を何かに割り当てる必要はありません。

(1 < 2) ? getTrueValue() : getFalseValue();

これらを任意の関数に置き換えるだけで、次のような例が残ります。

(1 < 2) ? removeItem($this) : addItem($this);

これで、最後の例は、次のように記述できるため、実際には3値をまったく必要としません。

x = (1 < 2);  // x will be set to "true"
于 2012-04-25T21:17:01.990 に答える
7

三項演算子をネストする場合は、次のようなことをしたいと思います。

   var audience = (countrycode == 'eu') ? 'audienceEU' :
                  (countrycode == 'jp') ? 'audienceJP' :
                  (countrycode == 'cn') ? 'audienceCN' :
                  'audienceUS';

以下よりも書き込み/読み取りの方がはるかに効率的です。

var audience = 'audienceUS';
if countrycode == 'eu' {
   audience = 'audienceEU';
} else if countrycode == 'jp' {
   audience = 'audienceJP';
} else if countrycode == 'cn' {
   audience = 'audienceCN';
}

すべての優れたプログラミングと同様に、空白は、プロジェクトの完了後にコードを読まなければならない人々にとってすべてを素晴らしいものにします。

于 2013-11-13T19:49:17.267 に答える
2

私は質問がすでに答えられていることを知っています。

しかし、ここに1つのポイントを追加しましょう。これは、真または偽の場合だけではありません。下記参照：

var val="Do";

Var c= (val == "Do" || val == "Done")
          ? 7
          : 0

ここで、valがDoまたはDoneの場合、cは7になり、それ以外の場合はゼロになります。この場合、cは7になります。

これは、実際にはこの演算子の別の視点です。

于 2015-12-22T13:36:22.737 に答える