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高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
javascript页面动态显示时间变化示例代码
Dec 18 Javascript
php中给js数组赋值方法
Mar 10 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
Vue之封装公用变量以及实现方式
Jul 31 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
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
javascript OFFICE控件测试代码
2009/12/08 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
python创建和使用字典实例详解
2013/11/01 Python
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
python的range和linspace使用详解
2019/11/27 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
珍珠鸟教学反思
2014/02/01 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
公司周年庆典标语
2014/10/07 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书