【JavaScript】探究数据类型之间的隐式转换和大小比较

最新推荐文章于 2023-10-16 09:10:18 发布
置顶 最新推荐文章于 2023-10-16 09:10:18 发布
阅读量4.8k 收藏 3
点赞数 3
分类专栏： JavaScript 文章标签： js隐式转换 不同数据类型比较大小 时间大小比较 对象与对象之间大小比较
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w390058785/article/details/79957206
版权

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

 

一、隐式转换成Boolean类型

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

①、隐式转换为true

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

if(str){//转换为true
  console.log(str);	
}
if(str2){//转换为true
  console.log(str2);
}
if(str3){//转换为true
  console.log(str3);
}
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);	
}

 

二、隐式转换成String类型

var num = 123;      
var arr = [1,2,3];           
var obj = {};  
var obj_null = null;
var bool_true = true;
var undef = undefined;

console.log(num+'');            //'123'
console.log(arr+'');		//'1,2,3'
console.log(obj+'');		//'[object Object]'
console.log(obj_null+'');	//'null'
console.log(bool_true+'');	//'true'
console.log(undef+'');	        //'undefined'

console.log(5+num);             //128
console.log('5'+num);	   	//'5123'	
console.log('5'+arr);		//'51,2,3'
console.log('5'+obj); 		//'5[object Object]'
console.log('5'+obj_null);  	//'5null'
console.log('5'+bool_true);	   	//'5true'
console.log('5'+undef);	//'5undefined'

可以得到与空字符串和string类型'5'相加，number类型，Boolean类型，null , undefined 都被隐式转换成string类型，

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

 

三、隐式转换成数字类型

console.log(100 + '5');       //1005 ->这里把100转成了'100',然后进行字符串拼接。
//跟上面做比较   
console.log(100 - '5');       //95   ->这里把'5'转成了5,然后执行减法运算。
console.log(100 < '200');     //true ->'200'被转换成了数字200
console.log(100 == '100');    //true ->'100'被转换成了数字100
console.log(true+true);	      //2 -> true被转换成了1
console.log(true == 1);       //true -> true被转换成了1
console.log(false == 0);      //true -> false被转换成了0
console.log([] == 0 );	      //true -> Number([]) == 0
console.log([] == false );    //true -> Number([]) = 0; 0==false;
console.log({} >= 0 );	      //false -> Number({})=NaN; 	
console.log({} < 0 );	      //false -> Number({})=NaN;

这里要注意的是，上面已经说了 if([]) => 会被转换成true，而 [] == false，这个[]会被先用Number([])方法转换成0，然后0 == false 为真。而{}会被Number({})转换成NaN。

 

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

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

//数字与字符串比较
console.log(100 == '100');      //true（'100'被转换成100 进行比较）
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')转换的，而是通过Number()方法去转换的。
//带有非数值的字符串都会被转换成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除了和自身类型相等以外，他们两个也互相相等

 

五、对象与对象之间的比较

let obj1 = {};
let obj2 = {};
let obj3 = { name:'nick' };
let obj4 = { name:'nick' };
let obj5 = obj3;
let obj6 = obj3;

console.log( obj1 == obj2 );    //false
console.log( obj3 == obj4 );    //false
console.log( obj5 == obj6 );    //true
console.log( obj5 === obj6 );   //true
let arr1 = [];
let arr2 = [];
let arr3 = [1,2];
let arr4 = [1,2];
let arr5 = arr3;
let arr6 = arr3;

console.log( arr1 == arr2 );    //false
console.log( arr3 == arr4 );    //false
console.log( arr5 == arr6 );    //true
console.log( arr5 === arr6 );   //true


//下面这两个比较震惊
console.log( [] == ![] );  //true
console.log( {} == !{} );  //false

对象与对象之间的比较，并不是像上面那样，隐式调用toString方法转换后进行比较，而是所处内存空间的比较。（数组属于特殊对象，同理）。

 

六、特殊数字类型值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中的运算要特别注意!!!!!!

 

七、时间大小比较

var oDate1 = new Date(2018,8,8);
var oDate2 = new Date(2018,8,9);
var oDate3 = new Date(2018,9,8);
var oDate4 = new Date(2019,8,8);
console.log(oDate1<oDate2);     //true
console.log(oDate1<oDate3);	//true
console.log(oDate1<oDate4);	//true

var date1 = "2018-08-08";	//"2018/08/08"同理
var date2 = "2018-08-09";	//"2018/08/09"同理
var date3 = "2018-09-08";	//"2018/09/08"同理
var date4 = "2019-08-08";	//"2019/08/08"同理
console.log(date1<date2);       //true
console.log(date1<date3);	//true
console.log(date1<date4);	//true

