JS数据类型检测

秃头王路飞 等级 313 0 0
标签:

数据类型检测

相信大家有的时候判断数据类型的时候会有疑惑 1、typeof、instanceof用的话会有哪些缺陷呢? 2、哪个api只要记住的话,就可以完美判断呢?

1、typeof

返回的都是字符串

type of Symbol() === 'symbol'
type of null === 'object'
type of [] === 'object'
type of {} === 'object'
type of console === 'object'
type of console.log === 'function'

undefined 为 'undefined' 可直接 typeof 判断
null 为 'object' 但并非引用类型 (null === null)
array 得另外加其他的判断条件
object 因为 null arrary 均是 object 所以也无法直接通过 typeof 去判断
function 可以直接通过 typeof 去判断

2、instanceof (instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。)

'111' instanceof String  false
[] instanceof Array/Object   true
111 instanceof Number   false
new Date() instanceof Date/Object  true
...

3、Object.prototype.toString.call()

Object.prototype.toString.call([]) ===> [object Array]
Object.prototype.toString.call('tutouwanglufei') // "[object String]"
Object.prototype.toString.call(1) // "[object Number]"
Object.prototype.toString.call(Symbol(1)) // "[object Symbol]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(function(){}) // "[object Function]"
Object.prototype.toString.call({name: 'tutouwanglufei'}) // "[object Object]"
...

总结:

1、instanceof可以准确的判断复杂引用数据类型,但是不能正确判断基础数据类型

2、而typeof也存在弊端,他虽然可以是判断基础数据类型(null除外),但是引用数据类型中,除了function类型除外,其他也无法判断

3、用Object.prototype.toString.call()就可以完美去判断某个变量属于什么类型

收藏
评论区

相关推荐

项目实战之---AES 加密
ajax/index.js import axiosApi from '../js/fetch'; import { baseUrl, headerParams } from '../js/baseUrl'; // import引用AES源码js import CryptoJS from 'cryptojs/cryptojs'; console.lo
前端 - 常见的异常捕获方法
前端异常捕获在ES3之前js代码执行的过程中,一旦出现错误,整个js代码都会停止执行,这样就显的代码非常的不健壮。从ES3开始,js也提供了类似的异常处理机制,从而让js代码变的更健壮,程序执行的过程中出现了异常,也可以让程序具有了一部分的异常恢复能力。js异常的特点是,出现不会导致JS引擎崩溃,最多只会终止当前执行的任务。回归正题,我们该如何在程序异常发生
CSS禁用鼠标拖拽选中内容
chrome  -webkit-user-select:none firxfox  -moz-user-select:none IE需要使用JS的onSelected事件了。 JS代码             dom.style.MozUserSelect = 'none';//fixrox禁止选择的JS脚本             dom.st
JS
[在线预览](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fjsfiddle.net%2F1010543618%2Ffyf913t0%2F) 使用《Web API 接口》的《MutationObserver》 [MutationObserver](https://www.oschina.
JS动态加载JS
1、直接document.write <script language="javascript"> document.write("<script src='test.js'><\\/script>"); </script> 2、动态改变已有script的src属性 <script src='' id="s1"></script> <
JS导出页面为PDF文件,该如何操作?来看一眼就明白啦!
废话不多说,直接上代码。 1.资源文件或依赖 <script type="text/javascript" src="https://my.oschina.net//u/4265132/blog/4054317/js/canvg2.js"></script><script type="text/javascript" src="https://m
Echarts全国地图二级钻取
<html> <head> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/echarts-all-3.js"></script> <script src="js/china.js"></script> </h
JQValidate使用说明
JQuery Validate使用总结: 一、导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.validate.js" type="text/javascript"></script> 二、默认校验规则
JS前端图形化插件之利器Gojs组件(php中文网)
JS前端图形化插件之利器Gojs组件(php中文网) ========================== 一、总结 ---- ### 一句话总结:php中文网我可以好好走一波 二、JS前端图形化插件之利器Gojs组件 -------------------- 参考: JS前端图形化插件之利器Gojs组件-js教程-PHP中文网 http://
JavaScaript学习笔记第(一)
js由三部分组成,分别是ECMAScript、DOM、BOM 其中ECMAScript规定了js的语法 js是一门解释型语言、脚本语言、动态类型语言、基于对象语言 书写js代码和CSS一样,有三个书写的地方,第一个是使用<script>标签,再<sccript>标签中书写js代码,标签一般都在body标签中的末尾,第二个地方是书写再结构里,html标签
JavaScript 两个叹号含义
先起个例子吧~  这个用的是谋智的js引擎monkey spider  darion.yaphet@localhost.localdomain:/home/darion.yaphet> js               js> var i; js> print(i) undefined js>  js> va
JavaScript八张思维导图
**![](https://oscimg.oschina.net/oscnet/17104907-a0f0-4b40-ac9d-9c40d9b13157.jpg)** **目录** * JS基本概念 * JS操作符 * JS基本语句 * JS数组用法 * Date用法 * JS
Javascript 是如何体现继承的 ?
js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承) 类式继承(构造函数间的继承)   由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念。所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现 在面向对象的语言中,我们使用类来创建一个自定义对象
React.createClass 、React.createElement、Component
react里面有几个需要区别开的函数 React.createClass 、React.createElement、Component 首选看一下在浏览器的下面写法: <div id="app"> </div> <script src="../js/react.js"></script> <scr
Springmvc异步上传文件
<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.ext.js" type="text/javascript"></script><script src="js/jquery.form.js" type="text/javascript"

热门文章

webpack5手撸vue2脚手架vue大屏固定比例自适应浏览器工作原理

最新文章

浏览器工作原理vue大屏固定比例自适应webpack5手撸vue2脚手架