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

前言: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);	
}

2018年5月10日补充:对于空数组跟空对象

console.log( Number('') );		//输出结果0
console.log( Number([]) );		//输出结果0
console.log( Number({}) );		//输出结果NaN
console.log( [] == false );     //输出结果true
console.log( {} == false );		//输出结果false

上面[],被调用了.toString方法,变成''空字符串,而空字符串==false,所以输出结果为true(这里需要特别注意!!)

上面{},被调用了.toString方法,变成'[object Object]',非空字符不等于false。

②、隐式转换为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

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

扫描二维码关注公众号,回复: 952943 查看本文章
//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】封装可以分辨所有数据类型的方法



猜你喜欢

转载自blog.csdn.net/w390058785/article/details/79957206