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 相关文章推荐
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
js中arguments对象的深入理解
May 14 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
原生js实现随机点名功能
Nov 05 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 Javascript
让Vue响应Map或Set的变化操作
Nov 11 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中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
PHP开发注意事项总结
2015/02/04 PHP
php简单统计在线人数的方法
2016/05/10 PHP
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python之eval()函数危险性浅析
2014/07/03 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
总经理的岗位职责
2014/02/23 职场文书
合作意向书格式及范文
2014/03/31 职场文书
献爱心标语
2014/06/21 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
工程进度款催款函
2015/06/24 职场文书
初二物理教学反思
2016/02/19 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA