JavaScript中的操作符类型转换示例总结


Posted in Javascript onMay 30, 2016

首先,我们先来做一些题目吧!为了统一,我不混着来写这些题目,面试题目中,经常将这些题目混起来,这样对你的迷惑度会更大,为了更方便演示,我在这里分模块写了一些题目,大家可以看下!

操作符字符串的隐性转换
 乘法

console.dir("-------以下乘法---------");
 console.dir(5*"5");
 console.dir(5*"a");
 console.dir(5*NaN);
 console.dir(5*null);
 console.dir(5*undefined);
 console.dir(5*5);
 console.dir("-------以上乘法---------");

除法

console.dir("-------以下除法---------");
 console.dir(5/"5");
 console.dir(5/"a");
 console.dir(5/NaN);
 console.dir(5/null);
 console.dir(null/5);
 console.dir(5/undefined);
 console.dir(5/5);
 console.dir(5/0);
 console.dir(0/5);
 console.dir(0/0);
 console.dir("-------以上除法---------");

 取余、求模

console.dir("-------以下取余、求模--------");
 console.dir(16%"5");
 console.dir(5%"a");
 console.dir(5%NaN);
 console.dir(5%null);
 console.dir(null%5);
 console.dir(5%undefined);
 console.dir(5%5);
 console.dir(5%0);
 console.dir(0%5);
 console.dir(0%0);
 console.dir("-------以上取余、求模---------");

 加法

console.dir("-------以下加法--------");
 console.dir(16+"5");
 console.dir(5+"a");
 console.dir(5+NaN);
 console.dir(5+null);
 console.dir(5+undefined);
 console.dir(5+5);
 console.dir("两个数的和是"+5+5);
 console.dir("两个数的和是"+(5+5));
 console.dir("-------以上加法--------");

 减法

console.dir("-------以下减法--------");
 console.dir(16-"5");
 console.dir(5-"a");
 console.dir(5-NaN);
 console.dir(5-null);
 console.dir(5-undefined);
 console.dir(5-5);
 console.dir(5-true);
 console.dir(5-"true");
 console.dir(5-"");
 console.dir("两个数的差是"+5-5);
 console.dir("两个数的差是"+(5-5));
 console.dir("-------以上减法--------");

 关系操作符

console.dir("-------以下关系操作符--------");
 console.dir(16>"5");
 console.dir("16">"5");
 console.dir(5<"a");
 console.dir(5>=NaN);
 console.dir(5<NaN);
 console.dir(NaN>=NaN);
 console.dir(5>=null);
 console.dir(5>=undefined);
 console.dir(5>=5);
 console.dir(5>=true);
 console.dir(5>="true");
 console.dir(5>="");
 console.dir("Brick">"alphabet");
 console.dir("brick">"alphabet");
 console.dir("-------以上关系操作符--------");

 乘法

console.dir(5*"5"); //25
 console.dir(5*"a");//NaN
 console.dir(5*NaN);//NaN
 console.dir(5*null);0
 console.dir(5*undefined);//NaN
 console.dir(5*5);//25

下面说一下乘法隐性转换原则:

1、如果2个数值都是数字,那么直接进行乘法运算,(相信大家都会的,和小学数学一样,同时要注意数字的符号),如果乘积数值超过了ECMAscript的数值表示范围,则返回Infinity(正无穷)或者-Infinity(负无穷)
2、如果一个数是NaN,那么结果就是NaN
3、如果Infinity与0相乘,结果是NaN
4、假如一个操作符是数字,另外一个不是数值,那么先用Number()函数,将其进行转化,将转化出来的值与数字进行相乘。假如转换出来的结果出现NaN,那么结果就是NaN。
除法

console.dir(5/"5");//1  将字符转化为数字进行相除
 console.dir(5/"a");//NaN  将“a”用Number()函数进行转化,出来的值是NaN,结果就是NaN
 console.dir(5/NaN);//NaN
 console.dir(5/null);//Infinity null用Number()函数进行转化,结果是0,那么5/0是正无穷
 console.dir(null/5);//0 同上0/5是0
 console.dir(5/undefined);//NaN  undefined 用Number()进行转化,结果是NaN
 console.dir(5/5);//1
 console.dir(5/0);//Infinity
 console.dir(0/5);//0
 console.dir(0/0);//NaN //0除以0结果是NaN

下面说一下除法隐性转换原则:

和乘法类似,唯一多的一条就是0/0结果是NaN
取余、求模

求余在项目中用的最多的是求奇数偶数的时候。我们经常用一个数值与2进行求余,结果是0那么这个数是偶数,结果是1那么这个数是奇数。

看看上面的题目:

console.dir(16%"5"); //1 将字符串5通过Number()转化为5然后进行求余
 console.dir(5%"a");//NaN
 console.dir(5%NaN);//NaN
 console.dir(5%null);//NaN 将null 通过Number()转化,结果是0,然后计算5%0 ,结果是NaN
 console.dir(null%5);//0 同上0%5 取余,结果是0
 console.dir(5%undefined);//NaN
 console.dir(5%5);//0
 console.dir(5%0);//NaN
 console.dir(0%5);//0
 console.dir(0%0);//NaN
console.dir(Infinity%Infinity);//NaN
console.dir(5%Infinity);//5
 console.dir(Infinity%5); //NaN

