【JavaScript】全面分析不同数据类型之间的隐式转换和大小比较

标签: 数据类型 弱类型语言 隐式转换 js数据类型 不同数据类型比较大小
154人阅读 评论(0) 收藏 举报
分类:

前言:ECMAScript是松散数据类型,也就是说数据类型之间存在着隐式转换。这种隐式转换有利也有弊,我们不需要像java,c等强类型语言那样去强制转换类型后再去执行不同数据类型之间的操作;但我们也要时刻注意 隐式转换带来的陷阱。

一、Boolean类型与其他类型之间的转换

Boolean类型与其他类型之间的转换在开发中是比较频繁的用法了。

①、隐式转换为true

var str = '123';	    //任何非空字符串
var num = 123;          //任何非零数字值(包括无穷大)
var arr = [];		    //任何对象(包括空数组)(不包括null)
var obj = {};		    //任何对象(包括空数组)(不包括null)
var fn = function(){};  //任何对象(包括空数组)(不包括null)

if(str){//转换为true
  console.log(str);	
}
if(num){//转换为true
  console.log(num);	
}
if(arr){//转换为true
  console.log(arr);	
}
if(obj){//转换为true
  console.log(obj);	
}
if(fn){//转换为true
  console.log(obj);	
}

②、隐式转换为false

var str = '';	       	//空字符串
var num = 0;			//0
var num2 = NaN; 		//NaN
var obj_null = null;    //空对象指针
var undef = undefined;  //undefined 

if(str){//转换为false
  console.log(str);	
}
if(num){//转换为false
  console.log(num);	
}
if(num2){//转换为false
  console.log(num2);	
}
if(obj_null){//转换为false
  console.log(obj_null);	
}
if(undef){//转换为false
  console.log(undef);	
}

二、不同数据类型之间的大小比较

①、数字类型与其他类型比较

//数字与字符串比较
console.log(100 < '200');       //true('200'被转换成200 进行比较)
console.log(100 < 'a');		    //false,都是返回false! ('a'被转换成NaN了)
console.log(100 < '101a')       //false,都是返回false!
//这里的'101a'还是被换成了NaN,说明他的转换机制不是通过parseInt('101a')转换的,而是其他方式。
//带有非数值的字符串都会被转换成NaN,这里要特别需要注意!!

//数字与对象比较
console.log(100 < {});	                //false,都是返回false!
console.log('[object Object]' == {});	//true		
console.log({}.toString());             //'[object Object]'
//{}被调用了toString方法转换成了'[object Object]'

//数字与数组比较
console.log(1 == [1]);		       //true ([]被调用了toString方法转换成了'1')
console.log([1].toString());	   //'1'  (string类型)
console.log('1,2' == [1,2] );      //true
console.log([1,2].toString());	   //'1,2' (string类型)
console.log(3 > [1,2])             //false ('1,2'又被转成NaN了)

//数字与null比较
console.log(0 > null);     //false
console.log(0 == null);	   //false
console.log(0 < null);     //false
console.log(0 >= null);	   //true   !!这是一个很严重的bug
//这是一个和严重的bug 0>= null 竟然为true

//数字与undefined比较
console.log(0 > undefined);  //false(都为false)
console.log(0 == undefined); //false
console.log(0 < undefined);  //false
console.log(0 >= undefined); //false

//数字与boolean比较
console.log(0 == false);   //true
console.log(1 == true);    //true

②、特殊数字类型之间的比较

//NaN之间的比较(NaN不等于NaN)
console.log(NaN >= NaN);   //false
console.log(NaN < NaN);	   //false
console.log(NaN != NaN);   //true
//根据这点,得到NaN跟任何数据类型比较都是false
console.log(!NaN)     //true
//这里还有一点要注意的,NaN会被隐式转换为false,!NaN即为true

//Infinity之间的比较(Infinity等于Infinity)
console.log(Infinity == Infinity );   //true
console.log(Infinity > -Infinity );   //true

③、string类型之间的比较

console.log('23' > '3');	    	//false  
console.log('2'.charCodeAt(0));		//50
console.log('3'.charCodeAt(0));		//51
//这里'23'小于'3'这里要特别注意,比较的是'2','3'的字符编码

console.log('a' < 'b');			    //true	
console.log('a' < 'A');			    //false
console.log('A'.charCodeAt(0));		//65
console.log('a'.charCodeAt(0))      //97
console.log('b'.charCodeAt(0));		//98

console.log('你' > '好');		    //false
console.log('你'.charCodeAt(0)); 	//20320
console.log('好'.charCodeAt(0));		//22909

//两个操作数都是字符串,则比较两个字符串对应的字符编码值

④、特殊的undefined 和 特殊的null

console.log(null == null);            //true
console.log(undefined == undefined);  //true
console.log(undefined == null);       //true
//undefined,null除了和自身类型相等以外,他们两个也互相相等