var time1 = "2018-08-08 08:00:00";
var time2 = "2018-08-08 08:00:01";
var time3 = "2018-08-08 08:01:00";
var time4 = "2018-08-08 09:00:00";
console.log(time1<time2);	//true
console.log(time1<time3);	//true
console.log(time1<time4);	//true

//不同时间格式之间的比较
console.log(oDate1 >= date1);   //false
console.log(oDate1 <= date1);   //false 

console.log(date1 < time1);     //true

 

八、诡异乱码

console.log(Math.max());        //-Infinity
console.log(Math.min());        //Infinity

console.log([]+[]);	        //''	
console.log((![]).length);	//undefined
console.log(![]+'');	        //'false'	
console.log(![]+[]);		//'false'
console.log(!+![]);	        //true ->布尔类型
console.log(!+[]+![]);	        //1
console.log(!+[]+[]+![]);	//'truefalse'
console.log((!+[]+[]+![]).length);	//9

 

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

 

（如有要漏掉内容的麻烦留言告知！）

相关链接：

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

 

 

 

汪小穆
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单介绍JavaScript数据类型之隐式类型转换
10-23
主要介绍了简单介绍JavaScript数据类型之隐式类型转换的相关资料,需要的朋友可以参考下
JavaScript强制类型转换和隐式类型转换操作示例
10-17
主要介绍了JavaScript强制类型转换和隐式类型转换操作,结合实例形式分析了javascript字符串、数字等显示类型转换,以及运算、判断等情况下的隐式类型转换相关操作技巧,需要的朋友可以参考下
隐式转换与显式转换【C#】
天涯~的博客
04-16 1050
隐式转换： 所谓隐式转换，就是系统默认的转换，其本质是小存储容量数据类型自动转换为大存储容量数据类型。 参与运算（算数运算和赋值运算）的操作数和结果类型必须一致，当不一致时，满足两个条件时，系统会自动完成类型转换（隐式转换）： （1）两种类型兼容，比如都是数字类型 （2）目标类型大于源类型，例如，double>int 对于表达式而言，如果一个操作数是double型，则整个表达式可提升
【JavaScript】-- 隐式数据类型转换
qq_48802092的博客
08-10 1565
如果字符串加数字,数字就会转成字符串。而 数字加数字 或 字符串加字符串 则不需要进行转换直接进行运算或字符串拼接。数字减字符串，字符串转成数字。如果字符串不是纯数字就会转成NaN。字符串减数字也一样。两个字符串相减也先转成数字。...
隐式类型转换
melonyzzZ的博客
11-16 6246
在 C 语言中，类型转换的方式一般可分为隐式类型转换和显示类型转换（也称为强制类型转换）。其中隐式类型转换由编译器自动进行，不需要程序员干预。隐式类型转换通常有两种情况：赋值转换和运算转换。
JavaScript的数据类型转换--隐式转换
adqawere的博客
08-30 1104
所谓隐式转换，就是我们在写代码时看不见，但是JavaScript解释器会自动帮我们转换的操作隐式转换的本质是通过ToPrimitive将值转化为原始值，主要涉及到三种转换：1.将值转为原始值 ToPrimitive（）2.将值转为数字 ToNumber（）3.将值转为字符串 ToString（）PreferredType转换策略。...
C语言中 比较时数的变化 和 强制类型转换时数的变化
weixin_43692144的博客
04-19 648
比较时数的转换 若比较的数中有unsigned int，就转换为unsigned int来比较； 若比较的数中没有unsigned int，就转换为int来比较； 示例见下面链接： 无符号数与有符号数比较_qiuchangyong的博客-CSDN博客 强制类型转换 int 与 unsigned int之间转换时直接copy。 负数char 转int或unsigned int时，高位全补1；正数char和unsigned char转int或unsigned int时，高位全补0。 示例见下面链
javascript基本数据类型和转换
10-20
本文主要介绍了javascript的基本数据类型和转换，具有很好的参考价值，下面跟着小编一起来看下吧
数据类型转换
爱喝茶的公子
07-25 605
1、隐式转换：将数据类型中取值范围小的数据给取值范围大的类型赋值，可以直接赋值（小的给大的，能隐式直接转换） int a =10;//int， 4个字节 double b = a;//double，8个字节 System.out.println(b); //10.0 2、强制转换：将一个数据范围大的数值或者变量赋值给另一个数据范围小的变量。（大的给小的，不能直接给要强制转换） 格式：目标数据类型 变量名 = （目标数据类型）值或者变量 int a =10;//int， 4个字节 byte b
数据不同类型的隐式转换
最新发布
m0_62689947的博客
10-16 380
数据类型的隐式转换
SQL Server 中的数据类型隐式转换问题
12-16
写这篇文章的时候，还真不知道如何取名，也不知道这个该如何将其归类。这个是同事遇到的一个案例，案例比较复杂，这里抽丝剥茧，仅仅构造一个简单的案例来展现一下这个问题。我们先构造测试数据，如下所示： CREATE TABLE TEST ( ID INT, GOOD_TYPE VARCHAR(12), GOOD_WEIGHT NUMERIC(18,2) ) INSERT INTO dbo.TEST VALUES( 1, 'T1',1.27) SELECT GOOD_TYPE, CASE WHEN ( GOOD_TYPE = 'T1' ) THEN 99.1 + SUM(GOOD_WEIG
基本数据类型的四种情况下的隐式转换 你知道了嘛？
像雾像雨又像风的博客
05-26 4072
1、隐式转换 C在以下四种情况下会进行隐式转换: 1、算术运算式中，低类型能够转换为高类型。 2、赋值表达式中，右边表达式的值自动隐式转换为左边变量的类型，并赋值给他。 3、函数调用中参数传递时，系统隐式地将实参转换为形参的类型后，赋给形参。 4、函数有返回值时，系统将隐式地将返回表达式类型转换为返回值类型，赋值给调用函数。 2、算数运算的隐式转换 算数运算中，首先有如下类型转换规则： 1、字符必须先转换为整数(C语言规定字符类型数据和整型数据之间可以通用) 。 2、short型转换为int型(同属于整型)
【Js】JavaScript数据类型隐式转换
热门推荐
m0_57135756的博客
04-07 1万+
类型相同基本类型，直接比较值引用类型比较指针类型不同，尝试转成number类型，先调用valueOf()转成number不行就再用toString()方法转成stringnull、NaN、undefined单独一套规则。
[位操作]数据位提升的隐式转换
weixin_34294649的博客
08-15 152
有关数据位的提升的隐式转换从下面的这三道道笔试题开始： signed char a = 0xe0; unsigned int b = a; unsigned char c = a; signed char a = 0xe0; if(a == 0xe0) { printf("haha"); } else { printf("nono"); } u...
JS的undefined,null,NaN,false,0进行比较
yippeelyl的专栏
01-22 2030
特殊值进行比较 NaN,undefined,null,false与自身相比，只有NaN==NaN是false；不等是true。 然后两两相比，得出结论。> < >= <= == != === !==.注：连接运算+优先级高于比较运算符。 做实验用的模板：notepad++中查找替换 console.log("x> y 的结果是："+(x> y )); console.log("x< y 的结果是："+(x< y )); console.log("x
基本数据类型的隐式转换
pengyunxiao1234的博客
10-14 3908
基本数据类型（ int,          short,          long int,          long  long,    c har,    float,    double,     long double ） 基本数据类型最大的特点：基本数据类型之间可以进行隐式转换。 例如：void main () { char ch=‘a’; int a=0; a=ch;
整型与浮点类型数据比较隐式转换规则
lyu1026的博客
05-23 979
KingbaseES 数值类型有整型和浮点类型，如：integer , bigint 就是整型类型的，而numeric , real 则是浮点类型的数据。整型和浮点类型数据在进行比较时，需要有将其中一边数据类型进行转换，不恰当的类型转换会导致索引无法使用，影响SQL的执行性能。作为DBA，应当熟悉转换规则，主动采取转换，避免隐式转换。以下以例子的形式向大家展示KingbaseES 数据库 int...
js基础：比较运算符隐式转换
An哒哒
06-01 1308
隐式转换 运算符在运算的时候，如果两边的数据类型不一致，则会自动转成一致后运算。 a. 其他类型转string : + 连接符 b. 其他类型转number : 自增自减(++ --) 算术运算符( + - * / %) 关系运算符 : > >= < <= == != === !== c. 其他类型转boolean : ! 逻辑非 特殊情况 === ： 全等运算符。 不存在类型转换， 先比较类型，然后比较值 == : 比较运算符。 隐式转换规则是转成nu
C语言中数据类型的隐式转换
poinsettia的专栏
11-17 918
四种情况下的隐式转换 算术运算式中，低类型能够转换为高类型。 赋值表达式中，右边表达式的值自动隐式转换为左边变量的类型，并赋值给他。 函数调用中参数传递时，系统隐式地将实参转换为形参的类型后，赋给形参。 函数有返回值时，系统将隐式地将返回表达式类型转换为返回值类型，赋值给调用函数。 算术运算中的隐式转换 验证代码 #include <iostream> #include <typeinfo> using namespace std; int main() { cou
javascript中if隐式类型转换
05-27
在 JavaScript 中，if 语句会对条件进行隐式类型转换。当条件表达式的值不是布尔类型时，JavaScript 引擎会将其转换为布尔类型。 具体来说，当条件表达式的值为以下 falsy 值时，if 语句会将其转换为 false： - ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值