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 相关文章推荐
js 页面执行时间计算代码
Mar 04 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
js实现div弹出层的方法
Nov 20 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
PHP文件与目录操作示例
2016/12/24 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
Python对excel文档的操作方法详解
2018/12/10 Python
Python内置加密模块用法解析
2019/11/25 Python
使用python模拟高斯分布例子
2019/12/09 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
python 模拟登陆github的示例
2020/12/04 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
玲玲的画教学反思
2014/02/04 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
委托函范文
2015/01/29 职场文书
档案接收函格式
2015/01/30 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
vue里使用create, mounted调用方法
2022/04/26 Vue.js