三、特殊数字类型值Infinity运算问题

console.log(Infinity*Infinity);       //Infinity
console.log(Infinity/100);            //Infinity
console.log(100/0);		              //infinity
console.log(Infinity*Infinity);       //Infinity
console.log(0/0);		      		  //NaN
console.log(Infinity*0);	      	  //NaN
console.log(Infinity/Infinity);	      //NaN
console.log(100/Infinity);	      	  //0
//这里Infinity中的运算要特别注意!!!!!!

四、string与不同数据类型相加问题

console.log(5+5);                 //10
console.log('5'+5);	   	          //55	
console.log('5'+true);	   		  //5true
console.log('5'+undefined);	 	  //5undefined
console.log('5'+null);  		  //5null
console.log('5'+[1,2,3]);		  //51,2,3
console.log('5'+{ name:'nick' }); //5[object Object]

可以得到 number类型,Boolean类型,null , undefined 都被隐式转换成string类型,与string类型'5'进行拼接。

Array类型和Object类型,都调用了toString()方法,分别转换成'1,2,3' ,'[object Object]'与String类型'5'进行拼接。

总结:这里列出了很多不同数据类型之间的操作问题,展现了一些便利,但是也展现了很多的弊端。所以大家要取其精华,去其糟粕,注意这些陷阱。不妨更多的去使用===全等符号。

(如有要漏掉内容的麻烦留言告知!)


相关链接:

【javsScript】封装可以分辨所有数据类型的方法



查看评论

一个简单的数据类型判断:占用不同大小字节的变量比较

看书看到C++的template,函数模板化,感觉很新鲜,很好使。无意中想到这样一个问题,如果给定你两个变量,而不告诉你它们的类型,如何用一个函数实现对它们的判断?我简单写了个代码,是从templat...
  • vlirqin
  • vlirqin
  • 2008-06-05 21:34:00
  • 1119

JavaScript数据类型隐式转换原则总结(干货!)

这篇博客对JavaScript之中数据类型隐式转换做一个总结,叙述内容如有错误望大牛们指正 js的数据类型隐式转换主要分为三种情况: 1. 转换为boolean类型 2. 转换为number类型 ...
  • siboogi
  • siboogi
  • 2016-12-15 13:53:39
  • 449

不同数据类型数据的比较大小

以前一直以为C语言中不允许不同数据类型数据的比较大小,今天尝试了一下发现是可以的。在比较的时候,编译器会先将比较符号两端的数据转化为同一类型,而转化的方式是向数据范围大的转化,比如char和int比较...
  • winter_wu_1998
  • winter_wu_1998
  • 2017-09-27 12:46:06
  • 169

tips:Java基本数据类型大小比较

Java基本数据类型大小比较
  • github_36301064
  • github_36301064
  • 2017-01-14 17:12:06
  • 517

PHP之——不同类型数据之间的比较规律

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48771375
  • l1028386804
  • l1028386804
  • 2015-09-27 23:52:35
  • 1234

基本数据类型的隐式转换

基本数据类型( int,          short,          long int,          long  long,    c har,    float,    double, ...
  • pengyunxiao1234
  • pengyunxiao1234
  • 2017-10-14 14:22:59
  • 96

Oracle DB 隐式和显示数据类型转换

转换函数 除了Oracle  数据类型,还可以使用美国国家标准协会(ANSI) 、DB2 和SQL/DS  数据类型定义Oracle DB 中表的列。但是,Oracle Server  会在...
  • rlhua
  • rlhua
  • 2013-10-17 09:22:44
  • 8451

JS深入之趣味比较隐式转换(一)

这一部分讲述的是堆栈调解器的实现React的API可以被分为三部分,核心,渲染器,调解器,如果你对代码库可能有点不了解的话,可以看我的博客其中堆栈调解器是React产品中最重要的部分,被React D...
  • qq_18661257
  • qq_18661257
  • 2017-04-10 22:40:42
  • 1202

C/C++的数值类型隐式类型转换

C/C++在二进制的基础上抽象了常用的数值类型:char, uchar, short, ushort, int, uint, long, ulong, float, double。每种数值类型能表达的...
  • imturkey
  • imturkey
  • 2015-11-10 11:14:19
  • 1274

JavaScript中变量的类型及其比较

在JavaScript中变量包含两种不同数据类型的值,一种是基本类型值,一种是引用类型值。基本类型值是指那种数据值可以完全保存在栈内存中的简单数据片段,包括Undefined,Null,String,...
  • chang_yuan_2011
  • chang_yuan_2011
  • 2012-08-23 01:39:36
  • 2599
    个人资料
    持之以恒
    等级:
    访问量: 4582
    积分: 401
    排名: 18万+
    文章分类
    文章存档