javascript中的这些tips,必需接住啊

最近,在看 You Don't Know JS这本著作,隔不了几分钟就要敲击下小心脏的节奏真真受不了。准备抽个时间写个合集出来,时不时鞭策下自己:小样,你还太嫩了。废话不多说,这里先讲些基础的小tips,毕竟前菜还是悠着点好~
  1. 0.1 + 0.2 === 0.3
    这是一个很经典的bug:
0.1 + 0.2 === 0.3; //false
0.1 + 0.2 === 0.30000000000000004; //true
0.4 - 0.1 === 0.3; //false
0.4 - 0.1 === 0.30000000000000004; //true
0.5 - 0.2 === 0.3; //true

原因在于:
js中的数字都是用浮点数表示的,并规定使用IEEE 754 标准的双精度浮点数(53 位有效数字精度)表示。
十进制0.1
=> 二进制 0.00011001100110011…(循环0011)
=> 尾数最多取52位,最终0.1的存储值为
0.00011001100110011001100110011001100110011001100110011001
十进制0.2
=> 二进制 0.0011001100110011…(循环0011)
=> 尾数最多取52位,最终0.2的存储值为
0.00110011001100110011001100110011001100110011001100110011
因而两者相加为,
0.01001100110011001100110011001100110011001100110011001100
=> 10进制 0.30000000000000004
那么,如果我们如何修复bug,使得判定0.1+0.2 === 0.3 为true呢?
po出代码:

//兼容es6之前的版本
if(!Number.EPSILON){
  Number.EPSILON = Math.pow(2,-52);//Number.EPSILON在es6中被定义为“machine eplision”,即ε。
}
function numbersCloseEnoughToEqual(n1,n2){
  return Math.abs(n1-n2)  < Number.EPSILON;
}
var a = 0.1+0.2;
numbersCloseEnoughToEqual(a,0.3); //true
numbersCloseEnoughToEqual(0.0001,0.0002); //false

当然,在我们知道其小数点位数的情况下,也可以将其转为整数再计算:

var a = 0.1;
var b = 0.2;
(a*10+b*10/10) == 0.3; //true
  1. a === NaN
    首先,先看几个例子,测测咱们对NaN这个家伙的熟知度:
var a = 2 / "foo"; 
var b = "foo";
typeof a; // "number"
typeof b; // "string"
a; //NaN
b; //"foo"
a == NaN; //false
a === NaN;//false
b == NaN; //false
b === NaN; //false
window.isNaN(a); //true
window.isNaN(b); //true--ouch
Number.isNaN(a); //true,es6才有
Number.isNaN(b); //false

由上述代码我们可以总结如下:
NaN != NaN ;
isNaN存在bug--虽然能检测出为NaN的数值,但对string数据也会输出true;
Number.isNaN虽然能有效检测出为NaN的数值,但不兼容pre-es6的浏览器;
因此,优化代码如下:

if(!Number.isNaN){
    Number.isNaN = function(n){
         return n !== n;
    }
}
var a = 2 / "foo"; 
var b = "foo";
Number.isNaN(a); //true
Number.isNaN(b); //false
  1. 0与-0
    我们知道:
var a = 0/-3; 
bar b = 0;
a; //-0
a== b; //true
a === b; //true
JSON.stringify(a); //"0"
a.toString(); //"0"
String(a); //"0"

在上述情况均无法区分0与-0下,我们如何在程序中区分值为0还是-0呢?
po出可行代码:

function isNegZero(n){
    n = Number(n);
    return (n===0) &&(1/n === -Infinity);
}
isNegZero(-0); // true
isNegZero(0); //false
  1. es6的Object.is
    es6中提出的Object.is也可以完美的解决2和3中的问题。观察下面的输出结果:
var a = 2/"foo";
var b = 0/-3;
Object.is(a,NaN); //true
Object.is(b,-0); //true
Object.is(b,0); //false

当然,为保证方法向下兼容pre-es6,优化代码:

if(!Object.is){
    Object.is = function(v1,v2){
        //test for -0
       if(v1 === 0 && v2 === 0){
            return 1/v1 === 1/v2;
       }
      //test for NaN
      if(v1 !== v1){
          return v2 !== v2;
      }
      //else
      return v1 === v2;
    }
}

当然,最好在特殊情况(比较NaN、-0)下使用Object.is方法;否则,对于一般情况,使用==或===会来得更简洁有效率。
先到这,留着点肚子吃主餐~

你可能感兴趣的:(javascript中的这些tips,必需接住啊)