在javascript中,null>=0 为真,null==0却为假,null的值详解


Posted in Javascript onFebruary 22, 2017

在javascript中,null>=0 为真,null==0却为假,null的值详解

1.前言

今天看见朋友们在讨论一个问题,说 null 到底和 0 是不是相等的。

听到这里,自己赶紧去写个 Demo 试一下。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>MR_LP:3206064928</title>
</head>
<body>

</body>
<script type="text/javascript">
  console.log(null > 0);   // false
  console.log(null < 0);   // false
  console.log(null >= 0);   // true
  console.log(null <= 0);   // true
  console.log(null == 0);   // false
  console.log(null === 0);    // false
</script>
</html>

什么情况?

为什么 console.log(null <= 0); 和 console.log(null >= 0); 这两条的判断是 true 呢?

2.查阅资料

如果想明确,这个问题具体是怎么回事,那么我们需要重新来回顾一下我们的 ECMAScript Language Specification (HTML version),翻译过来就是ECMAScript语言规范(HTML版本)。

2.1 内部相等性运算算法

首先我们来看一下 ES3 关于 内部相等性运算的算法实现。

11.9.3 The Abstract Equality Comparison Algorithm 
The comparison x == y, where x and y are values, produces true or false. Such a comparison is performed as follows: 
1. If Type(x) is different from Type(y), Go to step 14. 
2. If Type(x) is Undefined, return true. 
3. If Type(x) is Null, return true. 
4. If Type(x) is not Number, go to step 11. 
5. If x is NaN, return false. 
6. If y is NaN, return false. 
7. If x is the same number value as y, return true. 
8. If x is +0 and y is -0, return true. 
9. If x is -0 and y is +0, return true. 
10. Return false. 
11. If Type(x) is String, then return true if x and y are exactly the same sequence of characters (same length and same characters in corresponding positions). Otherwise, return false. 
12. If Type(x) is Boolean, return true if x and y are both true or both false. Otherwise, return false. 
13. Return true if x and y refer to the same object or if they refer to objects joined to each other (see 13.1.2). Otherwise, return false. 
14. If x is null and y is undefined, return true. 
15. If x is undefined and y is null, return true. 
16. If Type(x) is Number and Type(y) is String, return the result of the comparison x == ToNumber(y). 
17. If Type(x) is String and Type(y) is Number, return the result of the comparison ToNumber(x)== y. 
18. If Type(x) is Boolean, return the result of the comparison ToNumber(x)== y. 
19. If Type(y) is Boolean, return the result of the comparison x == ToNumber(y). 
20. If Type(x) is either String or Number and Type(y) is Object, return the result of the comparison x == ToPrimitive(y). 
21. If Type(x) is Object and Type(y) is either String or Number, return the result of the comparison ToPrimitive(x)== y. 
22. Return false.

2.2 内部关系运算算法

接下来我们再来看一下 ES3 关于 内部关系运算的算法实现。

11.8.5 The Abstract Relational Comparison Algorithm 
The comparison x < y, where x and y are values, produces true, false, or undefined (which indicates that at least one operand is NaN). Such a comparison is performed as follows: 
1. Call ToPrimitive(x, hint Number). 
2. Call ToPrimitive(y, hint Number). 
3. If Type(Result(1)) is String and Type(Result(2)) is String, go to step 16. (Note that this step differs from step 7 in the algorithm for the addition operator **+ 
* in using *and instead of or.) 
4. Call ToNumber(Result(1)). 
5. Call ToNumber(Result(2)). 
6. If Result(4) is NaN, return undefined. 
7. If Result(5) is NaN, return undefined. 
8. If Result(4) and Result(5) are the same number value, return false. 
9. If Result(4) is +0 and Result(5) is -0, return false. 
10. If Result(4) is -0 and Result(5) is +0, return false. 
11. If Result(4) is +∞, return false. 
12. If Result(5) is +∞, return true. 
13. If Result(5) is -∞, return false. 
14. If Result(4) is -∞, return true. 
15. If the mathematical value of Result(4) is less than the mathematical value of Result(5) — note that these mathematical values are both finite and not both zero — return true. Otherwise, return false. 
16. If Result(2) is a prefix of Result(1), return false. (A string value p is a prefix of string value q if q can be the result of concatenating p and some other string*r*. Note that any string is a prefix of itself, because r may be the empty string.) 
17. If Result(1) is a prefix of Result(2), return true. 
18. Let k be the smallest nonnegative integer such that the character at position k within Result(1) is different from the character at position k within Result(2). (There must be such a k, for neither string is a prefix of the other.) 
19. Let m be the integer that is the code point value for the character at position k within Result(1). 
20. Let n be the integer that is the code point value for the character at position k within Result(2). 
21. If m < n, return true. Otherwise, return false.

2.3 ES3 的 运算符

2.3.1 ES3 的 “>” 运算符:

The Greater-than Operator ( > ) 
The production RelationalExpression : 
RelationalExpression > ShiftExpression is evaluated as follows: 
1. Evaluate RelationalExpression. 
2. Call GetValue(Result(1)). 
3. Evaluate ShiftExpression. 
4. Call GetValue(Result(3)). 
5. Perform the comparison Result(4) < Result(2). 
6. If Result(5) is undefined, return false. Otherwise, return Result(5).

2.3.2 ES3 的”>=” 运算符:

