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 相关文章推荐
基于jQuery的360图片展示实现代码
Jun 14 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
原生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
php5数字型字符串加解密代码
2008/04/24 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
10款实用的PHP开源工具
2015/10/23 PHP
php远程下载类分享
2016/04/13 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
js 分栏效果实现代码
2009/08/29 Javascript
js实现分割上传大文件
2016/03/09 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
python写一个随机点名软件的实例
2019/11/28 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
铲车司机岗位职责
2014/03/15 职场文书
2016天猫双十一广告语
2016/01/28 职场文书