JavaScript隐式类型转换


Posted in Javascript onMarch 15, 2016

JavaScript的数据类型是非常弱的(不然不会叫它做弱类型语言了)!在使用算术运算符时,运算符两边的数据类型可以是任意的,比如,一个字符串可以和数字相加。之所以不同的数据类型之间可以做运算,是因为JavaScript引擎在运算之前会悄悄的把他们进行了隐式类型转换的,如下是数值类型和布尔类型的相加:

3 + true; // 4

结果是一个数值型!如果是在C或者Java环境的话,上面的运算肯定会因为运算符两边的数据类型不一致而导致报错的!但是,在JavaScript中,只有少数情况下,错误类型才会导致出错,比如调用非函数,或者读取null或者undefined的属性时,如下:

"hello"(1); // error: not a function

null.x; // error: cannot read property 'x' of null

多数情况下,JavaScript都不会出错的,而是自动的进行相应的类型转换。比如-, *, /,和%等算术运算符都会把操作数转换成数字的,但是“+”号就有点不一样了,有些情况下,它是算术加号,有些情况下,是字符串连接符号,具体的要看它的操作数,如下:

2 + 3; // 5

"hello" + " world"; // "hello world"

但是,如果字符串和数字相加,会是怎样的结果呢?JavaScript会自动把数字转换成字符的,不管数字在前还是字符串在前,如下:

"2" + 3; // "23"

2 + "3"; // "23"

字符串和数字相加结果是字符串,字符串和数字相加结果是字符串,字符串和数字相加结果是字符串,重要的事情说三遍!!!!!!

此外,需要注意的是,“+”的运算方向是从左到右的,如下:

1 + 2 + "3"; // "33"

这与下面是等价的:

(1 + 2) + "3"; // "33"

相比之下,下面的结果是不一样的:

1 + "2" + 3; // "123"

但是,隐式类型转换,有时候,会隐藏一些错误的,比如,null会转换成0,undefined会转换成NaN。需要注意的是,NaN和NaN是不相等的(这是由于浮点数的精度决定的),如下:

var x = NaN;

x === NaN; // false

虽然,JavaScript提供了isNaN来检测某个值是否为NaN,但是,这也不太精确的,因为,在调用isNaN函数之前,本身就存在了一个隐式转换的过程,它会把那些原本不是NaN的值转换成NaN的,如下:

isNaN("foo"); // true

isNaN(undefined); // true

isNaN({}); // true

isNaN({ valueOf: "foo" }); // true

上面代码,我们使用isNaN来测试后,发现字符串,undefined,甚至对象,结果都返回真!!!但是,我们总不能说他们也是NaN吧?总而言之,得出的结论是:isNaN检测NaN并不可靠!!!

幸运的是,有一种可靠的并且准确的方法可以检测NaN。我们都知道,只有NaN是自己不等自己的,那么,我们就以使用不等于号(!==)来判断一个数是否等于自身,从而,可以检测到NaN了,如下:

var a = NaN;
a !== a; // true
var b = "foo";
b !== b; // false
var c = undefined;
c !== c; // false
var d = {};
d !== d; // false
var e = { valueOf: "foo" };
e !== e; // false

我们也可以把这种模式定义成一个函数,如下:

function isReallyNaN(x) {
return x !== x;
}

OK,NaN的检测方法就是这么简单,我们下面继续讨论对象的隐式转换!

对象是可以转换成原始值的,最常见的方法就是把它转换成字符串,如下:

"the Math object: " + Math; // "the Math object: [object Math]"
"the JSON object: " + JSON; // "the JSON object: [object JSON]"

对象转换成字符串是调用了他的toSting函数的,你可以手动的调用它来检测一下:

Math.toString(); // "[object Math]"
JSON.toString(); // "[object JSON]"

类似的,对象也是可以转换成数字的,他是通过valueOf函数的,当然,你也是可以自定义这个valueOf函数的,如下:

"J" + { toString: function() { return "S"; } }; // "JS"
2 * { valueOf: function() { return 3; } }; // 6

如果,一个对象同时存在valueOf方法和toString方法,那么,valueOf方法总是会被优先调用的,如下:

var obj = {
toString: function() {
return "[object MyObject]";
},
valueOf: function() {
return 17;
}
};
"object: " + obj; // "object: 17"

但是,多数情况下,这都不是我们想要的,一般的,尽可能使valueOf和toString表示的值相同(尽管类型可以不同)。

最后一种强制类型转换,我们常常称之为“真值运算”,比如,if, ||, &&,他们的操作数不一定是布尔型的额。JavaScript会通过简单的转换规则,将一些非布尔类型的值转换成布尔型的。大多数的值都会转换成true,只有少数的是false,他们分别是:false, 0, -0, ”", NaN, null, undefined,因为存在数字和字符串以及对象的值为false,所以,直接用真值转换来判断一个函数的参数是否传进来了,这是不不太安全的。比如,有一个可以具有默认值得可选参数的函数,如下:

function point(x, y) {
if (!x) {
x = 320;
}
if (!y) {
y = 240;
}
return { x: x, y: y };
}

这个函数会忽略任何的真值为假的参数的,包括0,-0;

point(0, 0); // { x: 320, y: 240 }

检测undefined的更加准确的方法是用typeof操作:

function point(x, y) {
if (typeof x === "undefined") {
x = 320;
}
if (typeof y === "undefined") {
y = 240;
}
return { x: x, y: y };
}

这种写法,可以区分开0和undefined的:

point(); // { x: 320, y: 240 }
point(0, 0); // { x: 0, y: 0 }

另外一种方法是利用参数跟undefined作比较,如下:

if (x === undefined) { ... }

总结:

1. 类型错误有可能会被类型转换所隐藏。

2. “+”既可以表示字符串连接,又可以表示算术加,这取决于它的操作数,如果有一个为字符串的,那么,就是字符串连接了。

3. 对象通过valueOf方法,把自己转换成数字,通过toString方法,把自己转换成字符串。

4.具有valueOf方法的对象,应该定义一个相应的toString方法,用来返回相等的数字的字符串形式。

5.检测一些未定义的变量时,应该使用typeOf或者与undefined作比较,而不应该直接用真值运算。

关于JavaScript隐式类型转换就给大家介绍到这里,希望对大家有所帮助!

Javascript 相关文章推荐
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
JavaScript 继承详解(一)
Jul 13 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
JavaScript流程控制(分支)
Dec 06 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 #Javascript
Angularjs整合微信UI(weui)
Mar 15 #Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 #Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 #Javascript
基于javascript html5实现3D翻书特效
Mar 14 #Javascript
php基于redis处理session的方法
Mar 14 #Javascript
使用javascript插入样式
Mar 14 #Javascript
You might like
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
php常用正则函数实例小结
2016/12/29 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
JavaScript prototype属性使用说明
2010/05/13 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
Numpy数组转置的两种实现方法
2018/04/17 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
网络技术支持面试题
2013/04/22 面试题
给导游的表扬信
2014/01/10 职场文书
工作表现自我评价
2014/02/08 职场文书
留学推荐信范文
2014/05/10 职场文书
商品陈列协议书
2014/09/29 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
法院个人总结
2015/03/03 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript
使用Python开发冰球小游戏
2022/04/30 Python