跟我学习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 相关文章推荐
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
JavaScript访问样式表代码
Oct 15 Javascript
用js实现小球的自由移动代码
Apr 22 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
详解Vue中watch的高级用法
May 02 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 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 array操作10个小技巧分享
2011/06/23 PHP
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
js no-repeat写法 背景不重复
2009/03/18 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
Python基于有道实现英汉字典功能
2015/07/25 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
Python实现的knn算法示例
2018/06/14 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
Python图片的横坐标汉字实例
2019/12/04 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
会计助理的岗位职责
2013/11/29 职场文书
财务管理专业自荐信范文
2013/12/24 职场文书
网络程序员自荐信
2014/01/25 职场文书
蛋糕店创业计划书
2014/05/06 职场文书
管理提升方案
2014/06/04 职场文书
股份转让协议书范本
2015/01/27 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