正确判断js数据类型 总结记录

算法踏雪人
• 阅读 2130

正确判断js数据类型 总结记录

判断js中的数据类型有一下几种方法:typeof、instanceof、 constructor、 prototype、 三方库。

js六大数据类型

number:   数字,整数、浮点数等等,
string:   单引号或者双引号来说明,
Boolean:  返回true和false,这两个值不一定对应1和0
object:   对象,可以执行new操作符后跟要创建的对象类型的名称来创建。
null:     只有一个值得数据类型,逻辑上讲,null值表示一个空对象指针。
undefined:未定义,使用var声明变量但未对其初始化时,变量的值就是undefined。

1、typeof

在实际的项目应用中,typeof只有两个用途,就是检测一个元素是否为undefined,或者是否为function。原因如下:
JavaScript Garden整理出来了如下表格

Value               function   typeof
-------------------------------------
"foo"               String     string
new String("foo")   String     object
1.2                 Number     number
new Number(1.2)     Number     object
true                Boolean    boolean
new Boolean(true)   Boolean    object
new Date()          Date       object
new Error()         Error      object
[1,2,3]             Array      object
new Array(1, 2, 3)  Array      object
new Function("")    Function   function
/abc/g              RegExp     object
new RegExp("meow")  RegExp     object
{}                  Object     object
new Object()        Object     object 

2、instanceof

var a = [1,2,3];
var b = new Date();
var c = function(){};

alert(a instanceof Array) ---------------> true
alert(b instanceof Date) 
alert(c instanceof Function) ------------> true
alert(c instanceof function) ------------> false

3、constructor

var a = [1,2,3];
var b = new Date();
var c = function(){};

alert(a.constructor === Array) ----------> true
alert(b.constructor === Date) -----------> true
alert(c.constructor === Function) -------> true

注:
      使用instaceof和construcor,被判断的引用类型(Object Array)必须是在当前页面声明的!比如,一个页面(父页面)有一个框架,框架中引用了一个页面(子页面),在子页面中声明了一个array,并将其赋值给父页面的一个变量,这时判断该变量,Array ==object.constructor;会返回false;
原因:
1、array属于引用型数据,在传递过程中,仅仅是引用地址的传递。
2、每个页面的Array原生对象所引用的地址是不一样的,在子页面声明的array,所对应的构造函数,是子页面的Array对象;父页面来进行判断,使用的Array并不等于子页面的Array。

4、Object.prototype.toString(通用)

Object.prototype.toString.call()
var toString = Object.prototype.toString;

toString.call(undefined);  -------------> [object Undefined]
toString.call(null);       -------------> [object Null]
toString.call(new Date);   -------------> [object Date]
toString.call(new String); -------------> [object String]
toString.call(Math);       -------------> [object Math]

jQuery.type()源码

var class2type = {} ;
"Boolean Number String Function Array Date RegExp Object Error".split(" ").forEach(function(e,i){
    class2type[ "[object " + e + "]" ] = e.toLowerCase();
}) ;

function _typeof(obj){
    if ( obj == null ){
        return String( obj );
    }
    return typeof obj === "object" || typeof obj === "function" ?
        class2type[ class2type.toString.call(obj) ] || "object" :
        typeof obj;
}

注:数组还可以用 Array.isArray(); 或者根据其具有的方法去判断。不再细述

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
3年前
JS数据类型检测
数据类型检测相信大家有的时候判断数据类型的时候会有疑惑1、typeof、instanceof用的话会有哪些缺陷呢?2、哪个api只要记住的话,就可以完美判断呢?1、typeof返回的都是字符串jstypeofSymbol()'symbol'typeofnull'object'typeof'object'typeof'ob
晴空闲云 晴空闲云
3年前
javascript实践教程-05-数据类型
本节目标1.掌握js中7种数据类型。2.掌握5种基本数据类型number、string、boolean、null、undefined的声明。3.掌握js中数组的声明和数组相关的方法。4.掌握js中对象的声明和属性、方法的使用。内容摘要本篇介绍了js中的7种数据类型,其中5种基本数据类型:number、string、boolean、null、unde
凝雪探世界 凝雪探世界
4年前
js-Answers一
JavaScript的组成JavaScript由以下三部分组成:1.ECMAScript(核心):JavaScript语言基础2.DOM(文档对象模型):规定了访问HTML和XML的接口3.BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法JS的基本数据类型和引用数据类型
明月 明月
2年前
JS数据类型的几种判断方法
1.typeof(常用)typeof是一个运算符,返回值是一个字符串,用来说明变量的数据类型,可以用来判断number,string,object,boolean,function,undefined,symbol这七种类型.2.instanceof(知道即可)instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上,返回值为布尔值,用于指示一个变量是否属于某个对象的实例3.Object.prototype.to
Jacquelyn38 Jacquelyn38
4年前
面试官:JavaScript的数据类型你了解多少?
前言作为JavaScript的入门知识点,Js数据类型在整个JavaScript的学习过程中其实尤为重要。最常见的是边界数据类型条件判断问题。我们将通过这几个方面来了解数据类型:概念检测方法转换方法概念undefined、Null、Boolean、String、Number、Symbol、BigInt为基础类型;Ob
劳伦斯 劳伦斯
4年前
前端面试题自检 JS CSS 部分
JS类型JavaScript的简单数据类型Number,String,Boolean,Undefined,Null,Symboltypeof操作符的返回值numberstringbooleanundefinedobjectfunction
Wesley13 Wesley13
3年前
JavaSrcipt的数字(number):深入理解内部机制
一、数字的语法JavaScript中的数字字面量一般用十进制表示。在JavaScript中表示数字的数据类型只有一种Number,这种天使与魔鬼同体的数据类型也就只有js了。//同时表达整数和浮点数vara78,b78.3;console.log(typeofa);//number
Stella981 Stella981
3年前
JQValidate使用说明
JQueryValidate使用总结:一、导入js库<scriptsrc"../js/jquery.js"type"text/javascript"</script<scriptsrc"../js/jquery.validate.js"type"text/javascript"</script二、默认校验规则
Stella981 Stella981
3年前
Js中polyfill的使用限制
随着浏览器的更新,JS也在新增功能功能。这些功能为我们开发带来了很大的便利。在旧浏览器上使用,需要引入相关的polyfill才能用。然而,有些功能在旧浏览器中是无法完美实现的,只有在一定条件下才能使用。本文将为大家分析这些功能的使用限制。Symbol1.禁止用typeof和instanceof,如果要判断,建议判断是否是string。
Stella981 Stella981
3年前
JavaScript基础
_1,js组成_       核心:ECMAScript标准                 此标准指定了js的基础语法,数据类型,关键字,操作符,对象;       DOM:文档对象模型标准(DocumentobjectModel)         是js针对xm
待兔 待兔
1年前
JS的数据类型你了解多少?
JS的数据类型你了解多少?作为JavaScript的⼊⻔级知识点,JS数据类型在整个JavaScript的学习过程中其实尤为重要。因为在JavaScript编程中,经常会遇到边界数据类型条件判断问题,很多代码只有在某种特定的数据类型下,才能可靠地执⾏。希望
算法踏雪人
算法踏雪人
Lv1
是谁,在寒冷的冬天,掀开被单,冰冻爱情的温暖。
文章
5
粉丝
0
获赞
0