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 相关文章推荐
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
简单实现js浮动框
Dec 13 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
JS动态图片的实现方法完整示例
Jan 13 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 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
php字符串函数学习之substr()
2015/03/27 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
div移动 输入框不能输入的问题
2009/11/19 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
Python制作词云图代码实例
2019/09/09 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
英国床垫在线:Mattress Online
2016/12/07 全球购物
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
地球一小时倡议书
2014/04/15 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
公司外出活动方案
2014/08/14 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
Python time库的时间时钟处理
2021/05/02 Python
给numpy.array增加维度的超简单方法
2021/06/02 Python
使用feign服务调用添加Header参数
2021/06/23 Java/Android
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS