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 相关文章推荐
你真的了解JavaScript吗?
Feb 24 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
动态加载js文件简单示例
Apr 21 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 Javascript
原生js生成图片验证码
Oct 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 动态多文件上传
2009/01/18 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
浅谈json_encode用法
2015/03/05 PHP
php根据生日计算年龄的方法
2015/07/13 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
php图像验证码生成代码
2017/06/08 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
python异步任务队列示例
2014/04/01 Python
python下MySQLdb用法实例分析
2015/06/08 Python
python将txt文件读取为字典的示例
2018/12/22 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
初中三年学生的学习自我评价
2013/11/13 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
扬尘污染防治方案
2014/06/15 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
贷款收入证明范本
2015/06/12 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA