javascript中数据类型的几种判断方式

发表于 更新于 分类于 阅读次数：

在开发中，我们经常需要对数据类型进行判断，再做不同的操作，这篇文章将讲解在 javascript 中对不同数据类型进行判断的方式。

数据类型

既然要判断 javascript 中的数据类型，那么首先你需要知道在 javascript 中有哪些数据类型。

基本数据类型

Number类型

数值类型，如：0, 1, -1, 2.3 , Infinity , -Infinity 等都是 Number类型。

String类型

字符串类型，如：'foo' , '123' 等都是 String 类型。

Boolean类型

值为 true 或 false。

引用类型

Array类型

数组类型，如：let arr = [1,2] 或 let arr = new Array(1,2)。

Object类型

对象类型，如：let obj = { name: 'foo' } 或 let obj = new Object({name: 'bar'})。

Function

函数申明，函数表达式的类型都为 function 。
例：

1
2
3
4
5
// 函数申明
function foo(){}

// 函数表达式
const bar = function(){}

其他

undefiend

变量已申明未赋值时的默认值都为 undefined，默认的函数返回值也是 undefined。
例：

1
2
3
4
5
6
7
let foo;  

console.log( foo )  // undefined

const bar = function(){}

console.log( bar() ) // undefined

null

空类型，只有单一的一个值，即 null 本身，由于历史问题，null 在 javascript 中被认为是复杂数据类型(引用类型)。当使用 typeof null，它返回的是 object。

es6

Symbol类型

es6 中新增的数据类型，其是作为全局函数而非构造函数 Symbol()，表示独一无二的唯一值，常被用来定义对象的属性名。

1
2
3
let obj = {
  [Symbol('foo')]: 'foo'
}

类型判断

typeof

typeof 运算符可以判断简单类型的数据类型，但对于复杂数据类型则无法准确判断。

1
2
3
4
5
6
7
8
9
10
11
12
typeof 1  // number
typeof ''  // string
typeof true  // boolean
typeof false // boolean
typeof undefined // undefined
typeof null // object
typeof new Array()   // object
typeof new Object()  // object
typeof new Date()    // object
typeof new RegExp()  // object
typeof function foo(){}  // function
typeof Symbol('bar')   // symbol

如上方代码所示，typeof 运算符只能用于判断 Number , String , Boolean , undefined Function , 和 Symbol 类型。其他类型都统一返回 object。

instanceof

instanceof 运算符用于判断对象是否为某个构造函数的实例。返回值为 Boolean 类型。她只可用来判断对象类型数据。

1
2
3
4
5
6
7
8
let arr = [1]

arr instanceof Array   // true
arr instanceof Object  // true

let obj = {name: 'foo'}

obj instanceof Object  // true

当用在简单类型数据上是，其始终返回 false。null 和 undefined 也总是返回 false。

1
2
3
4
5
6
7
8
9
let num = 12,
    str = '',
    bol = true;

num instanceof Number  // false
str instanceof String  // false
bol instanceof Boolean // false
undefined instanceof Object  // false
null instanceof Object   // false

Function.prototype.name

利用 Function 的实例属性 name 可以获取函数名称，所以可以通过查看目标数据类型的构造函数 constructor 的 name 属性来判断数据类型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let num = 1,
    str = '',
    bol = true,
    arr = [1],
    obj = {foo: 'bar'},
    date = new Date(),
    reg = new RegExp();

num.constructor.name // Number
str.constructor.name // String
bol.constructor.name // Boolean
arr.constructor.name // Array
obj.constructor.name // Object
date.constructor.name // Date
reg.constructor.name  // RegExp

undefined 、 null 和 Symbol 除外，因为他们没有构造函数。

Object.prototype.toString.call()

借助 Object 的实例方法 toString 也可以判断数据的类型，该方法会返回类似于 [object xxx] 的字符串格式，xxx 表示该数据类型的构造函数名。但对于 undefined 、null 和 Symbol，不可把 xxx 理解为构造函数，因为他们真的没有。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let num = 1,
    str = '',
    bol = true,
    arr = [1],
    obj = {foo: 'bar'},
    date = new Date(),
    reg = new RegExp(),
    foo = null,
    bar = undefined,
    sym = Symbol('sym'),
    fun = function(){};

Object.prototype.toString.call(num)  // [object Number]
Object.prototype.toString.call(str)  // [object String]
Object.prototype.toString.call(bol)  // [object Boolean]
Object.prototype.toString.call(arr)  // [object Array]
Object.prototype.toString.call(obj)  // [object Object]
Object.prototype.toString.call(date)  // [object Date]
Object.prototype.toString.call(reg)  // [object RegExp]
Object.prototype.toString.call(foo)  // [object Null]
Object.prototype.toString.call(bar)  // [object Undefined]
Object.prototype.toString.call(sym)  // [object Symbol]
Object.prototype.toString.call(fun)  // [object Function]

如上方代码，各种类型都可以很好的区分，为了使用方便，我们可以将其封装为一个简单的函数调用。

1
2
3
4
5
6
function getType(_val){
  let s = Object.prototype.toString.call(_val)
  return s.slice( s.indexOf(' ') + 1 , s.length - 1 )
}

getType(1)  // Number

综上

前3中方式都有不同的缺陷，使用存在问题，而第4种方式对于所有的数据类型都可以很好的区分，所以可以直接应用在实际项目中。