Javascript判断数据类型的五种方式及其特殊性

Javascript判断数据类型的五种方式及区别

@

目录

• typeof
• instanceof
• Object.prototype.toString
• isArray
• iisNaN

-------------人工分割线-------------

typeof

MDN：typeof操作符返回一个字符串，表示未经计算的操作数的类型。

    let data = {
        number : 1,
        string : 'b',
        boolean : true,
        symbol : Symbol(),
        null : null,
        undefined : undefined,
        nan : NaN,
        function : function (){},
        object : {},
        array: [],
    };

    for(let key in data) {
        console.log(key + ':::', typeof data[key]);
    }
    // -----------  打印结果  ------------------
    number::: number
    string::: string
    boolean::: boolean
    symbol::: symbol
    null::: object          // 需要注意
    undefined::: undefined
    nan::: number           // 需要注意
    function::: function
    object::: object
    array::: object         // 需要注意

null、array：打印结果都是object

NaN：打印结果是number

关于null打印成object的原因：属于JS遗留bug，在一开是的JS版本种使用32位系统，为了提高性能使用低位存储变量的类型信息，所以将000 开头代表是对象，但是 null 表示为全零，所在在判断null时也会将它错误的判断为 object 。

instanceof

MDN：instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上

 	function Animal(name) {
        this.name = name;
    }

    let cat = new Animal('cat');
    let dog = new Animal('dog');
    console.log(cat instanceof Animal);
    console.log(cat instanceof dog); // 报错：Right-hand side of 'instanceof' is not callable

instanceof的右边要求是一个构造函数，否则报错。

如何理解：instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上？？：

::: 如：cat instanceof Animal：Animal.prototype是否在cat的原型链上【Animal--Object】,显然是在的，所以返回true。

思考：

    function Animal(name) {
        this.name = name;
    }
    let cat = new Animal('cat'); //
	// 此时将Animal.prototype指向空对象
	let A = {};
    Animal.prototype = A;
    let cat2 = new Animal('cat2');
    console.log(cat instanceof Animal);
    console.log(cat2 instanceof Animal);

此时应该打印什么？

先分析cat的原型链：【Animal -- Object】

cat2的原型链：【A --- Object】

此时Animal.prototype指向A对象，所以A在cat2的原型链上，而不在cat上。

所以打印结果：
false
true

总结：先找到Animal.prototype,在列出cat的原型链，如果在就true否则false。

特殊点：

1：instanceof 和多全局对象(例如：多个 frame 或多个 window 之间的交互)

不同的全局环境拥有不同的全局对象，从而拥有不同的内置类型构造函数。这可能会引发一些问题。比如，表达式 [] instanceof window.frames[0].Array 会返回 false，因为 Array.prototype !== window.frames[0].Array.prototype，并且数组从前者继承。

2： String 对象和 Date 对象都属于 Object 类型和一些特殊情况

    let simpleStr = 'simpleStr';
    let myObj = {};
    let myNullObj = Object.create(null);
    console.log(simpleStr instanceof String); //false [检查原型链会找到 undefined]
    console.log(myObj instanceof Object);     //true
    console.log(myNullObj instanceof Object); //false [一种创建非 Object 实例的对象的方法]

Object.prototype.toString

MDN:方法返回一个表示该对象的字符串。

// 数据源看开头的代码
 for(let key in data) {
        console.log(key + ':::', Object.prototype.toString.call(data[key]));
    }
    /*
        number::: [object Number]
        string::: [object String]
        boolean::: [object Boolean]
        symbol::: [object Symbol]
        null::: [object Null]
        undefined::: [object Undefined]
        nan::: [object Number]  // 需要注意
        function::: [object Function]
        object::: [object Object]
        array::: [object Array]
    * */

• 为了每个对象都能通过 Object.prototype.toString() 来检测，需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用，传递要检查的对象作为第一个参数，称为 thisArg。

• Object.prototype.toString 的原理是当调用的时候, 就取值内部的 [[Class]] 属性值, 然后拼接成 '[object ' + [[Class]] + ']' 这样的字符串并返回. 然后我们使用 call 方法来获取任何值的数据类型.

isArray

MDN：如果对象是 Array ，则返回true，否则为false。

这个比较简单不写例子了。

特殊性：当检测Array实例时, Array.isArray 优于 instanceof,因为Array.isArray能检测iframes.

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
// Considered harmful, because doesn't work though iframes
arr instanceof Array; // fals

iisNaN

MDN:用来确定一个值是否为NaN 。注：isNaN函数内包含一些非常有趣的规则；你也可以使用 ECMAScript 2015 中定义的 Number.isNaN() 来判断。与 JavaScript 中其他的值不同，NaN不能通过相等操作符（== 和 ===）来判断 ，因为 NaN == NaN 和 NaN === NaN 都会返回 false。 因此，isNaN 就很有必要了。

isNaN(NaN);       // true
isNaN(undefined); // true
isNaN({});        // true

isNaN(true);      // false
isNaN(null);      // false
isNaN(37);        // false

// strings
isNaN("37");      // false: 可以被转换成数值37
isNaN("37.37");   // false: 可以被转换成数值37.37
isNaN("37,5");    // true
isNaN('123ABC');  // true:  parseInt("123ABC")的结果是 123, 但是Number("123ABC")结果是 NaN
isNaN("");        // false: 空字符串被转换成0
isNaN(" ");       // false: 包含空格的字符串被转换成0

// dates
isNaN(new Date());                // false
isNaN(new Date().toString());     // true

isNaN("blabla")   // true: "blabla"不能转换成数值
                  // 转换成数值失败， 返回NaN

一个有用的特性：

有许多方式来看待isNaN()：如果isNaN(x)返回false，那么x在任何算数表达式中都不会使表达式等于NaN；如果返回true，x会使所有算数表达式返回NaN。这就意味着，在JavaScript中，isNaN(x)==true等价于x-0=NaN(在JavaScript中 x-0 == NaN 总是返回false，所以你不用去测试它)。

实际上， isNaN(x), isNaN(x - 0),isNaN(Number(x)), Number.isNaN(x - 0),和Number.isNaN(Number(x)) 的返回值都是一样的 并且在JavaScript中isNaN(x)是这些表达式中最短的表达。