巩固JS基础⚡️JS中的数据类型、类型判断、类型转换JS的数据类型 JS中的数据类型分为两类(共八种) 基本类型:Num

JS的数据类型

JS中的数据类型分为两类(共八种)

基本类型:Number,String,Boolean,Undefined,Null,BigInt,Symbol

引用类型:Object(Function Array RegExp等)

JS的类型判断

JS中经常使用的4种类型判断方式

1.typeof

typeof能准确判断基本类型(除Null外)并且返回字符串

console.log(typeof 123 ) 'number'
console.log(typeof 'zzz') 'string'
console.log(typeof 12n) 'bigint'
console.log(typeof true) 'boolean'
console.log(typeof null) 'object' 
console.log(typeof Symbol(123)) 'symbol'
console.log(typeof arr)) 'undefined'
console.log(typeof (()=>{})) 'function'

2、instanceof & isPrototypeOf()

instanceof运算符和isPrototypeOf方法本质上是通过原型是否存在于某个实例的原型链上来进行类型判断，所以只能判断引用类型

function Man(name, age) {
    this.age = age
    this.name = name
}
const man = new Man('siu', 18)
console.log(man instanceof Man) true
console.log([1,2,3] instanceof Array) true
console.log(/[a-z]/ instanceof RegExp) true
console.log({} instanceof Object) true
console.log(Man.prototype.isPrototypeOf(man)) true
console.log(Object.prototype.isPrototypeOf(man)) true
console.log(Array.prototype.isPrototypeOf([1,2,3])) true

3. constructor

在实例对象的原型中存在constructor指向构造函数,可以用于判断数据类型,不同于 instanceof, 能同时处理引用类型和基本类型,但null和undefined无法判断

function Man() { }
const man = new Man()
console.log(man.constructor === Man)
console.log((123).constructor === Number)
console.log(true.constructor === Boolean)
console.log('test'.constructor === String)

4.Object.prototype.toString.call()

Object.prototype.toString.call()方法返回一个内部属性的字符串,几乎是万能方法

console.log(Object.prototype.toString.call(123)) [object Number]
console.log(Object.prototype.toString.call('abc')) [object String]
console.log(Object.prototype.toString.call(() => { })) [object Function]
console.log(Object.prototype.toString.call(new Date())) [object Date]
console.log(Object.prototype.toString.call(null)) [object Null]
console.log(Object.prototype.toString.call(undefined)) [object Undefined]

封装一个万能方法

function myType(type){
   return Object.prototype.toString.call(type).slice(8,-1).toLowerCase()
}
console.log(myType(123)) 'number'

还有其他的判断数据类型 Array.isArray()，Number.isNaN()等

类型转换

JS中类型转换分为显示类型转换和隐式类型转换

1. 显示类型转换

通过JS提供的一些函数人为进行转换

Number类型: Number()、parseFloat()、parseInt()
String类型: String()、toString()
Boolean类型: Boolean()

⚠️ null undefined没有.toString方法

2.隐式类型转换

由编译器自动转换的方式称为隐式类型转换

隐式转换的各种情况

1.`if`中的条件会被自动转为`Boolean`类型

2. -减号,*,,%,isNaN(),-负号，+正号会隐式调用`ToNumber()`转化为数值类型

console.log(-"5")  -5
console.log(+"12") 12
console.log(5-"4") 1

3.逻辑运算符(`!,&&,||`)

!会转化为布尔值
&& 会将第一个值转为boolean类型若为true，返回第二个值，否则返回第一个值
|| 会将第一个值转为boolean类型若为false，返回第二个值，否则返回第一个值

1 && "test"  //test 
"test" && "" // ""
null && "key" // null
undefined && 0 // undefined


1 || "test"  //1
"test" || "" // "test"
null || "test" // "test"
undefined || 0 // 0

4。+法运算符

操作值中有字符串，调用内部的"ToString"抽象操作来将数值转换为字符串
其他情况都转化为数值类型

console.log(1+"") "1"
console.log(1 + undefined) NaN
console.log(1+ null) 1 
console.log("hello" + true) "hellotrue" 
console.log("hello" + undefined) "helloundefined"
console.log("hello" + null) "hellonull"

5.比较运算符(==,<,>)

任意两种类型比较时，如果不是同一个类型比较的话，则按如图方式进行相应类型转换

==
1.两个引用类型比较，是不是指向同一个引用地址
2.有NaN则返回false
3.null和undefined和彼此或自身比较，结果都为true，与其他值比较都为false

console.log(undefined) undefined 
console.log(undefined == null) true
console.log(null == null) true
console.log(null == false) false
console.log(null == 'null') false

>,<
1.除了字符串是比较对应的字符编码值,基本都是转换为数值进行比较
2.NaN不与任何值相等包括自己，他与任何值比较都返回false

console.log('z'.codeCodeAt()) 122
console.log('c'.charCodeAt()) 99
console.log('z' > 'c') true
console.log(111 > NaN) false

一个有意思的题

 [] = false //true 
 ![] = false //true

这两个的结果都是true,
第一个是对象 => 字符串 => 数值0,false转换为数字0,所以为true
第二个前边多了个!，则直接转换为布尔值再取反，转换为布尔值时("",NaN,0，null,undefined)这几个外返回的都是true, 所以![]这个[] => true 取反为false,所以[] == false为true。
结束了希望对你有所帮助

巩固JS基础⚡️JS中的数据类型、类型判断、类型转换