20個の実用javascriptテクニックと実践(二)

21.論理AND/ORを用いて条件文を処理する

    var foo =10;
    foo ==10&& doSomething();// is the same thing as if (foo == 10) doSomething();
    foo ==5|| doSomething();// is the same thing as if (foo != 5) doSomething();

  AND               

    Function doSomething(arg1){
    Arg1= arg1 ||10;// arg1 will have 10 as a default value if it’s not already set
    }

 
22.map()関数メソッドを使用して配列内のアイテムをループする

    var squares =[1,2,3,4].map(function(val){
    return val * val;
    });
    // squares will be equal to [1, 4, 9, 16] 

 
23.小数点以下のN位で四捨五入する

    var num =2.443242342;
    num = num.toFixed(4);// num will be equal to 2.4432

 
24.浮動小数点問題

    0.1+0.2===0.3// is false
    9007199254740992+1// is equal to 9007199254740992
    9007199254740992+2// is equal to 9007199254740994

 
どうして?0.1+0.2は0.30000000004に等しい.すべてのjavascript数字が64ビット2進数の内部で浮動小数点で表されていることを知っておくべきです
これはIEEE 754規格に由来する.詳細については、「ブログ」を参照してください.
上記のtoFixed()とtoPrecision()を使用して、この問題を解決することができます.
25.for-inループを使用してオブジェクトの指定属性をチェックする
次のコードクリップは非常に実用的で、オブジェクトのprototypeからオブジェクトのプロパティをループすることを避けることができます.

    for(var name inobject){
    if(object.hasOwnProperty(name)){
    // do something with name
    }
    }

 
26.カンマオペレータ

    var a =0;
    var b =( a++,99);
    console.log(a);// a will be equal to 1
    console.log(b);// b is equal to 99

 
27.計算またはDOMクエリが必要な変数のキャッシュ
jQueryのセレクタを使用すると、キャッシュDOM要素を覚えておくと、実行効率が向上します.

    var navright = document.querySelector('#right');
    var navleft = document.querySelector('#left');
    var navup = document.querySelector('#up');
    var navdown = document.querySelector('#down');

 
28.isFinite()を入力する前にパラメータを検証する

    isFinite(0/0);// false
    isFinite("foo");// false
    isFinite("10");// true
    isFinite(10);// true
    isFinite(undifined);// false
    isFinite();// false
    isFinite(null);// true !!! 

 
 29. 配列内のindexが負の値であることを避ける

    var numbersArray =[1,2,3,4,5];
    varfrom= numbersArray.indexOf("foo");// from is equal to -1
    numbersArray.splice(from,2);// will return [5]

 
ここでindexofのパラメータは負ではないがspliceは
30.シーケンス化と逆シーケンス化(JSON処理用)

    var person ={name :'Saad', age :26, department :{ID :15, name :"R&D"}};
    var stringFromPerson = JSON.stringify(person);
    /* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */
    var personFromString = JSON.parse(stringFromPerson);
    /* personFromString is equal to person object */

 
31.evalまたはFunctionビルダーの使用を避ける
evalまたはfunctionコンストラクタの使用は、scriptエンジンを呼び出すたびにソースコードを実行可能なコードに変換する必要があるため、リソースを非常に消費する操作です.

    var func1 =newFunction(functionCode);//    ！！
    var func2 =eval(functionCode);//    ！！

 
32.使用を避けるwith()
with()を使用して、変数をグローバルに挿入します.しかし、別の変数が同じ名前を持つと、非常に混乱し、数値が上書きされます.
33.配列にfor-inループを使用しない
使用を推奨しない:

    var sum =0;
    for(var i in arrayNumbers){
    sum += arrayNumbers[i];
    }

 
次のコードがより良くなります.

    var sum =0;
    for(var i =0, len = arrayNumbers.length; i < len; i++){
    sum += arrayNumbers[i];
    }

 
追加の利点として、iおよびlenのインスタンス化は、ループ内の最初の文であるため、次の実行よりも高速です.

    for(var i =0; i < arrayNumbers.length; i++)

 
 
