js and or 演算子 || 素晴らしい use_javascript スキル

WBOY
リリース: 2016-05-16 18:39:47
オリジナル
1103 人が閲覧しました

まず、質問させてください。
js and or 演算子 || 素晴らしい use_javascript スキル
図に示すように、
成長速度の表示規則が次のようになっているとします。
成長率 5 の場合、矢印は 1 つ表示されます。 >成長率 10 では 2 つの矢印が表示されます。
成長率 12 では 3 つの矢印が表示されます。
成長率 15 では 4 つの矢印が表示されます。
コードで実装するにはどうすればよいですか?

Almost if、else:
Js コード


var add_level = 0;
if(add_step == 5){
add_level = 1;
}
else if(add_step == 10){
add_level = 2;
}
else if(add_step == 12){
add_level = 3;
else if(add_step == 15){
add_level = 4; 🎜 >}
else {
add_level = 0;
}


少し良いスイッチ:
Js コード



コードをコピーします
コードは次のとおりです: var add_level = 0; switch(add_step){
case 5: add_level = 1 ;
ブレーク;
ケース 12 : 追加レベル = 3;
ブレーク; ;
default : add_level = 0;
break;


} 要件が次のように変更された場合、
増加率は 4 つ表示されます。成長率が >10 の場合は 3 つの矢印が表示されます。
成長率が >5 の場合は 2 つの矢印が表示されます。
成長率が
そうするとswitchで実装すると非常に面倒になります。
では、たった 1 行のコードでそれを実装することを考えたことはありますか?
OK、js の強力な表現力を見てみましょう:
Js コード




コードをコピー


コードは次のとおりです。次のように:


var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==15) && 4 ) || 0;

🎜>
コードは次のとおりです:


var add_level={'5':1,'10':2,'12':3,'15':4}[add_step ] || 0;

2 番目の要件: Js コード コードをコピーします。

var add_level = (add_step>12 && 4) || (add_step>5 && 2) || (add_step>0 && 1) || 0;

まず、概念を整理しましょう。覚えておいてください。js の論理演算では、0、""、null、false、未定義、NaN はすべて false と判断され、それ以外はすべて true と判断されます。漏れはないようです)まあ、ご確認ください)。これを覚えておくと、| と && を使用するときに問題が発生します。
ところで: if(!!attr); というコードがたくさんあるのに、なぜ単に if(attr) と書かないのかとよく聞かれます。
実際、これはより厳密な書き方です。 :
typeof 5 と typeof !!5 の違いをテストしてください。 !! の機能は、他の型の変数を bool 型に変換することです。
以下では主に論理演算子 && と || について説明します。
ほとんどすべての言語で、|| と && は「短絡」原則に従います。たとえば、&& の最初の式は処理されませんが、|| はその逆です。
js も上記の原則に従います。しかし、さらに興味深いのは、それらが返す値です。
コード: var attr = true && 4 && “aaa”;
attr 演算の結果は、単に true か false ではなく、「aaa」になります。
見てみましょう ||:
コード: var attr = attr || この操作は、変数が定義されているかどうかを判断するためによく使用されます。定義されていない場合は、関数パラメータのデフォルト値を定義する場合に便利です。 php とは異なり、js は型パラメーターに func($attr=5) を直接定義できるためです。繰り返しになりますが、上記の原則を覚えておいてください。実際のパラメータが 0、""、null、false、未定義、または NaN である必要がある場合、それも false として扱われます。

if(a >=5){
alert("Hello");
}
は次のように記述できます:
a >= 5 && alter("Hello") ");
これに必要なコードは 1 行だけです。ただし、注意すべき点が 1 つあります。js の || と && の機能はコードを合理化するのに役立ちますが、コードの可読性も低下させるということです。そのためには私たち自身で重さを量る必要があります。
一方で、js コードを合理化すると、特に広く使用されている js パブリック ライブラリのネットワーク トラフィックを大幅に削減できます。個人的にお勧めするのは、比較的複雑なアプリケーションの場合は、適切にコメントを書くことです。これも式と同じで、コードを簡素化することはできますが、可読性が低下し、コードを読む人への要求が高くなります。コメントを書くのが最善の方法です。

これらのテクニックを使用する必要はありませんが、これらのテクニックは広く使用されているため、特に JQuery などの JS ボックス内のコードを理解できなければなりません。他の人のコードを理解するのは難しくなります。
var Yahoo = Yahoo || のように、これは非常に広く使用されています。
OK、最後に jQuery のコードを見てみましょう:

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

var Wrap =
// オプションまたは optgroup
!tags.indexOf(" [ 1, "< ;select multiple ='multiple'>", "" ] ||

!tags.indexOf(" [ 1, "
", "
" ] ||

tags.match(/^ [ 1, "" ] ||

!tags.indexOf(" [ 2, "", "< ;/tbody> ;
" ] ||

// 上に一致
(!tags.indexOf(" [ 3, "", "
" ] ||

!tags.indexOf(" [ 2, "", "< /table> " ] ||

// IE は タグと
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート