JavaScript 演算子 || の使用テクニックの詳細な例-jsチュートリアル-php.cn

JavaScript 演算子 || の使用テクニックの詳細な例

伊谢尔伦

リリース： 2017-07-19 09:16:08

オリジナル

1270 人が閲覧しました

js AND-OR 演算子 || は、コードを合理化し、プログラムの可読性を下げるために使用できる素晴らしいツールです。

要件 1.

成長速度の表示規則は次のとおりであるとします。
成長率 5 の場合は 1 つの矢印が表示されます。
成長率 12 の場合は 3 つの矢印が表示されます。 15 の成長率は 4 つの矢印を表示します。
その他の場合は 0 つの矢印を表示します。
コードで実装するにはどうすればよいですか?

要件 2.

成長率の表示規則は次のとおりであるとします。

成長率が 12 を超える場合は 4 つの矢印が表示されます

成長率が > の場合は 3 つの矢印が表示されます10;

成長率 > 5 の場合は 2 つの矢印が表示されます。

成長率 > の場合は 1 つの矢印が表示されます。

成長率そうするとswitchで実装するのは非常に面倒です。

では、たった 1 行のコードでそれを実装することを考えたことはありますか?
OK、JS の強力な表現力を見てみましょう:

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

ログイン後にコピー

さらに強力で優れています:

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

ログイン後にコピー

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

ログイン後にコピー

まず最初に、概念を整理しましょう: js ロジックでは、操作中に 0, " "、null、false、unknown、NaN はすべて false と判定され、それ以外はすべて true と判定されます (何も抜けていないようです。確認してください)。これを覚えておくと、| と && を使用するときに問題が発生します。

ところで: if(!!attr); というコードをよく見ると、なぜ if(attr) を直接書かないのかとよく聞かれます
実際、これはより厳密な書き方です:

テストしてください。 typeof 5 と typeof!5 の違い。 !! の機能は、他の型の変数を bool 型に変換することです。

以下では主に論理演算子 && と || について説明します。
ほとんどすべての言語で、|| と && は「短絡」原則に従います。たとえば、&& の最初の式が false の場合、2 番目の式は処理されません。一方、|| はその逆です。
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("你好"); 
}

ログイン後にコピー

は次のように記述できます:

a >= 5 && alert("你好");

ログイン後にコピー

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

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

var wrap = 
    // option or optgroup 
    !tags.indexOf("<opt") && 
    [ 1, "<select multiple=&#39;multiple&#39;>", "</select>" ] || 
    !tags.indexOf("<leg") && 
    [ 1, "<fieldset>", "</fieldset>" ] || 
    tags.match(/^<(thead|tbody|tfoot|colg|cap)/) && 
    [ 1, "<table>", "</table>" ] || 
    !tags.indexOf("<tr") && 
    [ 2, "<table><tbody>", "</tbody></table>" ] || 
    // <thead> matched above 
    (!tags.indexOf("<td") || !tags.indexOf("<th")) && 
    [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ] || 
    !tags.indexOf("<col") && 
    [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ] || 
    // IE can&#39;t serialize <link> and <script> tags normally 
    !jQuery.support.htmlSerialize && 
    [ 1, "p<p>", "</p>" ] || 
    [ 0, "", "" ]; 
    // Go to html and back, then peel off extra wrappers 
    p.innerHTML = wrap[1] + elem + wrap[2]; 
    // Move to the right depth 
    while ( wrap[0]-- ) 
        p = p.lastChild;

ログイン後にコピー

このコードは $(html) を処理するために作成者によって使用されます。