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监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
JavaScript 滚轮事件使用说明
Mar 07 Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
浅述Javascript的外部对象
Dec 07 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 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
PHP中Session的概念
2006/10/09 PHP
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
php session 写入数据库
2016/02/13 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
python字符串中匹配数字的正则表达式
2019/07/03 Python
Python bisect模块原理及常见实例
2020/06/17 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
主要的Ajax框架都有什么
2013/11/14 面试题
财务会计专业毕业生自荐信
2013/10/19 职场文书
揠苗助长教学反思
2014/02/04 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
2015年话务员工作总结
2015/04/29 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