JavaScript を使用するためのさまざまなテクニック 3 項演算子_javascript テクニック

コードを書きすぎると、無意識のうちに if else を 3 項に置き換えてしまうことがわかります。もちろん、3 項を使用するとクライマックスが得られるという人もいます。私も最近 js を書いていたときにそう感じたので、いくつかのヒントをまとめました。

Big Bird さん、次の段落は飛ばしてください。Big Bird が修正をお手伝いします ^__^

====人気のライン====

式 (expr1) ? (expr2) : (expr3)

expr1 が TRUE と評価される場合、値は expr2 になり、expr1 が FALSE と評価される場合、値は expr3 になります。

============

一般的な使用法

if else をよく使うことに気づいたとき

コードをコピー コードは次のとおりです:

if(ありがとう、チュン兄弟 || ありがとう、試験皇帝){
失敗しないでください;
}その他{
ドア吊り;
}

この場合、三項の表現は
となります。

コードをコピー コードは次のとおりです:

チュン兄弟を崇拝します || 試験皇帝を崇拝します: メンメンハン

洞察力に富んだコードをたくさん見つけるのはとても楽しいです。

日常生活では、特にネストが多い場合には、このような if else の判断が頻繁に行われます。三項を使用すると、コードがよりすっきりして構造が明確になります。

少し賢い使い方
絶え間ない変化を通じて、三項語の多くの用法を導き出すことができます。次の jQuery コード

コードをコピー コードは次のとおりです:

フラグ ? $('body').addClass('hover') : $('body').removeClass('hover') ;

さらに倒錯的です。

コードをコピーします コードは次のとおりです:

$('.item')[フラグ 'addClass' : 'removeClass']('hover')

上記のコードは混乱しているように見えます。 flag = true の場合、コードは次のコードになるためです:

コードをコピー コードは次のとおりです:

$('.item')['addClass']('hover')

この書き方は と同等です。

コードをコピー コードは次のとおりです:

$('.item').addClass('hover')

再度アップグレードしてください

必要に応じて必要な関数を呼び出して、より多くの処理を行うことができます。

コードをコピー コードは次のとおりです:

関数 a(){
何かをしてください
}
関数 b(){
何かをしてください
}

フラグ ? a() : b();

そして先生の全身

このようなケースでは、2 つのボタンがあり、1 つは前進動作用、もう 1 つは後退動作用です。操作機能はほぼ同じです。

コードをコピー コードは次のとおりです:

var action_turn = function(e, type){
var self = $(e).closest('li');
var target = self[type === 'prev' : 'next']();
target.addClass('has-img');
self.removeClass('has-img')
}

var btn_next = $('#item-photo-panel a.next')
btn_next.click(function(){
action_turn(this, 'next');
return false;
});
var btn_prev = $('#アイテムフォトパネル a.prev')
btn_prev.click(function(){
action_turn(this, 'prev');
return false;
});

避けるべきこと

コードをコピーします コードは次のとおりです:

alert( true ? 'true' : false ? 't' : 'f' )

私が言いたいのは、JS ではステートメントは右から左に記述され、上記のコードは
と同等であるため、上記のようなネストされた 3 項を回避しようとすることです。

コードをコピー コードは次のとおりです:

alert( true ? 'true' : ( false ? 't' : 'f' ) )

たとえば、PHP では、3 つの要素をネストすると、左側の要素が優先されます。

コードをコピー コードは次のとおりです:

echo (( true ? 'true' : false ) ? 't' : 'f' ) //php

ヒント：
さらに、php の 3 項にはこのようなプロンプトがあることがわかりました

注: 三項演算子はステートメントであるため、その評価は変数ではなくステートメントの結果であることに注意してください。これは、変数を参照によって返したい場合に重要です。参照によって返される関数内のステートメント return $var == 42 ? $a : $b; は機能せず、PHP の将来のバージョンではこれに関する警告が発行されます。

しかし、テストした結果、上記のアプローチは JavaScript でも機能することがわかりました。これはおそらく、js が php に比べて BT ほど厳密ではないためです。