下面说一下取余隐性转换原则:

和乘法一样,我说一下比较特别的地方吧!我们都知道被除数和除数的概念吧,小学的时候就学过的。

1、被除数是无穷大,除数是有限大的值,那么结果是NaN
2、被除数是有限大的值,除数是0,那么结果是NaN
3、Infinity%Infinity结果是NaN
4、被除数是有限大的值,除数是无穷大的值,结果是被除数。
5、被除数是0,结果是0
减法

看看上面的例子吧!

console.dir(16-"5");//11
 console.dir(5-"a");//NaN
 console.dir(5-NaN);//NaN
 console.dir(5-null);//5
 console.dir(5-undefined);//NaN
 console.dir(5-5);//0
 console.dir(5-true);//4
 console.dir(5-"true");//NaN
 console.dir(5-"");//5
 console.dir(5-Infinity);//-Infinity
 console.dir(Infinity-Infinity);//NaN
 console.dir("两个数的差是"+5-5);//NaN
 console.dir("两个数的差是"+(5-5));//两个数的差是0

下面说一下减法隐性转换原则:

和上面一样,相同的就不说了,我说一下减法特有的。

1、Infinity-Infinity结果是NaN
2、-Infinity-Infinity结果是-Infinity
3、一个数字减Infinity结果是-Infinity
4、Infinity-(-Infinity)结果是Infinity
5、如果操作数是对象,则调用对象valueOf方法,如果结果是NaN那么结果就是NaN。如果没有valueOf方法,那么调用toString()方法,并将得到的字符串转换为数值。
关系操作符

关系运算符统一返回true或者false

console.dir(16>"5"); //true
 console.dir("16">"5");//false
 console.dir(5<"a");//false
 console.dir(5>=NaN);//false
 console.dir(5<NaN);//false
 console.dir(NaN>=NaN);//false
 console.dir(5>=null);//true
 console.dir(5>=undefined);//false
 console.dir(5>=5);//true
 console.dir(5>=true);//true
 console.dir(5>="true");//false
 console.dir(5>="");//true 
 console.dir("Brick">"alphabet");//false B的字符串编码值是66 ,而a的字符串编码是97.因此false
 console.dir("brick">"alphabet");//true 小写字母b比a大,所以是true

下面说一下关系运算符隐性转换原则:

还是和上面一样,相同的就不说了。

如果比较的两个数都是字符串,那么会比较字符串对应的字符串编码值。

加法运算

加法运算隐性转换,我之所以最后说,是因为加法运算隐性转换和之前的不一样,之前的所有的运算符号,只要一个是数字,另一个也默认使用Number()进行数字转换。加法运算不一样。加法运算只要其中一个是字符串,那么另外一个也会转换为字符串,然后进行字符串的拼接!

console.dir(16+"5"); //156
 console.dir(5+"a");//5a
 console.dir(5+NaN);//NaN
 console.dir(5+null);//5
 console.dir('5'+null);//5null
 console.dir(5+undefined);//NaN
 console.dir(null+undefined);//NaN
 console.dir(5+5);//10
 console.dir("两个数的和是"+5+5);//两个数的和是55
 console.dir("两个数的和是"+(5+5));//两个数的和是10

下面说一下加法运算符隐性转换原则:

1、有一个是字符串,那么另外一个也会转换为字符串进行拼接。假如一个是字符串,另外一个是null或者undefined,那么相加,null或者undefined就会调用String()方法,获得字符串“null”或者“undefined”,然后进行拼接。
2、假如一个数字加null或者undefined,那么还是把null或者undefined进行Number()转换之后再相加。
3、剩下的原则和其他的差不多,就不多说了。

双等号隐性转换
把以下代码运行一遍,相信你自然就懂了~

var a;

console.dir(0 == false);//true

console.dir(1 == true);//true

console.dir(2 == {valueOf: function(){return 2}});//true

console.dir(a == NaN);//false
console.dir(NaN == NaN);//false

console.dir(8 == undefined);//false

console.dir(1 == undefined);//false

console.dir(2 == {toString: function(){return 2}});//true

console.dir(undefined == null);//true

console.dir(null == 1);//false

console.dir({ toString:function(){ return 1 } , valueOf:function(){ return [] }} == 1);//true

console.dir(1=="1");//true

console.dir(1==="1");//false
Javascript 相关文章推荐
如何用javascript去掉字符串里的所有空格
Feb 08 Javascript
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
javascript中String类的subString()方法和slice()方法
May 24 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
JavaScript函数重载操作实例浅析
May 02 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
jQuery中的通配符选择器使用总结
May 30 #Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 #Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 #Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 #Javascript
JS检测移动端横竖屏的代码
May 30 #Javascript
BootStrap中Tab页签切换实例代码
May 30 #Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 #Javascript
You might like
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
Javascript操作cookie的函数代码
2012/10/03 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
jQuery操作cookie
2016/08/08 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
微信小程序商品到详情的实现
2017/06/27 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
python基于socket实现网络广播的方法
2015/04/29 Python
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
Python中的整除和取模实例
2020/06/03 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
高级3D打印市场:Gambody
2019/12/26 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
大学生求职计划书
2014/04/30 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
开展创先争优活动总结
2014/08/28 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
学术会议通知
2015/04/15 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python