Javascript中3个需要注意的运算符


Posted in Javascript onApril 02, 2015

平时写惯了C#,所以会觉得什么样的运算符就应该做什么样的运算,但是有一天你的习惯被其他语言颠覆了,不知道是不是有一股强大的好奇

心,刚好在js中,我的这种习惯就被颠覆了,下面就看看哪些运算符颠覆了我的三观。

一:==运算符

==运算符之所以可以颠覆,可以从下面几个例子中看出来。

<1> "10"==10 ?

如果这要是放在C#里面,编译器会毫不客气的告诉你,王八羔子,类型都不同,你比个毛线啊。。。但是在JS里面又会是怎样呢?

Javascript中3个需要注意的运算符

从上图中,你可以看到,不管你好奇不好奇,答案就在那里,可能有人就要问,到底是10转化成了“10”,还是“10”被转化成了10,所以这个也

是我一直吐槽的地方,如果是C#,你还可以看看IL里面到底怎么处理的,而JS里面你什么都看不到,只能听教科书上的一面之词,无法眼见为实。

所以除了记住就是记住了,我只能说是字符串”10“转换成了10,然后进行整形比较的。

<2>true==1 ?

这个问题稍微想想还能理解,其实在C#的IL中,也是将true和false相应的转化为1和0,所以js在判断时会将true转化为1,再进行整形比较,这

个现象我觉得不怎么稀奇,记住就好。

Javascript中3个需要注意的运算符 

<3> {valueOf:function(){return "10"}}==10?

这个问题也是蛮奇葩的,对象居然还可以和int类型相比较?但是在JS中却真的可以做到,原理是这样的,如果一个对象和int/string比较的话,

js内部会优先调用valueOf方法,也就是将对象数值化,其实这里好玩的地方就是我们自定义的valueOf重写了父类的valueOf方法,所以上面

的例子就是判断“10”==10?。

Javascript中3个需要注意的运算符

这里还要PS一下,如果你的类中没有定义valueOf方法的话,js内部引擎还会再去找toString()方法,如果有则执行。

Javascript中3个需要注意的运算符

不知道当你接触到这些新用法的时候,是不是觉得有点慌乱,好像有种乱七八糟的感觉?如果你很怕程序有潜在的bug,那么为了保险起见,

转化为同一数据类型来比较吧,当然在js里面还有一个===运算符可以说跟C#里面的逻辑运算符算是最接近的,这个多出来的“=”就是在

“==”的基础上再判断类型是否相等?就比如:

Javascript中3个需要注意的运算符

二:&&和||运算符

 这两个运算符也是蛮奇葩的,在我们的思维习惯里面,这两个运算符两边就应该都是bool类型,但是在JS里面这些定义会被彻底颠覆,正是这些新规则,所以我们可以完成很多新花样,比如在jquery的源码中,可以到处都能找到这样的痕迹。

Javascript中3个需要注意的运算符

从图中我们看到了这么一句,bup=b && b.parentNode,你能理解这句话的意思吗?其实它的意思是先判断b是否存在,如果b不存在,那

可能b就是undefined,null,0 或者NaN,如果b存在,那么就返回m.parentNode,就这么好玩,如果你用C#的话,就少不了几个if条件了,

也算是简化代码吧,然后再看看||操作,这个简直在源码里面可以用泛滥来形容了,不过乍一看,特别像是C#中的可空运算符,所以亲切感倍

增,下面就拿ret=results||[]来说,如果results有值,那么ret=results,如果results为null,undefined,NaN或者0,那么result=[],就

这样的任性,省去了程序员很多if判断,最后要补充一句,其实就像C#的IL中一样,只是JS底层给我们做了if判断。

Javascript中3个需要注意的运算符

Javascript 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
原生JS实现响应式瀑布流布局
Apr 02 #Javascript
Javascript变量的作用域和作用域链详解
Apr 02 #Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 #Javascript
JavaScript中操作Mysql数据库实例
Apr 02 #Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 #Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 #Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 #Javascript
You might like
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
php无限极分类实现方法分析
2019/07/04 PHP
js function使用心得
2010/05/10 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Python实现子类调用父类的方法
2014/11/10 Python
Python程序中设置HTTP代理
2016/11/06 Python
解决DataFrame排序sort的问题
2018/06/07 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
python时间time模块处理大全
2020/10/25 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
《孙权劝学》教学反思
2014/04/23 职场文书
机关保密承诺书
2014/06/03 职场文书
小学运动会口号
2014/06/07 职场文书
个人作风建设自查报告
2014/10/22 职场文书
学生检讨书如何写
2014/10/30 职场文书
党员先进事迹材料
2014/12/19 职场文书
毕业证明书
2015/06/19 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
Redis 限流器
2022/05/15 Redis