js 如何判断数据类型

本文除了介绍如何检测数据类型，顺带也将数据类型也大概介绍了下
参考《JavaSript高级程序设计》、MDN网站等

方法总结为下面几类

typeof
instanceof
jquery
Object.toString.call(obj)
constructor

1. typeof

语法

typeof operand 或者 typeof (operand)

类型说明

数据类型	typeof 输出结果	说明
undefined	"undefined"	未初始化和未声明的变量
null	"object"	只有null这个值才是这种类型；：undefined值派生自null， `undefined == null`返回true，`undefined === null`返回false，但不能通用这两个变量，null为了变现变量是空对象，undefined为了体现变量为初始化或者未声明
boolean	"boolean"	只有true、false；：区分大小写，True, False这些都不是 Boolean()函数可以将其他变量转换成为boolean变量, 关于转换方式，可见附录 1. Boolean([value])函数转换
Number	"number"	a. 如果浮点数值小数点后没有跟任何数字的话，会被转换成整型来保存； b. 浮点数值最高精度是17位，在js中`0.1+0.2=0.30000000000000004`，所以在比较的时候需要注意，使用`if(0.1+0.2 == 0.3){}else{}`会进入到`else`分支；但有些计算又是正确的，例如`0.15+0.05==0.2`返回true，最好还是不要使用浮点数去进行比较计算 c. 内存限制，超过浏览器的计算范围，都会被转换为 `Infinity`、`-Infinity`（正负无穷），并且不能再进行计算（`Infinity - Infinity`返回结果是`NaN`）；可以通过isFinte(value)函数判断；Number.NEGATIVE_INFINITY、Number.POSITIVE_INFINITY分别代表负、正Infinity的值； d. NaN（Not a number）关于NaN的操作（例如`NaN/10`返回NaN）； NaN与任何值都不相等，`NaN == NaN`也返回`false`； isNaN()用于检测该类型，如果该值可以转换为数值的话（包括`Infinity`和`-Infinity`），则返回false，例如`"10"`、`Boolean值`，其余不能被转换成为数值的返回true；isNaN还可以检测对象，首先调用`valueOf()`方法，如果没有的话，再调用`toString()`方法 e. 数值转换方法（具体转换方法见附录 2. Number数值转换方法）： `Number()` `parseInt()` `parseFloat()`
String	"string"	'\u03a3'类似的字符长度只算1；数值、布尔值、对象、字符串都自带`.toString()`方法，`null`和`undefined`没有； `num.toString(8)`可以将数值转换成8进制的字符显示，其他进制类同； `String([value])`可以将所有类型转换成字符；任意值+""可以转换成为字符
Symbol	"symbol"	关于Symbol-阮一峰
宿主对象（由JS环境提供）	Implementation-dependent
函数对象	"function"
Object	"object"	任何其他对象

2. instanceof

用于识别对象的问题

语法

object instanceof constructor
object: 要检测的对象
constructor: 某个构造函数

说明

instanceof运算符用来检测constructor.prototype是否存在于参数object的原型链上
当typeof无法分辨是null还是object时，就可以用这个方法
可以参考这篇文章JavaScript instanceof 运算符深入剖析

以下是上述作者整理的instanceof运算符代码

function instance_of(L, R) {
  var O = R.prototype;    // 取R的显示原型
  L = L.__proto__;      // 取L的隐式原型
  while(true) {
    if(L === null) 
      return false;
    if(O === L) 
       return true;
    L = L.__proto__;
  }
}

举例说明

var a = new String("123");
console.log(a instanceof String);         // true

3. jQuery中判断的方法（基于jQuery3 .3.1）

判断数组

jQuery.isArray(object)
实际调用Array.isArray(object)方法判断

jQuery.isArray([1, 2, 3])     // true
jQuery.isArray('[1, 2, 3]')    // false，字符串

判断函数

jQuery.isFunction(value)
实际调用typeof value === "function"

判断数字

jQuery.isNumeric(value)
jQuery把数字和可以转换成数字的字符串都判断为数字

