- 2021-01-06
我自己不太常用判断JS数据类型,所以也不太熟悉,正好就放在一起讲一下吧。 - 2021-01-07
越整理东西越多,写的也有点乱了。另外这个标题我改来改去的也不知道怎么概括,大家将就看看吧,重要的是内容!我查了好多资料整理出来的~ 看完这个,哪怕是像我一样的小白也一定能理解的。
一、typeof
1. typeof的返回值
- 简单数据类型(基本数据类型):Undefined、Null、Boolean、Number、String和Symbol。
- 复杂数据类型(引用类型):Object(本质上是由一组无序的名值对组成的,包括对象,Function,Array)。
返回值 | 代表意义 |
---|---|
Undefined | 未定义 |
Boolean | 布尔 |
String | 字符串 |
Number | 数值 |
Object | 对象或null |
Function | 函数 |
Symbol(ES6新增) | symbol类型 |
Implementation-dependent | 宿主对象(由JS环境提供) |
- ES6 引入了一种新的原始数据类型 Symbol ,表示独一无二的值,最大的用法是用来定义对象的唯一属性名。
- 宿主对象:JS所运行的环境提供的对象比如:BOM中的Window、DOM中的document。
2. typeof为什么要区分object和function?
- 《JavaScript高级程序设计》:从技术角度讲,函数在ECMAScript中是对象,不是一种数据类型。然而,函数也确实有一些特殊的属性,因此通过typeof操作符来区分函数和其他对象是有必要的。
- 在实际的使用过程中,有必要区分object和Function,所以typeof实现了这一功能。
3. typeof的语法
typeof是一个操作符而不是函数,所以用不用括号都可以。
- typeof (表达式):对表达式做运算
- typeof 变量名:对变量做运算。
console.log(typeof 15); //'number'
console.log(typeof 'str'); //'string'
4. typeof的特殊返回值
//返回值:NaN(typeof返回值宗为字符串类型,但是NaN是个例外,他是数值类型)
console.log(typeof 1/0);
//返回值:'number'
console.log(typeof (1/0));
console.log(typeof NaN);
console.log(typeof Infinity);
//返回值:'string'
console.log(typeof typeof (1/0));
//返回值:'symbol'
console.log(typeof Symbol());
console.log(typeof Symbol('foo'));
//返回值:'undefined'
console.log(typeof undefined);
//返回值:'object'
console.log(typeof [1,2,3]);
console.log(typeof new String());
//返回值:'function'
console.log(typeof function(){});
console.log(typeof Math.sin);
console.log(typeof (class c{}));
5. typeof的迷惑行为和不足之处(当心踩坑)
- typeof null会返回‘object’。
- typeof 数组 会返回‘object’。
因为特殊值null会被认为是一个空对象引用。 - typeof 正则表达式
在Safari 5以及之前版本,Chrome 7以及之前版本会返回‘function’,其他浏览器会返回‘object’。 - typeof 宿主对象
在IE6、7、8中,大多数的宿主对象返回‘object’而不是‘function’,如typeof alert返回‘object’。而在非IE浏览器或IE9以上(包含IE9)的浏览器中,返回‘function’。 - typeof 对象,
对于一些创建的对象(数组、null、部分浏览器中的正则和宿主对象),他们都会返回’object’。
二、instanceof
1. 为什么有了 typeof 运算符我们还需要 instanceof ?
- typeof是判断参数是什么的实例,返回值为说明运算数类型的字符串。如果参数为引用类型,那么typeof会始终返回 ’ object ',所以用typeof来判断参数类型有很大的局限性。
- 有时,我们需要判断某变量是否为某个对象的实例,那么我们会用到instanceof运算符。
2. instanceof 的定义和用法
instanceof是用来判断一个对象在其原型链中是否存在一个构造函数的prototype属性。
- a instanceof b:判断a是否为b的实例,也可用于继承关系中。
- 如果b是c的父对象,a是c的实例,那么 a instanceof b 与 a instanceof c 的结果都为true。
function Person(){} //创建一个构造函数
const p1 = new Person();
console.log(p1 instanceof Person); //true
3. instanceof 的判断原理
如果只看定义,大家可能像我一样不太理解原型链和prototype属性这些,
说白了,instanceof 就是可以用来判断一个变量是否是属于某个对象的实例,instanceof检测的是这个变量的原型属于谁。
- instanceof的判断规则是沿着 Func 的 prototype 属性向上找,如果能找到同一个引用,就返回true,否则返回false。
- 每个函数都有 prototype 属性(存储的是原型对象),每个原型对象都有 proto (隐式原型)指向它构造函数的原型对象(prototype)。对象没有 prototype 属性。
- func._ proto_ 指向 Func.prototype
- Func._ proto_ 指向 Object.prototype
- 最终指向Object,也是验证了万物皆对象的思想。因此,func instanceof Func 和 func instanceof Object 的返回结果都是 true,func instanceof Function 的返回结果是 false。
4. instanceof的局限性
(1)instanceof无法直接判断原始数据类型
var str1 = 'hello word';
var str2 = new String('hello world');
console.log(str1 instanceof String); //false
console.log(str2 instanceof String); //true
我们可以这样来解决:
class PrimitiveString{
static [Symbol.hasInstance](x){
return typeof x === 'string'
}
}
console.log('hello world' instanceof PrimitiveString); //true
Symbol.hasInstance 可以理解为一个自定义 instanceof 行为的方法,上面代码的功能等于typeof (‘hello world’ === ‘string’)。
(2)instanceof 对于特殊类型无法判断
console.log(new Date() instanceof Date); //true
console.log(new Date() instanceof Object); //true
console.log([] instanceof Array); //true
console.log([] instanceof Object); //true
instanceof只能用来判断两个对象是否属于实例关系,而不能判断一个是里究竟属于哪种类型。
三、如何判断特殊类型
1. 数组判断方法
既然 typeof 和 instanceof 都不能判断数组类型,那么我们就没办法判断数组了吗?
当然不是,我们还可以用Array.isArray来区分数组和普通对象:
//Array.isArray
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray({obj: 123})); //false
2. null判断方法
最简单也是最直接的方法,就是直接与null比较:
console.log( value === null );
四、Object.prototype.toString
除了上面的方法,Object.prototype.toString 也是一个很方便可以判断数据类型的方法。
(内容有点多,我纠结了半天要不要单独写,最后还是决定在这里简单说一下~)
Object.prototype.toString的用法非常简单,我举几个例子大家就明白它的用法了。
1. 判断基本类型
console.log(Object.prototype.toString.call(1)); //'[object Number]'
console.log(Object.prototype.toString.call(true)); //'[object Boolean]'
console.log(Object.prototype.toString.call(null)); //'[object Null]'
console.log(Object.prototype.toString.call(undefined)); //'[object Undefined]'
console.log(Object.prototype.toString.call('a')); //'[object String]'
2. 判断引用类型
console.log( Object.prototype.toString.call({}) ); //”[object Object]”
console.log( Object.prototype.toString.call([]) ); //”[object Array]”
function fn(){}
console.log( Object.prototype.toString.call(fn) ); //”[object Function]”