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正则表达式基础知识入门
Apr 20 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
JavaScript中isPrototypeOf函数
Nov 07 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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
投票管理程序
2006/10/09 PHP
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
python使用thrift教程的方法示例
2019/03/21 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
佳能法国商店:Canon法国
2019/02/14 全球购物
家庭教育先进个人事迹材料
2014/01/24 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书