1. 程式人生 > >js 中的一些小技巧

js 中的一些小技巧

技巧 def 對象 bar 維護 方式 undefine can 常用

  1. js 數字操作:
    1.1 取整:
    取整有很多方法如:

    parseInt(a,10);
    Math.floor(a); 
    a>>0;
    ~~a;
    a|0; 

    前面2種是經常用到的,後面3中算是比較偏的,因為其有不足之處,比如將下面代碼放到 console 裏測試:

    var num = 2150000000;
    console.log(num|0);
    console.log(parseFloat(num))

    你會發現問題;
    輸出的是:

    -2144967296
    2150000000

    其原因就在於js數字存儲的方式,js的數值存儲可以說是32位64位是透明的的,他的前31位是用來存數字,31位是存符號(表示正負),
    所以一次位操作,他最大的數字是 2^31 ,比它大的數字才會出現問題,所以才這個數字以下的操作大家都不用擔心的;

    1.2 數字的加減:
    這個應該很多人都知道,如0.1+0.2,使用 console 計算的結果並不是你們想象的0.3,而是0.30000000000000004;
    原因嘛,是因為js 是基於 IEEE754 數值的計算,所有使用的都會有這毛病,比如早期的 Java;
    而我們進行加減運行時,可以對其小數點進行控制,來省略不必要的小數;

  2. 邏輯運算符:
    2.1 在我之前學習的時候,只說明了這樣的情況

    //||或:
    var bar = foo||apple;
     //約等於
    if(foo){
       bar = foo;
    }else{
       bar = apple;
    }
    
    //而&&且:
    var bar = foo&&apple;
    if(foo){ bar = apple; }else{ bar = foo; }

    我想大家看到這個也許知道了是怎麽回事,但是卻不知道應用的場景吧;
    ||(或),一般用來創建值得默認值,比如var foo = bar || 1;,這樣可以聯系上面,當 bar 沒有值得時候 foo = 1;

    而&&(且)我覺得作用比或要大,因為他有短路的功能,舉個例子:

    var data = {
       msg:{
         foo:1
      }
    }
    var bar = data.msg && data.msg.foo;

    這裏使用且可以用來判斷 foo 的前置 msg 是否存在,如果不存在就直接返回 undefined,

    並且不會報錯,而單獨使用 data.msg.foo 時,若 msg 不存在,則會出現 Cannot read property ‘foo‘ of undefined 的報錯,
    這個在日常工作共較為重要;

    而另外一個例子:

    var isRun = true;
    function foo(callback){
       callback&&callback();
       //或者:
       isRun&&callback();
    }

    在函數中判斷是否有回調函數或者設置值是否為TRUE,若TRUE則執行;

  3. 替換 else if:
    這個問題也是老生常談了,我就簡單的說下;
    3.1 使用 switch 替換:
    相信不用我多說了,不過有一點,在 case 裏要使用 break 或 return,不然會出現一個問題:

    var a = 1;
    
    switch(true){
        case a<2:
            console.log(1);
        case a<3:
            console.log(2);
    }

    運行後可以看到,輸出了1,2 那麽是 a<2 且 a<3 了嗎? 其實並不是:

    var a = 1;
    
    switch(true){
        case a<2:
            console.log(1);
        case a<1:
            console.log(2);
    }

    將 a<3 替換為 a<1,運行後,仍然是輸出1,2 這可以說明 a<1 並沒有被判斷;
    這個地方需要被註意,很多錯誤都會因此而引發;

    3.2 使用對象替換:

    function check(foo){
       return {
         1:'warnging',
         2:'success',
         3:'error'
       }[foo]
    }

    可以用對象的方法來替換if,並且也可以通過或(且)加入默認值:

    function type(foo){
       return {
         1:'warning',
         2:'success',
         3:'error'
       }[foo]|| 'default'
    }

    對比一下,比 if else 方便,簡潔了很多;
    也許有人會說邏輯運算符也能代替,但是不忘忘記了代碼的可讀行,像var a = bar && bar || (baz && qux) 這樣的代碼,可讀性太差了;

    要記得代碼的可讀性,可維護性是和他的性能同樣重要的;

js 中的一些小技巧