JS if else上級書き方

17741 ワード
JavaScript webフロントフレーム php
まず問題を出します.
図:成長速度表示には、成長速度5に1つの矢印を表示すると仮定する.成長速度は10で2つの矢印を表示します.成長速度12は3つの矢印を表示します.成長速度15は4つの矢印を表示します.その他は0の各矢印が表示されます.コードでどうやって実現しますか?
もう少しif,else:
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;  
}

ちょっといいswitch
var add_level = 0;  

switch(add_step){  
    case 5 : add_level = 1;  
        break;  
    case 10 : add_level = 2;  
        break;  
    case 12 : add_level = 3;  
        break;  
    case 15 : add_level = 4;  
        break;  
    default : add_level = 0;  
        break;  
}

需要が変更された場合:成長速度>12に4つの矢印が表示されます.成長速度は>10で3つの矢印を表示します.成長速度は>5で2つの矢印を表示します.成長速度は>0で1つの矢印を表示します.成長速度<=0で0個の矢印を表示します.
では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={'5':1,'10':2,'12':3,'15':4}[add_step] || 0;

2番目の要件:
var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;

まず、一つの概念を整理してみましょう.js論理演算では、0、」、null、false、undefined、NaNがfalseと判定され、その他はtrue(漏れていないようですが、確認してください)であることを覚えておいてください.これは必ず覚えておいてください.そうしないと、|&&で問題が発生します.
ここでちなみに、よく聞かれるのは、if(!!attr)というコードがたくさんあるのに、なぜif(attr)を直接書かないのかということです.実はこれはもっと厳格な書き方です:typeof 5とtypeofをテストしてください!!5の違い.の役割は、他のタイプの変数をboolタイプに変換することです.
以下では主に論理演算子&&‖について論じる.
ほとんどの言語では、&&&&は「短絡」の原理に従い、例えば&&の最初の式が偽であると、2番目の式を処理することはできませんが、|は正反対です.jsも上記の原則に従う.しかし、興味深いのは、それらが返す値です.コード:var attr=true&&4&&&「aaa」;では、実行結果attrは簡単なtrueやfalseではなく、「aaa」を見てみましょう.コード:var attr=attr|";この演算は、変数が定義されているかどうかを判断するためによく使用されます.定義されていない場合は、関数のパラメータにデフォルト値を定義するときに役立ちます.jsはphpとは異なり、型パラメータ上でfunc($attr=5)を直接定義することができるからである.もう一度、上記の原則を覚えておいてください.実参が0、「」、null、false、undefined、NaNである必要がある場合もfalseとして処理します.
if(a>=5){alert("こんにちは");}次のように書くことができます.
a >= 5 && alert("  ");

これで1行のコードで終わります.しかし、注意しなければならないのは、jsの|&&の特性がコードを簡素化し、コードの可読性の低下をもたらすことです.これは私たち自身がバランスを取る必要があります.一方、jsコードを簡素化することで、ネットワークトラフィック、特に大量のアプリケーションのjs共通ライブラリを実質的に削減することができる.個人的には、比較的複雑なアプリケーションであれば、適切にコメントを書いてください.これは正式と同様にコードを簡略化できるが、可読性が低下し、コードを読む人に要求が高くなり、注釈を書くのが最善だ.
私たちはこれらのテクニックを使用しないことができますが、私たちは必ず理解することができます.これらのテクニックはすでに広く応用されているので、特にJQueryなどのjsボックスのコードは、これらを理解しないと他の人のコードを理解することができません.var Yahoo=Yahoo|{};これは非常に広く応用されている.
OK、最後にjQueryのコードを見てみましょう.
var wrap =  
    // option or optgroup  
    !tags.indexOf(") &&  
    [ 1, ", "" ] ||  

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

    tags.match(/^|tbody|tfoot|colg|cap)/) &&  
    [ 1, "", "
" ] ||  

    !tags.indexOf(") &&  
    [ 2, "", "
" ] ||  

    //  matched above  
    (!tags.indexOf(") || !tags.indexOf("")) &&  
    [ 3, "", "
" ] ||  

    !tags.indexOf(") &&  
    [ 2, "", "
" ] ||  

    // IE can't serialize  and  tags normally  </span>
    !jQuery.support.htmlSerialize &&  
    [ <span class="hljs-number">1</span>, <span class="hljs-string">"div<div>"</span>, <span class="hljs-string">"</div>"</span> ] <span class="hljs-string">||  </span>

    [ <span class="hljs-number">0</span>, <span class="hljs-string">""</span>, <span class="hljs-string">""</span> ];  

    <span class="hljs-comment">// Go to html and back, then peel off extra wrappers  </span>
    div.innerHTML = wrap[<span class="hljs-number">1</span>] + elem + wrap[<span class="hljs-number">2</span>];  

    <span class="hljs-comment">// Move to the right depth  </span>
    while ( wrap[<span class="hljs-number">0</span>]-- )  
        div = div.lastChild;  </code></pre> 
  <p>            <code>$(html)</code>  ，          ， <code><option></code>   <code><select></select></code>   。 <br>                      <code>!tags.indexOf("<opt")</code> ，            <code>startWith</code>    ，         。<code>jquery</code>               ，         。 <br> form:http://jianguang-qq.iteye.com/blog/462449?page=2</p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1289872764114640896"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">
Firefox Mozilla Build インストール方法
Selenium WebDriverでFirefox47を動かす方法