JavaScript原生系列-数据类型、数据类型判断、数据类型转换

转载请注明预见才能遇见的博客：http://my.youkuaiyun.com/

原文地址：https://blog.youkuaiyun.com/pcaxb/article/details/101020581

JavaScript原生系列-数据类型、数据类型判断、数据类型转换

目录

JavaScript原生系列-数据类型、数据类型判断、数据类型转换

1.数据类型

2.判断数据类型

1.typeof 判断基本数据类型

2.instanceof判断一个变量是对象还是数组

3.constructor判断一个变量是对象还是数组

4.Object.prototype.toString.call()判断一个变量是对象还是数组

3.数据类型转换-显式转换

1.parseInt()

2.parseFloat() 

3.Number()

4.Boolean()

5.String()

4.数据类型转换-隐式转换

---

1.数据类型

基本数据类型：Number，String，Boolean，Null，Undefined

复杂数据类型：Object

es6新增：Symbol

// 打印封装
function L() {
    console.log.apply(this,arguments);
}

 

2.判断数据类型

 判断简单数据类型可以用typeof；判断一个变量是对象还是数组使用 instanceof，constructor和Object.prototype.toString.call()，最好使用Object.prototype.toString.call()，更加精准

1.typeof 判断基本数据类型

typeof返回的是字符串

string：字符串类型

number：数字类型，包括整形，浮点型，NaN

function：function

object：数组，对象，null

boolean：true，false

undefined：undefined

symbol:symbol

let a1= "12";
let b1 = 12;
let c1 = false;
let d1 = null;
let e1 = undefined;
let f1 = [];
let g1 = {};
let h1 = Symbol();
console.log(typeof(a1));//string --
console.log(typeof(b1));//number --
console.log(typeof(c1));//boolean--
console.log(typeof(d1));//object --null
console.log(typeof(e1));//undefined--
console.log(typeof(f1));//object --[]
console.log(typeof(g1));//object --{}
console.log(typeof(h1));//symbol --
 
//函数、NAN
console.log(typeof(function(){}));//function
console.log(typeof(NaN));//number

缺点：typeof不能区分数组，对象，null，返回的都是object

2.instanceof判断一个变量是对象还是数组

使用instanceof Object要注意null，null是对象，但是返回false。

//判断一个变量是不是对象
var arr = [1,2]
var obj = {name:"cc"}
var a = 111;
var nl = null;
L(arr instanceof Object);//true
L(obj instanceof Object);//true
L(a instanceof Object);//false
L(nl instanceof Object);//false 判断错误

//判断一个变量是不是数组
L(arr instanceof Array)//true
L(obj instanceof Array)//false
L(a instanceof Array);//false
L(nl instanceof Array);//false

instanceof原理：JS原型链与instanceof底层原理

 

3.constructor判断一个变量是对象还是数组

不能判断null，空没有constructor,不能简单的constructor用判断是不是对象。

//判断一个变量是不是对象
var arr = [1,2]
var obj = {name:"cc"}
var a = 111;
var nl = null;
L(arr.constructor === Object);//false 判断错误，需要一层一层找才能判断
L(obj.constructor === Object);//true
L(a.constructor === Object);//false
// L(nl.constructor === Object);//语法错误

//判断一个变量是不是数组
L(arr.constructor ===  Array)//true
L(obj.constructor ===  Array)//false
L(a.constructor ===  Array);//false
// L(nl.constructor ===  Array);//语法错误

 

4.Object.prototype.toString.call()判断一个变量是对象还是数组

Object.prototype.toString.call()方法可以精准判断变量类型，它返回[object constructorName]的字符串格式，这里的constructorName就是call参数的函数名

var arr = [1,2]
var obj = {name:"cc"}
var a = 111;
var nl = null;
L(Object.prototype.toString.call(arr));//[object Array]
L(Object.prototype.toString.call(obj));//[object Object]
L(Object.prototype.toString.call(a));//[object Number]
L(Object.prototype.toString.call(nl));//[object Null]


//判断一个变量是不是数组
L(Object.prototype.toString.call(arr) === "[object Array]");//true
L(Object.prototype.toString.call(obj) === "[object Array]");//false
L(Object.prototype.toString.call(a) === "[object Array]");//false
L(Object.prototype.toString.call(nl) === "[object Array]");//false

 

3.数据类型转换-显式转换

利用js提供的函数parseInt() , parseFloat() , Number() , Boolean() , String()进行数据转换

1.parseInt()

1.1) 忽略字符串前面的空格，直至找到第一个非空字符,还会将数字后面的非数字的字符串去掉。

1.2) 如果第一个字符不是数字符号或者符号，返回NaN

1.3) 会将小数取整。（向下取整）

L(parseInt("2312"));    //2312
L(parseInt("12.365"));  //12
L(parseInt("yuci"));    //NaN
L(parseInt("10"));		//返回 10
L(parseInt("19",10));	//返回 19 (10+9)
L(parseInt("11",2));	//返回 3 (2+1)
L(parseInt("17",8));	//返回 15 (8+7)
L(parseInt("1f",16));	//返回 31 (16+15)
L(parseInt("010"));		//未定：返回 10

L(parseInt("+123"));    //123
L(parseInt([1,2,4]));   //1
L(parseInt(""));        //NaN

 

2.parseFloat() 

 parseFloat()与parseInt()一样，唯一区别是parseFloat()可以保留小数

3.Number()

3.1) 如果转换的内容本身就是一个数值类型的字符串，那么将来在转换的时候会返回自己。

3.2) 如果要转换的内容是空的字符串，那以转换的结果是0.

3.3) 如果是其它的字符，那么将来在转换的时候结果是NaN.

L(Number("123"));         //123
L(Number("hello world")); //NaN
L(Number(""));            //0   
L(Number([]));            //0
L(Number([1]));           //1
L(Number([1,2]));         //NaN
L(Number(null));          //0
L(Number(new Object()));  //NaN

4.Boolean()

 除了"",0,false,null,undefined,NaN返回false，其他全部返回true(包括空对象，空数组)

L(Boolean(123));//true       
L(Boolean(false));//false        
L(Boolean(""));//false        
L(Boolean(0));//false         
L(Boolean(null));//false           
L(Boolean(undefined));//false           
L(Boolean(NaN));//false    
L(Boolean({}));//true     
L(Boolean([]));//true  

 

5.String()

toString()的方法来进行转换（包装类）toString()的参数是转换的进制格式(几进制)。undefined，null不能用toString()

var number = 10;
L(number.toString());     //"10"
L(number.toString(2));    //"1010"
L(number.toString(8));    //"12"
L(number.toString(10));   //"10"
L(number.toString(16));   //"a"

L(String(null));          //"null"
var str = null;
// L(str.toString());        //Cannot read property 'toString' of null
var number1;
L(String(number1));       //undefined
// L(undefined.toString());  //Cannot read property 'toString' of undefined
L(String(undefined))//undefined

 

4.数据类型转换-隐式转换

+ - * / %进行隐式转换，还有比较运算符（> < ==）；js中的隐式转换是字符串和数字之间的转换 ；+ 会把数字转换成字符串；* / % > < == 把字符串转化成数字

var num = "123";
var num2 = 126;
L(+num);      //123
L(num+num2);  //"123126"
L(num2-num);  //126-123=3
L(num2*num);  //15498
L(num2/num);  //1.024390243902439
L(num2%num);  //3
L(num2>num);  //true
var number = 1;
L(!!number);  //true

 

JavaScript原生系列-数据类型、数据类型判断、数据类型转换

博客地址：https://blog.youkuaiyun.com/pcaxb/article/details/101020581