导航
导航
文章目录
  1. 一、typeof
  2. 二、Object.prototype.toString.call
  3. 三、instanceof/constructor
  4. 四、题外话

前端入坑笔记–JavaScript类型检测

JavaScript变量可以用来保存两种类型的值:基本类型值和引用类型值

  • 5种基本数据类型:String Number Boolean Undefined Null
  • 引用类型:Object Array Data RegExp Function Error Map …

ES6引入了一种新的原始数据类型Symbol,表示独一无二的值

一、typeof

typeof 用来判断各种数据类型,有两种写法:typeof xxx, typeof(xxx)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var a = 'hzzly';
var b = true;
var c = 22;
var d;
var e = null;
var o = new Object();
var f = function () {}
console.log( typeof a ); //string
console.log( typeof b ); //boolean
console.log( typeof c ); //number
console.log( typeof d ); //undefined
console.log( typeof e ); //object
console.log( typeof o ); //object
console.log( typeof f ); //function
console.log( typeof {} ); //object
console.log( typeof [] ); //object

这里面包含了js里面的五种数据类型 number string boolean undefined object和函数类型 function

看到这里你肯定会问了:我怎么去区分对象,数组和null呢?

接下来我们就用到另外两个利器:Object.prototype.toString.call instanceof/constructor

二、Object.prototype.toString.call

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var gettype=Object.prototype.toString
gettype.call('hzzly') 输出 [object String]
gettype.call(22) 输出 [object Number]
gettype.call(true) 输出 [object Boolean]
gettype.call(undefined) 输出 [object Undefined]
gettype.call(null) 输出 [object Null]
gettype.call({}) 输出 [object Object]
gettype.call([]) 输出 [object Array]
gettype.call(function(){}) 输出 [object Function]

三、instanceof/constructor

根据规定,所有引用类型的值都是Object的实例。因此,在检测一个引用类型值和Object 构造函数时,instanceof 操作符始终会返回true。当然,如果使用instanceof 操作符检测基本类型的值,则该操作符始终会返回false,因为基本类型不是对象。

1
2
3
4
5
6
7
8
9
console.log([] instanceof Array); //true
console.log(/^$/ instanceof RegExp); //true
console.log([] instanceof Object); //true
console.log([].constructor === Array); //true
console.log([].constructor === Object); //false 我们的constructor可以避免instanceof检测的时候,用Object也是true的问题
console.log({}.constructor === Object); //true
console.log(1 instanceof Number); //false

看到这里,刚才的问题我们解决了

检测数组,ECMAScript5新增了Array.isArray() 方法。这个方法的目的是最终确定某个值到底是不是数组,而不管它是在哪个全局执行环境中创建。这个方法的用法如下:

1
2
3
if( Array.isArray(value) ){
//对数组执行某些操作
}

四、题外话

基本类型值与引用类型值具有如下特点:

  • 基本类型值在内存中占据固定大小的空间,因此被保存在栈内存中
  • 从一个变量向另一个变量复制基本类型的值,会创建这个值得一个副本
  • 引用类型的值是对象,保存在堆内存中
  • 包含引用类型值得变量实际上包含的并不是对象本身,而是一个指向该对象的指针
  • 从一个变量向另一个变量复制引用类型的值,复制的其实是指针,因此两个变量最终都指向同一个对象

refuel

好了,遛了遛了。。。

支持一下
谢谢你请我吃糖果