// jQuery源码
jQuery.isNumeric = function(obj) {
  var type = jQuery.type(obj);    // 判断数据类型
  return (type === "number" || type === "string") &&
    !isNaN(obj - parseFloat(obj));     // 排除Infinity和-Infinity，因为isNaN(Infinity)返回的是true
}

判断空对象

jQuery.isEmptyObject(obj)
通过for in循环变量value判断是否是空对象

for(name in obj) {
  return false;   // 不是空对象
}
return true;

判断是否是纯粹的对象

jQuery.isPlainObject(value)
其中只介绍源码中其判断是否为对象方法

 isPlainObject: function(obj) {
  ...
  if(!obj || toString.call(obj) !== "[object object]") {    // 用toString方法判断其是否是object类型
    return false;
  }
  ...
}

判断类型

jQuery.type(obj)

toType(obj) {
  if ( obj == null ) {
    return obj + "";      // null 就返回null
  }

  return typeof obj === "object" || typeof obj === "function" ?
    class2type[ toString.call( obj ) ] || "object" :    // 通过{}.toString.call来判断类型
    typeof obj;
 }

// class2type[ toString.call( obj ) 
class2type["object xx"] = xx.toLowerCase()     // xx为对应类型（Boolean Number String Function Array Date RegExp Object Error Symbol）

其他

{}.toString.call 返回[object xx]（xx是对应的数据类型，包括boolean Number String Function Array Date RegExp Object Error Symbol）
constructor根据对象的constructor判断

var a = [1, 2, 3];
a.constructor === Array    // true

附录

1. Boolean([value])函数转换

参考链接： MDN—Boolean() 网站

返回false的情况
省略该参数、0、-0、null、false、NaN、undefined、空字符串，生成的Boolean对象的值是false，DOM对象document.all对象传入也是false

返回true的情况
除上以外均为true，包括Boolean("false")（因为不是空字符串），Boolean({})、Boolean([])（因为任何对象都会被转换成true，除非对象被置为null了）。

推荐使用Boolean([value])而不是New Boolean([value])，原因如下
typeof(new Boolean([value]))返回的是"object"，
而 typeof(Boolean([value])) 才是返回"boolean"，
New Boolean()除了null、false，在使用if(new Boolean([value]))直接进行判断的时候都会被当成true来对待，Boolean()就不会有这个问题。

那么如何正确使用new Boolean()
通过valueOf()来获取对应的boolean值

  var a = New Boolean(''); 
  if(a.valueOf()) { 
     \\ ...
  } else {
     \\ ...
 }

2. Number数值转换方法

Number()
a.   Boolean值对应转换成为0,1；
b.   数字传入什么就返回什么（注：Number(0123)是个8进制数字）
c.   null返回0
d.   undefined返回NaN
e.   字符串的话分情况：
      e1. 如果是都是数字形式的字符串，则返回对应的数字；例如Number("0123")返回123，会忽略前面的0。
      e2. 如果是0x15这种带有效的16进制格式的，则返回对应的十进制数。
      e3. 空字符串返回0
      e4. 其余返回NaN
f.   对象的话，先调用valueOf()如果返回NaN，再调用toString()方法

parseInt()
a.   转换字符串时，按遇到的第一个非空字符进行判断。
      a1. 第一个字符是数字字符的话，解析到最后一个非数字字符
      a2. 如果遇到的不是数字或者负号，返回 NaN，反之则按照a1的数字转换方式进行转换，例如parseInt(" 123adfa123")，返回123；
      a3. 空字符返回NaN
      a4. 如果0x开头，则会当成16进制来解析，0开头则当成8进制来解析（ES5 parseInt(070)还是会被当成10进制，返回70）
b.    parseInt(num, 进制)，例如parseInt(0x15, 16)或者parseInt("AF", 16)都会被当成16进制进行解析；parseInt(aaa, 8)由于aaa不能被转换成为8进制，所以返回NaN

parseFloat()

数字型字符串的话，只能解析到第一个小数点，第二个小数点的话，作废处理，例如parseFloat("11.11.23")返回11.11；
只会解析10进制，带16进制"0x"标志的字符都会被转换成为0，parseFloat("0x13")返回0，parseFloat("0x")也返回0；
其余与parseInt()一样