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 相关文章推荐
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
vue router 配置路由的方法
Jul 26 Javascript
详解如何探测小程序返回到webview页面
May 14 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
微信小程序实现上拉加载功能
Nov 20 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之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
python进程与线程小结实例分析
2018/11/11 PHP
PHP递归的三种常用方式
2019/02/28 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
php异常处理捕获错误整理
2019/09/23 PHP
短信提示使用 特效
2007/01/19 Javascript
Prototype Class对象学习
2009/07/19 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
理解javascript对象继承
2016/04/17 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
iView框架问题整理小结
2018/10/16 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
优秀员工评语
2014/02/10 职场文书
家长对孩子的感言
2014/03/10 职场文书
高中学生自我评价范文
2014/09/23 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python