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 相关文章推荐
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
Vue中使用vux的配置详解
May 05 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
Vue formData实现图片上传
Aug 20 Javascript
layui实现数据表格自定义数据项
Oct 26 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
十天学会php之第八天
2006/10/09 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
js下用eval生成JSON对象
2010/09/17 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
js实现微博发布小功能
2017/01/12 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
Python深入学习之对象的属性
2014/08/31 Python
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
学校火灾防控方案
2014/06/09 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
完整版商业计划书
2014/09/15 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python