跟我学习javascript的隐式强制转换


Posted in Javascript onNovember 16, 2015

JavaScript的数据类型分为六种,分别为null,undefined,boolean,string,number,object。

object是引用类型,其它的五种是基本类型或者是原始类型。我们可以用typeof方法打印来某个是属于哪个类型的。不同类型的变量比较要先转类型,叫做类型转换,类型转换也叫隐式转换。隐式转换通常发生在运算符加减乘除,等于,还有小于,大于等。。

typeof '11' //string 
typeof(11)  //number
'11' < 4 //false

一、基本类型的转换

下面先讲加减乘除:

1. 字符串加数字,数字就会转成字符串。

2. 数字减字符串,字符串转成数字如果字符串不是纯数字就会转成NaN。字符串减数字也一样。两个字符串相减也先转成数字。

3. 乘,除,大于,小于跟减的转换也是一样。

//隐式转换 + - * == / 
// + 
10 + '20' //'2010'
// -
10 - '20' //-10
10 - 'one' //NaN
10 - '100a' //NaN
// *
10*'20' //200
'10'*'20' //200
// /
20/'10' //2
'20'/'10' //2
'20'/'one'  //NaN

4.加法操作顺序是敏感的

类似这样的混合表达式有时令人困惑,因为 JavaScript 对操作顺序是敏感的。例如,表达式:1+2+"3";  //"33"

由于加法运算是自左结合的(即左结合律),因此,它等同于下面的表达式:(1+2)+"3";  //"33"

与此相反,表达式:1+"2"+3;  //"123"的计算结果为字符串“123”。左结合律相当于是将表达式左侧的加法运算包裹在括号中。

5.再来看看一组 ==

1).undefined等于null

2).字符串和数字比较时,字符串转数字

3).数字为布尔比较时,布尔转数字

4).字符串和布尔比较时,两者转数字

// ==
undefined == null; //true
'0' == 0;  //true,字符串转数字
0 == false; //true,布尔转数字
'0' == false; 
 //true,两者转数字
null == false;   //false
undefined == false;  //false

7个false值:false,0,-0,“”,NaN,null以及undefined,所有其他值都是truth

6、NaN,不是一个数字

NaN 是一个特殊值,说明某些算术运算(如求负数的平方根)的结果不是数字。方法 parseInt() 和 parseFloat() 在不能解析指定的字符串时就返回这个值。对于一些常规情况下返回有效数字的函数,也可以采用这种方法,用 Number.NaN 说明它的错误情况。

Math.sqrt(-2)
Math.log(-1)
0/0
parseFloat('foo')

对于很多JavaScript的初学者来说,它的第一个陷阱是调用typeof时返回结果的通常是你想不到的:

console.log(typeof NaN); // 'Number'

这情情况下,NaN并不意味着是一个数字,它的类型是数字。明白吗?
因为typeof 返回的是字符串,有六种:“number”、”string”、”boolean”、”object”、”function”、”undefined

保持冷静,因为下面还有很多混乱的地方。让我们比较两个NaN:

var x = Math.sqrt(-2);
var y = Math.log(-1);
console.log(x == y); // false

也许这是因为我们没有使用严格等价(===)操作?显然不是。

var x = Math.sqrt(-2);
var y = Math.log(-1);
console.log(x === y); // false

直接比较两个NaN呢?

console.log(NaN === NaN); // false

因为有很多方法来表示一个非数字,所以一个非数字不会等于另一个为NaN的非数字,它还是有一定道理的。

但是当然,解决方案现在已经有了。让我们认识一下全局函数isNaN:

console.log(isNaN(NaN)); // true

唉,不过 isNaN() 也有它自己的很多缺陷呀:

console.log(isNaN('hello')); // true
console.log(isNaN(['x'])); // true
console.log(isNaN({})); // true

这样又产生了很多不同的解决方案。其中一个是利用 了NaN的非反射性质(例如, 看看 Kit Cambridge 的笔记)

var My = {
 isNaN: function (x) { return x !== x; }
}

不过幸运的是,在即将到来的ECMAScript 6中, 有一个Number.isNaN() 方法提供可靠的NaN值检测。
换句话说,只有在参数是真正的NaN时,才会返回true

console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(Math.sqrt(-2))); // true
console.log(Number.isNaN('hello')); // false
console.log(Number.isNaN(['x'])); // false
console.log(Number.isNaN({})); // false

二、引用类型的转换

基本类型间的比较相对简单。引用类型和基本类型的比较就相对复杂一些,先要把引用类型转成基本类型,再按上述的方法比较。

1.引用类型转布尔全是true。

比如空数组,只要是对象就是引用类型,所以[]为true。引用类型转数字或者字符串就要用valueOf()或者toString();对象本身就继承了valuOf()和toString(),还可以自定义valueOf()和toString()。根据不同的对象用继承的valueOf()转成字符串,数字或本身,而对象用toString就一定转为字符串。一般对象默认调用valueOf()。

1).对象转数字时,调用valueOf();

2).对象转字符串时,调用toString();

先看看下面的例子:

0 == []; // true, 0 == [].valueOf(); ---> 0 == 0;
'0' == []; // false, '0' == [].toString(); ---> '0' == '';
2 == ['2']; // true, 2 == ['2'].valueOf(); ---> 2 == '2' ---> 2 == 2;
'2' == [2]; // true, '2' == [2].toString(); ---> '2' =='2';

[] == ![]; //true, [].valueOf() == !Boolean([]) -> 0 == false ---> 0 == 0;

对象转成数字时,调用valueOf(),在这之前先调用的是toString();所以我猜valueOf方法是这样的。So上面的例子 0 == []要改成下面更合理。无论如何,[]最后是转成0的。

var valueOf = function (){
 var str = this.toString(); //先调用toString(),转成字符串
 //...
}
0 == []; // true, 0 == [].valueOf(); -> 0 == '0' -> 0 == 0;

自定义的valueOf()和toString();

  • 自定义的valueOf()和toString()都存在,会默认调用valueOf();
  • 如果只有toString(),则调用toString();
var a = [1];

a.valueOf = function (){ return 1;}
a.toString = function (){ return '1';}

a + 1; // 2, valueOf()先调用

去掉valueOf()就会调用toString()。

var a = [1];

a.valueOf = function (){ return 1;}
a.toString = function (){ return '1';}

a + 1; // 2, 先调用valueOf()
//去掉valueOf
delete a.valueOf;
a + 1; // '11', 调用toString()

如果返回其它会怎么样呢?

var a = [1];

a.valueOf = function (){return ;}
a.toString = function (){return 1 ;};

1 - a; //NaN

其它对象 调用valueOf()转成不同的类型:

var a = {};
a.valueOf(); //Object {}
var a = [];
a.valueOf(); //[] 自己本身
var a = new Date();
a.valueOf(); //1423812036234 数字
var a = new RegExp();
a.valueOf(); // /(?:)/ 正则对象

引用类型之间的比较是内存地址的比较,不需要进行隐式转换,这里不多说。

[] == [] //false 地址不一样

var a = [];
b = a;
b == a //true

2.显式转换

显式转换比较简单,可以直接用类当作方法直接转换。

Number([]); //0
String([]); //”
Boolean([]); //true

还有更简单的转换方法。

3 + ” // 字符串'3'
+'3' // 数字3
!!'3' // true

以上就是本文的全部内容,详细介绍了javascript的隐式强制转换,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
JavaScript构造函数详解
Dec 27 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
深入详解JS函数的柯里化
Jun 09 Javascript
跟我学习javascript的浮点数精度
Nov 16 #Javascript
跟我学习javascript的严格模式
Nov 16 #Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 #Javascript
关于javascript中dataset的问题小结
Nov 16 #Javascript
javascript入门教程基础篇
Nov 16 #Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 #Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 #Javascript
You might like
PHP写的资源下载防盗链类分享
2014/05/12 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
javascript的函数
2007/01/31 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
python版大富翁源代码分享
2018/11/19 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
Python如何定义接口和抽象类
2020/07/28 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
英国在线药房:Express Chemist
2019/03/28 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
应届毕业生简历自我评价
2014/01/31 职场文书
跳槽求职信范文
2014/05/26 职场文书
品牌转让协议书
2014/08/20 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
如何理解python接口自动化之logging日志模块
2021/06/15 Python
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript