js 数据类型判断的方法


Posted in Javascript onDecember 03, 2020

typeof

一般用于判断基本数据类型,用于判断引用数据类型和null时会发生意外的错误

typeof 1 // number
typeof '1' // string
typeof true // boolean
typeof Symbol('1') // symbol
typeof undefined // undefined

typeof function(){} // function
typeof { a: 1 } // object
typeof [1, 2, 3] // object 这里会判断异常,建议使用Array.isArray区分数组和对象

//以下也会判断异常
typeof new Boolean(true) === 'object';
typeof new Number(1) === 'object';
typeof new String('abc') === 'object';

//最后来看null
typeof null // object

来看下typeof的原理:不同的对象在底层都表示为二进制,在js里二进制前三位都为0的会 被判断为object类型,null的二进制表示全0(对应机器码的null指针,一般为全0),所以会被判断成object类型。

instanceof

它的主要作用是用来判断一个实例是否属于某种类型,用于判断对象很合适

语法:object instanceof constructor 
object 某个实例对象 constructor 某个构造函数

'abc' instanceof String //false 检查原型链会返回undefined
new String('abc') instanceof String //true
new Boolean(true) instanceof Boolean // true 
new Number(1) instanceof Number // true

顺便做一下简单实现
function new_instance_of(leftVaule, rightVaule) { 
		let leftProto = leftVaule.__proto__; // 取左表达式的__proto__值
  let rightPrototype = rightVaule.prototype; // 取右表达式的 prototype 值
  
  while (true) {
  	if (leftProto === null) {
      return false;	
    }
    if (rightPrototype === rightProto) {
      return true;	
    } 
    leftProto = leftProto.__proto__ 
  }
}

constructor

根据数据类型的构造函数返回类型,但是由于null和undefined没有构造函数故无法判断

''.constructor == String  //true 
new Number(1).constructor == Number  //true 
new Function().constructor == Function //true 
true.constructor == Boolean  //true
new Date().constructor == Date //true

Object.prototype.toString.call()

可以通过 toString() 来获取每个对象的类型。为了每个对象都能通过Object.prototype.toString() 来检测,需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用,传递要检查的对象作为第一个参数。

var toString = Object.prototype.toString;

toString.call(new Date); // [object Date]
toString.call(new String); // [object String]
toString.call(Math); // [object Math]

toString.call(undefined); // [object Undefined]
toString.call(null); // [object Null]

lodash.getTag和lodash.baseGetTag

baseGetTag使用Object.prototype.toString.call和Symbol.toStringTag来判断属性的类型Symbol.toStringTag只适合做特定的类型判断

js 数据类型判断的方法

//lodash.baseGetTag部分重要源码

//如果值是undefined和null返回对应tag
   if (value == null) {
    return value === undefined ? 
 				'[object Undefined]' 
 				: 
 				'[object Null]'
   }
   // 如果不支持Symbol或者value值上面没有Symbol.toStringTag属性,
		 //直接返回Object.prototype.toString调用后的值  
   if (!(symToStringTag && symToStringTag in Object(value))) {
    return toString.call(value)
   }

以上就是js 数据类型判断的方法的详细内容,更多关于js 数据类型判断的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
Mar 13 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 Javascript
用vue设计一个日历表
Dec 03 #Vue.js
JS闭包原理及其使用场景解析
Dec 03 #Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 #Vue.js
Javascript节流函数throttle和防抖函数debounce
Dec 03 #Javascript
如何实现vue的tree组件
Dec 03 #Vue.js
Vue实现图书管理小案例
Dec 03 #Vue.js
基于ajax实现上传图片代码示例解析
Dec 03 #Javascript
You might like
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
javascript中的继承实例代码
2011/04/27 Javascript
JS画线(实例代码)
2013/11/20 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
React diff算法的实现示例
2018/04/20 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
Python实现快速计算词频功能示例
2018/06/25 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
解析python实现Lasso回归
2019/09/11 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
python实现人机猜拳小游戏
2020/02/03 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
授权委托书
2014/07/31 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
深入理解 Golang 的字符串
2022/05/04 Golang