JavaScript判断数据类型的几种方式

一、数据类型

JavaScript 中数据类型分为两类：

1. 基本数据类型

undefined、null、string、number、boolean、Symbol

2. 引用数据类型

Object ( Array、Function 等 )

二、判断数据类型的几种方法

2.1 typeof

typeof 是最常见的判断数据类型的方式

可以判断：number、string、boolean、undefined、Symbol、object、function
不能判断: null、Array

typeof(undefined) // undefined
typeof(null)      // object
typeof(1)         // number
typeof(NaN)       // number
typeof('1')       // string
typeof(true)      // boolean
typeof(Symbol(1)) // symbol
typeof({})        // object
typeof([])        // object
typeof(function name(params) {}) // function

注意:

1. typeof 的返回值的是 字符串 格式
2. typeof(NaN) 返回的是 number, 因为 NaN 就是一个特殊的数字

2.2 ===

可以判断：undefined、null
不能判断：number、string、boolean、symbol、object、array、function

let a
console.log(a)  // undefined
let b = null
 
console.log(a === undefined) // true
console.log(b === null) // true

2.3 instanceof

instanceof 判断对象的原型链 proto 上是否存在构造函数的 prototype。只能判断引用数据类型。

可以判断：Array、Object、Function
不能判断: 基本数据类型

let obj = {}
obj instanceof Object    // true
 
let arr = []
arr instanceof Array     // true
 
let fn = function() {}
fn instanceof Function   // true
 
// 注意：只要构造函数的 prototype 在对象的原型链上就会返回 true
//      所以一个数组判断为 Object 也是返回 true
 
console.log([] instanceof Array);   // true
console.log([] instanceof Object);  // true

2.4 constructor

可以判断：number、string、boolean、symbol、object、array、function
不能判断：null 和 undefined

(1).constructor === Number       // true
'1'.constructor === String       // true
true.constructor === Boolean     // true
Symbol(1).constructor === Symbol // true
{}.constructor === Object        // true
[].constructor === Array         // true
let fn = function() {}
fn.constructor === Function      // true

注意：constructor 是不安全的，因为 constructor 的指向是可以被改变的

2.5 Object.prototype.toString.call()

在任何值上都可以调用 Object 原生的 toString() 方法，会返回一个 [Object NativeConstructorName] 格式的字符串。
每个类在内部都有一个 [[class]] 属性，这个属性中就指定了上述字符串中的构造函数名

可以判断：全部数据类型
不能判断：非原生构造函数的构造函数名

Object.prototype.toString.call(undefined) // [object Undefined]
Object.prototype.toString.call(null)      // [object Null]
Object.prototype.toString.call(1)         // [object Number]
Object.prototype.toString.call('1')       // [object String]
Object.prototype.toString.call(true)      // [object Boolean]
Object.prototype.toString.call(Symbol(1)) // [object Symbol]
Object.prototype.toString.call({})        // [object Object]
Object.prototype.toString.call([])        // [object Array]
let fn = function() {}
Object.prototype.toString.call(fn)        // [object Function]
 
// 按照这种写法，截取其中为 数据类型 的字符就行了 ( 从第八个字符一直到倒数第二个字符 )
Object.prototype.toString.call(fn).slice(8, -1) // Function

// 将其封装为一个函数
function getType(data) {
    let type = typeof data
    if (type !== 'object') {
        return type
    }
 
    return Object.prototype.toString.call(data).slice(8, -1)
}

2.6 Array.isArray()

ES5 新增的 Array.isArray() 可以判断一个数据是否是一个 Array

可以判断：array
不能判断：除 array 的全部

Array.isArray(undefined) // false
Array.isArray(null)     // false
Array.isArray(1)        // false
Array.isArray('1')      // false
Array.isArray(true)     // false
Array.isArray(Symbol(1)) // false
Array.isArray({})       // false
Array.isArray([])       // true
let fn = function() {}
Array.isArray(fn)       // false