js 中的一些小技巧

Posted 2020-10-24 grewer

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) 这样的代码,可读性太差了;

   要记得代码的可读性,可维护性是和他的性能同样重要的;