js之数据类型转换

78 阅读 0 评论 52 点赞

我是靠谱客的博主精明绿茶，最近开发中收集的这篇文章主要介绍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，运算符操作："+ - * / "在"+"的运算中，不仅仅会有数学的加法运算，还可能包括字符串拼接。

'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()浏览器，自行转换都是基于这个方法的。

基本类型：
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等方法的时候，也是转换成字符串

let arr = [1,3]
arr.toString() => "1,3"
Math.PI.toFixed(4) => "3.1416"
arr.join('-') => "1-3"
String(arr) => "1,3"

转化规律：

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，条件判断中的条件都会转换成布尔类型。

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

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

四：特殊情况

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

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）不同数据情况下的比较，都是把其他数据类型的值，转换成数字再进行比较。

对象==数字：把对象转换为数字
对象==布尔：把对象转换为数字，把布尔也转换为数字
对象==字符串：把对象转换为数字，把字符串也转换为数字
字符串==数字：字符串转换为数字
字符串==布尔：都转换为数字
布尔==数字：把布尔转换为数字

（2）对象 == 对象：不一定相等，因为对象操作的引用地址不一定相等。

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

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

（3）特殊记忆的地方。

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