どうして?ArrayNumbersの長さはサイクルごとに計算されます
34.settimeout()およびsetInterval()に文字列ではなく関数を渡す
settimeoutとsetIntervalに文字列を渡すと、処理方法はevalと似ており、速度が遅くなります.次のように使用しないでください.

    setInterval('doSomethingPeriodically()',1000);
    setTimeOut('doSomethingAfterFiveSeconds()',5000);

      

    setInterval(doSomethingPeriodically,1000);
    setTimeOut(doSomethingAfterFiveSeconds,5000);

 
35.一連のif/elseではなくswitch/case文を使用する
余分な2つの条件がある場合は、switch/caseを使用するとより速くなり、文法がより優雅になります(コード組織がより良い).余分な10の条件の使用は避けられます.
36.switch/case文を使用して数値領域を処理する
次のテクニックを使用して、数値領域を処理します.

    function getCategory(age){
    var category ="";
    switch(true){
    case isNaN(age):
    category ="not an age";
    break;
    case(age >=50):
    category ="Old";
    break;
    case(age <=20):
    category ="Baby";
    break;
    default:
    category ="Young";
    break;
    };
    return category;
    }
    getCategory(5);// will return "Baby"

 
37.prototypeが指定されたオブジェクトであるオブジェクトを作成する
次のコードを使用して、prototypeが指定したオブジェクトであるオブジェクトを生成します.

    function clone(object){
    functionOneShotConstructor(){};
    OneShotConstructor.prototype=object;
    returnnewOneShotConstructor();
    }
    clone(Array).prototype ;// []

 
39.HTML escaperメソッド

    function escapeHTML(text){
    var replacements={"<":"<",">":">","&":"&","\"":"""};
    return text.replace(/[<>&"]/g,function(character){
    return replacements[character];
    });
    }

 
コンパイル:もちろん、フロントの処理は安全ではありません.バックグラウンドの処理はもっと徹底しています.
40.ループでのtry-catch-finallyの使用を避ける
次のコードは使用しないでください.

    varobject=['foo','bar'], i;
    for(i =0, len =object.length; i <len; i++){
    try{
    // do something that throws an exception
    }
    catch(e){
    // handle exception
    }
    }

 
このコードを使用します.

    varobject=['foo','bar'], i;
    try{
    for(i =0, len =object.length; i <len; i++){
    // do something that throws an exception
    }
    }
    catch(e){
    // handle exception
    }

 
40.XMLHttpRequestsのtimeoutを設定する
1つのXHRに時間がかかりすぎる場合は、XHR呼び出しでsettimeoutを使用して接続を終了できます.

    var xhr =newXMLHttpRequest();
    xhr.onreadystatechange =function(){
    if(this.readyState ==4){
    clearTimeout(timeout);
    // do something with response data
    }
    }
    var timeout = setTimeout(function(){
    xhr.abort();// call error callback
    },60*1000/* timeout after a minute */);
    xhr.open('GET', url,true);
     
    xhr.send();

 
追加のメリットは、AJAX呼び出しの同期を完全に回避できることです.
41.WebSocket timeoutの処理
一般的に、websocket接続が確立されると、サーバは30秒も応答せずにtime out接続することができます.ファイアウォールでもできます.
timeoutの問題を処理するために、サーバに空のメッセージをタイミングよく送信できます.実装のために、コードに2つの方法を追加できます.
1つは接続の存在を保証し、もう1つは接続を解除します.このテクニックを使用すると、timeoutの問題を処理できます.

    var timerID =0;
    function keepAlive(){
    var timeout =15000;
    if(webSocket.readyState == webSocket.OPEN){
    webSocket.send('');
    }
    timerId = setTimeout(keepAlive, timeout);
    }
    function cancelKeepAlive(){
    if(timerId){
    cancelTimeout(timerId);
    }
    }

 
keepAlive関数はwebSocketのonOpen関数の最後に追加できます.cancelKeepAliveはwebSocketのonClose関数の最後に追加されます.
42.オペレータは関数呼び出しよりも速いことを覚えておいてください.
使用を推奨しない:

    var min =Math.min(a,b);
    A.push(v);

    ：

    var min = a < b ? a:b;
    A[A.length]= v;

 
43.コード美化ツールの使用を忘れないでください.コード製品化の前にJSLintとコード圧縮ツール(例えばJSMin)を使用して処理する