JavaScript数据类型检测

Posted 2020-10-07 小小驰

一、javascript 数据类型

　　1、基本数据类型（6种）

• • • Undefined
    • Null
    • Boolean
    • Number
    • String
    • Symbol　　(ES6新增）

　　2、引用数据类型： Object

二、数据类型检测

　　1、 typeof　　可以检测除null 外的基本类型。null 和所有对象的typeof都是“object”, 不能用于检测用户自定义类型。 比如Date, RegExp, Array, DOM Element的类型都是"object"。　　

var s = ‘hi‘;
var b = true;
var num = 22;
var u;
var n = null;
var o = {};
var a = [];
var sym = Symbol();

typeof s;　　　　//string 
typeof b;　　　　//boolean
typeof num;　　　//number
typeof u;　　　　//undefined
typeof n;　　　　//object
typeof o;　　　　//object
typeof a;　　　　//object
typeof sym;　　 //symbol

 　　2、instanceof  可用来检测引用类型值。因为所有引用类型的值都是Object的示例，所以， (引用类型值) instanceof Object 始终返回true。 如果使用instanceof检测基本类型值，则始终返回false。

a instanceof Array;    //true
a instanceof Object;    //true

var fun = function(){};
fun instanceof Function    //true
fun instanceof Object       //true

num instanceof Number     //false
new Number(22) instanceof Number    //true

b instanceof Boolean 　　//false
new Boolean(true) instanceof Boolean　　//true

n instanceof XXX　　　　//false
u instanceof XXX　　　　//false

　　3、Object.prototype.toString.call() 最准确最常用的方式

Object.prototype.toString.call(a);     // [object Array]
Object.prototype.toString.call(o);     // [object Object]
Object.prototype.toString.call(s);     // [object String]
Object.prototype.toString.call(sym);     // [object Symbol]
Object.prototype.toString.call(new Date());     // [object Date]
Object.prototype.toString.call(num);      // [object Number]
Object.prototype.toString.call(function () {});     // [object Function]
Object.prototype.toString.call(/abc/i);    // [object RegExp]
Object.prototype.toString.call(b);       // [object Boolean]
Object.prototype.toString.call(n);       // [object Null]
Object.prototype.toString.call(u);       // [object Undefined]

　　4、jquery.type()

　　5、检测数组  Array.isArray(a)　　//true

　　6、多全局执行环境问题。使用instanceof 等方法的问题是，假定为单一的全局执行环境。如果网页中包含多个框架，那么就存在多个不同的全局执行环境，从而存在多个不同版本的Object、Array等构造函数，如果从一个框架传入另一个框架，则传入的值与第二个框架中原生创建的值分别具有不通过的构造函数，会出现问题。如：(http://harttle.com/2015/09/18/js-type-checking.html)

var iframe = document.createElement(‘iframe‘);
var iWindow = iframe.contentWindow;
document.body.appendChild(iframe);

iWindow.Array === Array         // false
// 相当于
iWindow.Array === window.Array  // false

//因此iWindow中的数组arr原型链上是没有window.Array的。请看：

iWindow.document.write(‘<script> var arr = [1, 2]</script>‘);
iWindow.arr instanceof Array            // false
iWindow.arr instanceof iWindow.Array    // true

 

参考：

Javascript高级程序设计

http://es6.ruanyifeng.com/#docs/symbol

https://shenbao.github.io/2016/11/02/Javascript-Test-data-type/

http://harttle.com/2015/09/18/js-type-checking.html