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 相关文章推荐
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
js中toString()和String()区别详解
Mar 23 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
vue 设置 input 为不可以编辑的实现方法
Sep 19 Javascript
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学习教程之第1天
2008/06/15 PHP
php中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
Python中逗号的三种作用实例分析
2015/06/08 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
Python同步遍历多个列表的示例
2019/02/19 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
成语的广告词
2014/03/19 职场文书
简单租房协议书
2014/04/09 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
python迷宫问题深度优先遍历实例
2021/06/20 Python
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫
Nginx HTTP跳转至HTTPS
2022/05/15 Servers