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代码优化 事件委托篇
Nov 01 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
javascript中json基础知识详解
Jan 19 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
js代码编写无缝轮播图
Sep 13 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
Laravel学习教程之View模块详解
2017/09/18 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
javascript 函数使用说明
2010/04/07 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
在Django中同时使用多个配置文件的方法
2015/07/22 Python
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
Python中的全局变量如何理解
2020/06/04 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
分厂厂长岗位职责
2013/12/29 职场文书
财务信息服务专业自荐书范文
2014/02/08 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
院系推荐意见
2015/06/05 职场文书
Win11 引入 Windows 365 云操作系统,适应疫情期间混合办公模式:启动时直接登录、模
2022/04/06 数码科技
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js