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 相关文章推荐
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
基于jquery的动态创建表格的插件
Apr 05 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 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
初学CAKEPHP 基础教程
2009/11/02 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
php报错502badgateway解决方法
2019/10/11 PHP
JavaScript中的继承方式详解
2015/02/11 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
python中如何使用朴素贝叶斯算法
2017/04/06 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
户外婚礼策划方案
2014/02/08 职场文书
应聘英语教师求职信
2014/04/24 职场文书
2014教师研修学习体会
2014/07/08 职场文书
2014年药房工作总结
2014/11/22 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
python三子棋游戏
2022/05/04 Python