当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS中数据类型转换

JS中数据类型转换

2019年09月30日  | 移动技术网IT编程  | 我要评论

js中数据类型转换汇总

js中的数据类型分为
【基本数据类型】
数字 number
字符串 string
布尔 boolean
空 null
未定义 undefined
【引用数据类型】
对象 object
- 普通对象
- 数组对象 (array)
- 正则对象 (regexp)
- 日期对象 (date)
- 数学函数 (math)
...
函数 function

真实项目中，根据需求，我们往往需要把数据类型之间进行转换

把其它数据类型转换为number类型

1.发生的情况

  • isnan检测的时候：当检测的值不是数字类型,浏览器会自己调用number方法把它先转换为数字，然后再检测是否为非有效数字
isnan('3') =>false
  number('3')->3
  isnan(3)->false

isnan('3px') =>true
  number('3px')->nan
  isnan(nan)->true
  • 基于parseint/parsefloat/number去手动转换为数字类型
  • 数学运算：+ - * / %，但是“+”不仅仅是数学运算，还可能是字符串拼接
'3'-1 =>2
  number('3')->3
  3-1->2

'3px'-1 =>nan

'3px'+1 =>'3px1' 字符串拼接

var i='3';
i=i+1; =>'31'
i+=1; =>'31'
i++; =>4  i++就是单纯的数学运算，已经摒弃掉字符串拼接的规则
  • 在基于“==”比较的时候，有时候也会把其它值转换为数字类型
  • ...

2.转换规律

//=>转换的方法：number（浏览器自行转换都是基于这个方法完成的）

【把字符串转换为数字】
只要遇到一个非有效数字字符，结果就是nan
'' ->0
' ' ->0 空格(space)
'\n' ->0 换行符(enter)
'\t' ->0 制表符(tab)


【把布尔转换为数字】
true ->1
false ->0

【把没有转换为数字】
null ->0
undefined ->nan

【把引用类型值转换为数字】
首先都先转换为字符串（tostring），然后再转换为数字（number）

把其它类型值转换为字符串

1.发生的情况

  • 基于alert/confirm/prompt/document.write等方法输出内容的时候，会把输出的值转换为字符串，然后再输出
alert(1) =>'1'
  • 基于“+”进行字符串拼接的时候
  • 把引用类型值转换为数字的时候，首先会转换为字符串，然后再转换为数字
  • 给对象设置属性名，如果不是字符串，首先转换为字符串，然后再当做属性存储到对象中（对象的属性只能是数字或者字符串）
  • 手动调用tostring/tofixed/join/string等方法的时候，也是为了转换为字符串
var n=math.pi;//=>获取圆周率：
n.tofixed(2) =>'3.14'

var ary=[12,23,34];
ary.join('+') =>'12+23+34'
  • ...

2.转换规律

//=>调用的方法：tostring

【除了对象，都是你理解的转换结果】
1 ->'1'
nan ->'nan'
null ->'null'
[] ->''
[13] ->'13'
[12,23] ->'12,23'
...

【对象】
{name:'xxx'} ->'[object object]'
{} ->'[object object]'
不管是啥样的普通对象，最后结果都一样

把其它值转换为布尔类型

1.发生的情况

  • 基于!/!!/boolean等方法转换
  • 条件判断中的条件最后都会转换为布尔类型
  • ...
if(n){
  //=>把n的值转换为布尔验证条件真假
}

if('3px'+3){
  //=>先计算表达式的结果'3px3'，把结果转换为布尔true，条件成立
}

2.转换的规律
只有“0/nan/''/null/undefined”五个值转换为布尔的false,其余都是转换为true

特殊情况：数学运算和字符串拼接 “+”

//=>当表达式中出现字符串，就是字符串拼接，否则就是数学运算

1+true =>2 数学运算
'1'+true =>'1true' 字符串拼接

[12]+10 =>'1210' 虽然现在没看见字符串，但是引用类型转换为数字，首先会转换为字符串，所以变为了字符串拼接
({})+10 =>"[object object]10"
[]+10 =>"10"

{}+10 =>10 这个和以上说的没有半毛钱关系，因为它根本就不是数学运算，也不是字符串拼接，它是两部分代码
  {} 代表一个代码块（块级作用域）
  +10 才是我们的操作
  严格写法：{}; +10;

思考题：

12+true+false+null+undefined+[]+'佳佳'+null+undefined+[]+true
=>'nan佳佳nullundefinedtrue'

12+true ->13
13+false ->13
13+null ->13
13+undefined ->nan
nan+[] ->'nan'
'nan'+'佳佳' ->'nan佳佳'
...
'nan佳佳rueundefined'
'nan佳佳trueundefined'+[] ->'nan佳佳trueundefined'
...
=>'nan佳佳trueundefinedtrue'

特殊情况：“==”在进行比较的时候，如果左右两边的数据类型不一样，则先转换为相同的类型，再进行比较

对象==对象：不一定相等，因为对象操作的是引用地址，地址不相同则不相等

{name:'xxx'}=={name:'xxx'} =>false
[]==[] =>false

var obj1={};
var obj2=obj1;
obj1==obj2 =>true

==========================>上面是重点强调的

对象==数字：把对象转换为数字
对象==布尔：把对象转换为数字，把布尔也转换为数字
对象==字符串：把对象转换为数字，把字符串也转换为数字
字符串==数字：字符串转换为数字
字符串==布尔：都转换为数字
布尔==数字：把布尔转换为数字
===========================>不同情况的比较，都是把其它值转换为数字，然后再进行比较的

null==undefined：true
null===undefined：false
null&&undefined和其它值都不相等

nan==nan：false
nan和谁都不相等包括自己
===========================>以上需要特殊记忆

1==true =>true
1==false =>false
2==true =>false  规律不要混淆，这里是把true变为数字1   //未掌握


[]==true：false  都转换为数字 0==1
![]==true：false

[]==false：true  都转换为数字 0==0
![]==false：true  先算![]，把数组转换为布尔取反=>false  =>false==false

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网