Fork me on GitHub

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

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

数据类型

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

基本数据类型

Number类型

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

String类型

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

Boolean类型

值为 truefalse

引用类型

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 本身,由于历史问题,nulljavascript 中被认为是复杂数据类型(引用类型)。当使用 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

当用在简单类型数据上是,其始终返回 falsenullundefined 也总是返回 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 可以获取函数名称,所以可以通过查看目标数据类型的构造函数 constructorname 属性来判断数据类型。

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

undefinednullSymbol 除外,因为他们没有构造函数。

Object.prototype.toString.call()

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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种方式对于所有的数据类型都可以很好的区分,所以可以直接应用在实际项目中。

0%