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

正确判断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(); 或者根据其具有的方法去判断。不再细述

原文地址:https://segmentfault.com/a/1190000016940601


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/364624.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

wait/notify实现线程间的通信

使线程之间进行通信之后,系统间的交互性更加强大,在大大提高CPU利用率的同时还会使程序对各线程任务在处理的过程中进行有效的把控与监督。 1.不使用wait/notify实现线程间通信 使用sleep()while(true)也可以实现线程间通信。 例如:两个线程&#xff0c…

项目学生:使用AOP简化代码

这是Project Student的一部分。 许多人坚信方法应适合您的编辑器窗口(例如20行),而有些人则认为方法应小于此范围。 这个想法是一种方法应该做一件事,而只能做一件事。 如果它做的还不止于此,则应将其分解为多种方法&…

洛谷 P3367 【模板】并查集

嗯... 题目链接:https://www.luogu.org/problemnew/show/P3367 并查集可以支持的操作:“并”和“查”。然后这道题主要就是考察这两种操作。将每一个点的“父亲”初始化为自己,然后分别进行“并”和“查”。 “并”:用递归函数fin…

MySQL使用学习使用,mysql学习--基本使用_MySQL

一旦安装完成,MySQL 服务器应该自动启动。sudo start mysql #手动的话这样启动sudo stop mysql #手动停止当你修改了配置文件后,你需要重启 mysqld 才能使这些修改生效。要想检查 mysqld 进程是否已经开启,可以使用下面的命令:pgr…

解决@vue/cli 创建项目是安装chromedriver时失败的问题

最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行。网上搜索了一下,全是使用 npm install chromedriver --chromedriver_cdnurlhttp://cdn.npm.taobao.org/dist/chromedriver 安装的&#xff0c…

Java 8 Friday Goodies:Lambda和排序

在Data Geekery ,我们喜欢Java。 而且,由于我们真的很喜欢jOOQ的流畅的API和查询DSL ,我们对Java 8将为我们的生态系统带来什么感到非常兴奋。 我们已经写了一些关于Java 8好东西的博客 ,现在我们觉得是时候开始一个新的博客系列了…

npm 包下载的各种姿势

最近在写Node程序的时候,突然对 npm install 的-save和-save-dev 这两个参数的使用比较混乱。其实博主在这之前对这两个参数的理解也是模糊的,各种查资料和实践后对它们之间的异同点略有理解。遂写下这篇文章避免自己忘记,同时也给node猿友一…

39.数组中数值和下标相等的元素

题目描述: 假设一个单调递增的数组里的每个元素都是整数且是唯一的,请编程实现一个函数,找出数组中任意一个数值等于其下标的元素,例如,在数组{-3,-1,1,3,5}中数字3和它的下标相同。 思路分析: …

php读取xml标签内容,从xml php5获取内容

我正在研究一个支付解决方案,需要一些关于php的帮助。我正在做一个httprequest,作为回应,我将得到一些xml。XML可能如下所示:1description121510authurlsettleurl基本上我想做的是从标签中获取内容并将其保存为字符串。我试过这个:$order <?xml version"1.0" en…

jquery3和layui冲突导,致使用layui.layer.full弹出全屏iframe窗口时高度152px问题

项目中使用的jquery版本是jquery-3.2.1&#xff0c;在使用layui弹出全屏iframe窗口时&#xff0c;iframe窗口顶部总是出现一个152px高的滚动窗口无法实现真正全屏&#xff0c;代码如下&#xff1a; <!DOCTYPE html> <html> <head><meta charset"utf-…

ADF Faces。 立即的自定义客户端事件

在本文中&#xff0c;我将重点介绍ADF Faces Javascript API方法以从客户端触发自定义事件。 例如&#xff1a; function cliListener(actionEvent) {AdfCustomEvent.queue(actionEvent.getSource(), "servListener",null, true);}我们可以使用af&#xff1a;client…

react-native页面间传递数据的几种方式

1. 利用react-native 事件DeviceEventEmitter 监听广播 应用场景&#xff1a; - 表单提交页面&#xff0c; A页面跳转到B页面选人&#xff0c; 然后返回A页面&#xff0c; 需要将B页面选择的数据传回A页面。 - 多个多媒体来回切换播放&#xff0c;暂停后二次继续播放等问题。…

php数据库操作类的调用优化,PHP PDO优化数据库操作类 多数据库驱动类

就是做一下整理 PHP PDO类操作。简化操作流程更多内容http://git.oschina.net/youkuiyuan/yky_test/blob/master/class/pdo.class.php点击链接加入群【微信开发探讨群】&#xff1a;http://jq.qq.com/?_wv1027&kcsNcd9群号&#xff1a;330393916欢迎浏览&#xff1a;www.z…

Genymotion模拟器安装ARM架构编译应用失败解决方案

我们在安装一些应用到Genymotion模拟器会提示&#xff1a;adb: failed to install xx.apk: Failure [INSTALL_FAILED_NO_MATCHING_ABIS: Failed to extract native libraries, res-113] 原因是Genymotion采用的编译方式是x86&#xff0c;默认不支持ARM架构编译的应用&#xff0…

CentOS7.5 yum 安装与配置MySQL5.7.24

安装环境&#xff1a;CentOS7 64位 MINI版&#xff0c;安装MySQL5.7 1、配置YUM源 在MySQL官网中下载YUM源rpm安装包&#xff1a;https://dev.mysql.com/downloads/repo/yum/ 下面已经提供一个YUM源安装包,如果不需要特定版本可直接使用我提供的5.7.24版本 # 下载mysql源安装包…

5种改善服务器日志记录的技术

在最近的时间里&#xff0c;我们已经看到了许多工具可以帮助您理解日志。 诸如Scribe和LogStash之类的开源项目&#xff0c;诸如Splunk之类的本地工具以及诸如SumoLogic和PaperTrail之类的托管服务。 这些都可以帮助您将大量日志数据减少为更有意义的内容。 它们共有一个共同点…

在vue项目中引用element-ui时 让el-input 获取焦点的方法

在制作项目的时候遇到一个需求&#xff0c;点击一个按钮弹出一个input输入框&#xff0c;并让输入框获得焦点&#xff0c;项目中引用了element-ui 在网上查找了很多方法&#xff0c;但是在实际使用中发现了一个问题无论是使用$ref获取input元素然后使用focus方法还是使用饿了么…

java excel处理框架,Java三方—-excel框架之POI的使用一

Apache POI是Apache软件基金会的开放源码函式库&#xff0c;POI提供API给Java程序对Microsoft Office格式档案读和写的功能。pdf框架之IText的使用&#xff0c;参见我的博客&#xff1a;Java三方—->pdf框架之IText的使用。今天我们开始POI中Excel部分的学习。POI框架的简单…

关于background-*的一些属性

1、盒模型 盒模型从外到内一次为&#xff1a;margin-box、border-box、padding-box、content-box。 2、一些属性设置的相对位置 ⑴background-position的属性值&#xff08;top/right/bottom/left/center&#xff09;起始位置是相对于padding-box外边沿开始的&#xff0c;…

设计模式:不可变的嵌入式构建器

上周&#xff0c;我写了关于什么使图案成为反图案。 本周&#xff0c;我提出一种设计模式…或等待……也许这是一种反模式。 还是&#xff1f; 让我们看看&#xff01; 当有一个类可以构建另一个实例时&#xff0c;构建器模式是一种编程样式。 构建器模式的最初目的是将对象的…