JS数据类型分类及常用判断方法


Posted in Javascript onNovember 19, 2020

数据类型判断的方法

在探索数据类型判断方法的时候我们需要知道JS中有哪些数据类型:

我们可以把JS中数据类型分为两类:

1.基本数据类型:Undefined、Null、Boolean、Number、String、Symbol(es6中新增)

2.引用类型(复杂数据类型):里面包含 function、Array、Date 等

判断数据类型的方法有几种

1.typeof

我相信typeof这个判断数据类型的方法是大家平常用的比较多的,闲话不多说,直接上代码:

console.log(typeof 1);//number
console.log(typeof 'hello');//string
console.log(typeof true);//boolean
console.log(typeof null);//object
console.log(typeof Symbol(1));//symbol
console.log(typeof undefined);//undefined
console.log(typeof function(){});//function
console.log(typeof []);//object
console.log(typeof {});//object

通过以上代码和输出我们大概可以看出,typeof这个判断能判断出大部分的数据类型,但是基本类型中有null的类型被判断为object

所以这个判断还不是那么精确,我们需要其它判断方法

2.instanceof 用于检测构造函数的 prototype 属性是否出现在某个实例的原型链上

1.instanceof 左为实例,右为构造函数。即判断左是不是右的实例对象。内部机制是通过原型链来判断的

2.instanceof 可以精准判断引用数据类型 Array,Function,Object,而基本数据类型不能被 instanceof 精准判断,因为它本身不是一个实例对象

console.log(2 instanceof Number);//false
console.log(new Number(2) instanceof Number);//true
console.log('str' instanceof String); //false
console.log(new String('str') instanceof String); //true
console.log([] instanceof Array);//true
console.log([]instanceof Object);//true
console.log({} instanceof Object);//true
console.log({} instanceof Array);//false
console.log(function(){} instanceof Function); // true 

在以上代码中,我们可以看出这个判断方法还是没解决实际性的问题,比如我们想判断null为null,所以接下来介绍一个精确的判断方法

3.Object.prototype.toString.call()

1.使用 Object 对象的原型方法 toString,使用 call 改变 this 指向

见代码:

const a = Object.prototype.toString;
console.log(a.call(2)); // [object Number]
console.log(a.call(true)); // [object Boolean]
console.log(a.call('str')); // [object String]
console.log(a.call(Symbol())) // [object Symbol]
console.log(a.call([])); // [object Array]
console.log(a.call(function(){})); // [object Function]
console.log(a.call({})); // [object Object]
console.log(a.call(undefined)); // [object Undefined]
console.log(a.call(null)); // [object Null]
console.log(a.call(new Date())) // [object Date]
console.log(a.call(new Error())) // [object Error]
console.log(a.call(new RegExp())) // [object RegExp

见上面输出可知,Object.prototype.toString.call()可以判断出复杂类型中的Array,Function,Date等类型,所以我们知道,当我们需要判断复杂类型时,或者判断简单数据类型中的null为null时我们可以用次方法,判断简单类型中的其他数据类型我们可以用typeof来判断就可以

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript表单常用验证集合
Jan 16 Javascript
JavaScript CSS菜单功能 改进版
Dec 20 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
微信小程序 form组件详解
Oct 25 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
angular共享依赖的解决方案分享
Oct 15 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
JavaScript构造函数原理及实现流程解析
Nov 19 #Javascript
javascript this指向相关问题及改变方法
Nov 19 #Javascript
JavaScript实现alert弹框效果
Nov 19 #Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 #Vue.js
如何使用 vue-cli 创建模板项目
Nov 19 #Vue.js
原生js实现自定义消息提示框
Nov 19 #Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 #Javascript
You might like
php源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
python 生成目录树及显示文件大小的代码
2009/07/23 Python
跟老齐学Python之重回函数
2014/10/10 Python
Python的gevent框架的入门教程
2015/04/29 Python
python与C互相调用的方法详解
2017/07/14 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
Python异常处理机制结构实例解析
2020/07/23 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
Python self用法详解
2020/11/28 Python
python用700行代码实现http客户端
2021/01/14 Python
优秀的2014年两会精神解读
2014/03/17 职场文书
房屋租赁意向书
2014/04/01 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
机电系毕业生求职信
2014/07/11 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
警告通知
2015/04/25 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL