Fork me on GitHub

判断数据类型的方法

1. Object.prototype.toString.call()

每一个继承 Object 的对象都有 toString 方法,如果 toString 方法没有重写的话,会返回 [Object type],其中 type 为对象的类型。但当除了 Object 类型的对象外,其他类型直接使用 toString 方法时,会直接返回都是内容的字符串,所以我们需要使用call或者apply方法来改变toString方法的执行上下文。

1
2
3
const an = ['Hello','An'];
an.toString(); // "Hello,An"
Object.prototype.toString.call(an); // "[object Array]"

这种方法对于所有基本的数据类型都能进行判断,即使是 null 和 undefined 。

1
2
3
4
5
6
7
Object.prototype.toString.call('An') // "[object String]"
Object.prototype.toString.call(1) // "[object Number]"
Object.prototype.toString.call(Symbol(1)) // "[object Symbol]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(function(){}) // "[object Function]"
Object.prototype.toString.call({name: 'An'}) // "[object Object]"

更多实现可见 谈谈 Object.prototype.toString

2.typeof

typeof是一个运算符,有2种使用方式:typeof(表达式)和typeof 变量名,第一种是对表达式做运算,第二种是对变量做运算。

typeof运算符的返回类型为字符串,值包括如下几种:

  • ‘undefined’ –未定义的变量或值
  • ‘boolean’ –布尔类型的变量或值
  • ‘string’ –字符串类型的变量或值
  • ‘number’ –数字类型的变量或值
  • ‘object’ –对象类型的变量或值,或者null(这个是js历史遗留问题,将null作为object类型处理)
  • ‘function’ –函数类型的变量或值
1
2
3
4
5
6
7
console.log(typeof a);    //'undefined'    
console.log(typeof(true));  //'boolean'   
console.log(typeof '123');  //'string'   
console.log(typeof 123);   //'number'    
console.log(typeof NaN);   //'number'   
console.log(typeof null);  //'object'        var obj = new String();    console.log(typeof(obj));    //'object'    var  fn = function(){};    console.log(typeof(fn));  //'function'    
console.log(typeof(class c{}));  //'function'

总结:typeof运算符用于判断对象的类型,但是对于一些创建的对象,它们都会返回’object’,有时我们需要判断该实例是否为某个对象的实例,那么这个时候需要用到instanceof运算符,后续记录instanceof运算符的相关用法。

3. instanceof

instanceof 的内部机制是通过判断对象的原型链中是不是能找到类型的 prototype

instanceof 运算符只能用作对象的判断。

使用 instanceof判断一个对象是否为数组,instanceof 会判断这个对象的原型链上是否会找到对应的 Array 的原型,找到返回 true,否则返回 false

instanceof 只能用来判断对象类型,原始类型不可以。并且所有对象类型 instanceof Object 都是 true。

1
2
3
[] instanceof Array // true
aa = {a:1}
aa instanceof Object // true

4.Array.isArray()

  • 功能:用来判断对象是否为数组
  • instanceof 与 isArray
    当检测Array实例时,Array.isArray 优于 instanceof ,因为 Array.isArray 可以检测出 iframes

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var iframe = document.createElement('iframe');
    document.body.appendChild(iframe);
    xArray = window.frames[window.frames.length-1].Array;
    var arr = new xArray(1,2,3); // [1,2,3]

    // Correctly checking for Array
    Array.isArray(arr); // true
    Object.prototype.toString.call(arr); // true
    // Considered harmful, because doesn't work though iframes
    arr instanceof Array; // false
  • Array.isArray() 与 Object.prototype.toString.call()
    Array.isArray()是ES5新增的方法,当不存在 Array.isArray(),可以用 Object.prototype.toString.call() 实现。

    1
    2
    3
    4
    5
    if (!Array.isArray) {
    Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
    };
    }
坚持原创技术分享,您的支持将鼓励我继续创作!