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 prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
JQuery 写的个性导航菜单
Dec 24 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 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处理Oracle的CLOB实例
2014/11/03 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
详解js静态资源文件请求的处理
2017/08/01 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
javaScript中"=="和"==="的区别详解
2018/03/16 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
Python3使用Matplotlib 绘制精美的数学函数图形
2019/04/11 Python
详解python中递归函数
2019/04/16 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
Android笔试题总结
2014/11/29 面试题
遥感技术与仪器求职信
2014/02/22 职场文书
春风行动实施方案
2014/03/28 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
社区创先争优承诺书
2014/08/30 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
党员违纪检讨书
2015/05/05 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python