【第二届青训营-寒假前端场】- js基本数据类型的判断

110 阅读2分钟

js的基本数据类型

js中的基本数据类型: UndefinedNullBooleanNumberStringSymbol

引用数据类型 :Object

1.判断: typeof

let bool = true
let num = 1
let str = 'abc'
let und = undefined
let nul = null
let sl = Symbol()
​
let obj = {
    name:'zhenglili'
}
let fun =  function zll() {
    
}
let arr = [1,2,3,4]
​
console.log(typeof bool) // boolean
console.log(typeof num) // number
console.log(typeof str) // string
console.log(typeof und) // undefined
console.log(typeof nul) // object    ***
console.log(typeof sl) //  symbol  
console.log(typeof obj) // object     ***
console.log(typeof fun)  // function
console.log(typeof arr)  // object    

typeof可以识别出基本类型boolean,number,undefined,string,symbol,但是不能识别null。不能识别引用数据类型,会把null、array、object统一归为object类型,但是可以识别出function。 所以typeof可以用来识别一些基本类型。

2、instanceof

console.log(bool instanceof Boolean);// false
console.log(num instanceof Number);// false
console.log(str instanceof String);// false
console.log(und instanceof Object);// false
console.log(nul instanceof Object);// false
console.log(arr instanceof Array);// true
console.log(obj instanceof Object);// true
console.log(fun instanceof Function);// true
console.log(fun instanceof Object) // true  Function也是指向Object   
console.log(s1 instanceof Symbol);// false

从结果中看出instanceof不能识别出基本的数据类型 number、boolean、string、undefined、unll、symbol。 但是可以检测出引用类型,如array、object、function,同时对于是使用new声明的类型,它还可以检测出多层继承关系。 其实也很好理解,js的继承都是采用原型链来继承的。比如objA instanceof A ,其实就是看objA的原型链上是否有A的原型,而A的原型上保留A的constructor属性。 所以instanceof一般用来检测对象类型,以及继承关系。

备注:

js : typeof 用于确定任意数据类型

console.log(null instanceof Object ) //false null表示为空的引用 instanceof 表示某个变量是否是某个对象的实例 null不是Object的实例

console.log(typeof(null) == 'object') // true object则是对象界里的“原始天尊”……万物始祖

3.constructor

console.log(bool.constructor === Boolean);// true
console.log(num.constructor === Number);// true
console.log(str.constructor === String);// true
console.log(arr.constructor === Array);// true
console.log(obj.constructor === Object);// true
console.log(fun.constructor === Function);// true
console.log(s1.constructor === Symbol);//true

null、undefined没有construstor方法,因此constructor不能判断undefined和null。 但是他是不安全的,因为contructor的指向是可以被改变。

4、Object.prototype.toString.call

console.log(Object.prototype.toString.call(bool));//[object Boolean]
console.log(Object.prototype.toString.call(num));//[object Number]
console.log(Object.prototype.toString.call(str));//[object String]
console.log(Object.prototype.toString.call(und));//[object Undefined]
console.log(Object.prototype.toString.call(nul));//[object Null]
console.log(Object.prototype.toString.call(arr));//[object Array]
console.log(Object.prototype.toString.call(obj));//[object Object]
console.log(Object.prototype.toString.call(fun));//[object Function]
console.log(Object.prototype.toString.call(s1)); //[object Symbol]

此方法可以相对较全的判断js的数据类型。 最佳选手!!!

应用小技巧:

至于在项目中使用哪个判断,就看使用场景,一般基本的类型可以选择typeof,引用类型可以使用instanceof。 毕竟比较好记好写

判断是否为数组

1.从原型入手,Array.prototype.isPrototypeOf(obj);

利用isPrototypeOf()方法,判定Array是不是在obj的原型链中,如果是,则返回true,否则false。

let arr = [1,2,3,4]
let obj = {name:'lili'}
console.log(Array.prototype.isPrototypeOf(arr)) // true
console.log(Array.prototype.isPrototypeOf(obj)) // false

2.也可以从构造函数入手,obj instanceof Array

console.log(arr instanceof Array)

3.js本身提供的方法 Array.isArray()方法。

console.log(Array.isArray(arr))

4、根据对象的class属性(类属性),跨原型链调用toString()方法。

解释一下,在js中一个对象一旦被创建,在内部会携带创建对象的类型名,一旦创建就不能被修改了。那么怎么获取这个对象的类型名呢?

console.log(Object.prototype.toString.call(arr)) // [object Array]

\