The Greater-than-or-equal Operator ( >= ) 
The production RelationalExpression : 
RelationalExpression >= ShiftExpression is evaluated as follows: 
1. Evaluate RelationalExpression. 
2. Call GetValue(Result(1)). 
3. Evaluate ShiftExpression. 
4. Call GetValue(Result(3)). 
5. Perform the comparison Result(2) < Result(4). (see 11.8.5). 
6. If Result(5) is true or undefined, return false. Otherwise, return true.

2.3.3 ES3 的 “==” 运算符 :

The Equals Operator ( == ) 
The production EqualityExpression : 
EqualityExpression == RelationalExpression is evaluated as 
follows: 
1. Evaluate EqualityExpression. 
2. Call GetValue(Result(1)). 
3. Evaluate RelationalExpression. 
4. Call GetValue(Result(3)). 
5. Perform the comparison Result(4) == Result(2). (see 11.9.3). 
6. Return Result(5).

3. 根据资料得出的内容

着重看一下,上面特意加粗的地方,我们可以明确下面三件事。

  1. 关系运算符 和 相等运算符 并不是一个类别的.
  2. 关系运算符,在设计上,总是需要运算元尝试转为一个number . 而相等运算符在设计上,则没有这方面的考虑.
  3. 最重要的一点, 不要把 拿 a > b , a == b 的结果 想当然的去和 a >= b 建立联系. 正确的符合最初设计思想的关系是 a > b 与 a >= b是一组 . a == b 和其他相等运算符才是一组. 比如 a === b , a != b, a !== b .

那么我们就可以反过来看这个问题了。

null > 0   // null 尝试转型为number , 则为0 . 所以结果为 false, 
null >= 0  // null 尝试转为number ,则为0 , 结果为 true. 
null == 0  // null在设计上,在此处不尝试转型. 所以 结果为false.

这里引用一下 Franky大大的话。

a >= b 运算符只是简单的去对 a < b的结果取反. 我以为这是一个设计上的失误的另一个理由是 undefined,在标准中,被单拎出来.细心的你,也一定发现了这一点. 对于undefined的设计,  undefined > 0  , undefined < 0, undefined == 0 的结果是符合设计上,逻辑的一致性的. 而null是被遗漏的东西.直到今天早上.我重新翻阅了ES3,5.相关章节. 才恍然大悟自己没有从根本上理解到这个问题.

虽然前面的例子,我catch到了BE当初的设计思想. 但是从全局的角度来看. 从关系运算符到相等运算符,尤其是相等运算符的设计上. 真的十分混乱不堪. BE在信中提到,他对 == 的现状也很无奈. 甚至用愚蠢这个词来形容自己当初的实现(当然他还提到,当初只是为了在10天内设计出js,并跑过qa的测试用例). 即使如此, 但是他仍然表示 null == 0 这个结果是他想要的. 


好吧,到了这里,我也有种无力感. 我认为纵观JavaScript,对关系运算和相等运算的设计.除了混乱,我想不出还有什么词来形容它们更恰当. 这一点从,我们生产环境代码中,大量的类型检查,和防御性代码的的存在,就可以证明这一点.

同时 Franky大大还举了另外一个例子。

function case1(a){
  if(a == null){
     ....
  }
} 
 
function case2(a){
  if(a == undefined){
    ...
  }  
}
 
// 上面两组完全等价, 这就是一种不明确表述.
// 我们永远不知道代码编写者的目的到底是同时匹配null 和 undefined还是只匹配其中某一个
 
 
function case3(a){
  if(a === null || a === undefined){
    ...
  }
}
 
// case3 才是最好的表述. 我们明确知道代码编写者的意图. 
// 即使很多人可能认为这个代码很愚蠢. 但我坚定的认为这才是好代码.

最后, 不得不提到,我发出null >= 0 这封信后, Andrea Giammarchi 表示了对我之前看法的支持,他同我最初的看法一样,认为 null >= 0 的结果应该为 false . 并建议在 ES7 中的严格模式中,修改这个结果. 虽然同样遭到 David Bruant 的反对.  好吧为他和我的这个错误看法,默哀一分钟…

4.后记

所以写代码,写规范,都应该明确表述. 即使表述的很罗嗦,但不会引起歧义或怀疑. 这才是一份好的标准.文档,代码. 而避免歧义,和各种混乱不堪的规则,是一门语言最应遵守的设计原则.

最后也希望大家在日常的开发中,能够少遇坑。

Javascript 相关文章推荐
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
JavaScript表单验证开发
Nov 23 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 Javascript
vue + axios get下载文件功能
Sep 25 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
微信小程序 扎金花简单实例
Feb 21 #Javascript
angular中的http拦截器Interceptors的实现
Feb 21 #Javascript
微信小程序 PHP生成带参数二维码
Feb 21 #Javascript
vue-resource 拦截器使用详解
Feb 21 #Javascript
微信小程序 template模板详解及实例
Feb 21 #Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 #Javascript
Angular实现购物车计算示例代码
Feb 21 #Javascript
You might like
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
yii用户注册表单验证实例
2015/12/26 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
Python性能优化的20条建议
2014/10/25 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
竞聘上岗演讲稿范文
2014/01/10 职场文书
小学生安全保证书
2014/02/01 职场文书
全国道德模范事迹
2014/02/01 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
2016十一国庆节感言
2015/12/09 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书