我是靠谱客的博主 精明绿茶,这篇文章主要介绍js之数据类型转换,现在分享给大家,希望可以做个参考。

JS中的数据类型分为以下两种类型。

基本数据类型:数字 number,字符串 string,布尔 boolean,空 null,未定义 undefined
引用数据类型:

    对象 object:普通对象,数组对象 (Array),正则对象 (RegExp),日期对象 (Date),数学函数 (Math
    函数 function
真实项目中,根据需求,我们往往需要把数据类型之间进行转换,比较来进行相关操作。

一:转化为Number类型

需要转换数据的情况:

    1,isNaN(argument):当检测的数据不是数字类型的时候,会使用Number()将其转化成数字,然后再进行NaN检测。

    2,parseInt/parseFloat/Number():手动的将数据转化成数字类型。前两个分别是对数据进行解析转换,前者是整数,后者是浮点数。他们解析的原则是从前往后进行解析,尽其所能。若存在有能识别的数字就解析,如果第一位就不是数字则返回NaN.Number则是对整体进行判断,是数字返回数字,否则NaN.

    3,运算符操作:"+ - * / "在"+"的运算中,不仅仅会有数学的加法运算,还可能包括字符串拼接。

复制代码
1
2
3
4
5
6
7
8
9
'2' - 1 =>2 // Number('2') -> 2 // 2-1=2 '3px' - 1 => NaN '3px' + 1 => '3px1' let i = '0'; i=i+1;=> '01' i+=1; => '01' i++; => 1 //i++是单纯的数学运算,摒弃了字符串拼接

    4,在做 == 比较的时候,有可能把其他值转化成number类型。文章末尾会讲。

转换规律:Number()浏览器,自行转换都是基于这个方法的。

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
基本类型: string: Number('') => 0, Number(' ') => 0, Number('n') => 0 换行符 Number('t') => 0制表符 Number('89') => 89 Number('89p') => NaN 布尔类型: Number(true) => 1 Number(false) => 0 null: Number(null) => 0 undefined: Number(undefined) => NaN 引用类型的数据,在进行转化的时候,会先调用toString(),然后再Number(); object: Number({}) => NaN //({}).toString() => '[object Object]' => NaN Number([]) => 0 //[].toString() => "" => 0 Number([1]) => 1 Number([1,2]) => NaN //[1,2].toString() => "1,2" => NaN

二:转化为字符串类型

需要转换的情况:

1,基于alert/confirm/prompt/document.write()等方法输出的时候,会把值默认转成字符串,然后在进行输出。

2,基于 "+"  进行字符串拼接的时候

3,把引用类型的数据转化成数字的时候,会首先转化成字符串,再转化成数字。

4,给队形设置属性名的时候,如果不是字符串,会首先转换乘字符串,然后在当做属性存到对象中(对象的属性,只能是数字或者字符串。在类数组中,属性就是数字,只有当属性名不是数字和字符串的时候,才会将该属性名转化成字符串再存到对象中)

5,手动调用toString/toFixed/join/String等方法的时候,也是转换成字符串

复制代码
1
2
3
4
5
let arr = [1,3] arr.toString() => "1,3" Math.PI.toFixed(4) => "3.1416" arr.join('-') => "1-3" String(arr) => "1,3"

转化规律:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
number类型: 1 => '1' 布尔类型: String(true) => 'true' String(false) => 'false' null: String(null) => 'null' undefined: String(undefined) => 'undefined' 数组: String([]) => '' String([1]) => '1' String([1,3]) => "1,3" 对象: {"age":18} => '[object Object]' {} => '[object Object]' //不管是啥样的普通对象,最后结果都一样

三:转换成布尔类型

需要转换的情况:

1,基于!/!!/Boolean()等方法转换

2,条件判断中的条件都会转换成布尔类型。

复制代码
1
2
3
4
if(n) {} //把n的值转换成布尔然后再验证真假 if('3px' + 3) {} //'3px3' => true => 执行

转换规律:只有  " 0/NaN/null/undefined/空字符串 "这五个字会转换成false,其余都是true

四:特殊情况

1,数学运算和字符串拼接符合  "+":当表达式中出现字符串,就是字符串拼接,否则就是数学运算。

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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'

2,在进行 "==" 进行数据比较的时候,如果左右两边的数据类型不一样,则先转换成相同的数据类型再进行比较。

(1)不同数据情况下的比较,都是把其他数据类型的值,转换成数字再进行比较。

复制代码
1
2
3
4
5
6
对象==数字:把对象转换为数字 对象==布尔:把对象转换为数字,把布尔也转换为数字 对象==字符串:把对象转换为数字,把字符串也转换为数字 字符串==数字:字符串转换为数字 字符串==布尔:都转换为数字 布尔==数字:把布尔转换为数字

(2)对象 ==  对象:不一定相等,因为对象操作的引用地址不一定相等。

复制代码
1
2
3
4
5
6
{name:'xxx'}=={name:'xxx'} =>false []==[] =>false var obj1={}; var obj2=obj1; obj1==obj2 =>true

(3)特殊记忆的地方。

复制代码
1
2
3
4
5
6
null==undefined:true null===undefined:false null&&undefined和其它值都不相等 NaN==NaN:false NaN和谁都不相等包括自己

例子:

复制代码
1
2
3
4
5
6
7
8
9
10
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

 

 

最后

以上就是精明绿茶最近收集整理的关于js之数据类型转换的全部内容,更多相关js之数据类型转换内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(86)

评论列表共有 0 条评论

立即
投稿
返回
顶部