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方法;否则,对于一般情况,使用==或===会来得更简洁有效率。
先到这,留着点肚子吃主餐~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 数组 在Javascript中,数组可以容纳任何类型的值。 使用delete运算符删除数组中单元时,lenght属...
    俗三疯阅读 1,544评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,860评论 19 139
  • 语法基础 - 词法 字符集 Unicode字符集, 区分大小写 注释 // /* */ 直接量 数字 小数 字符串...
    KeKeMars阅读 4,430评论 1 11
  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 5,093评论 0 15
  • 特别说明,为便于查阅,文章转自https://github.com/getify/You-Dont-Know-JS...
    杀破狼real阅读 1,567评论 0 0

友情链接更多精彩内容