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框架myJSFrame附API使用帮助
Jun 28 Javascript
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
JQuery 技巧和窍门整理(8个)
Apr 22 Javascript
js下通过getList函数实现分页效果的代码
Sep 17 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
Angular的MVC和作用域
Dec 26 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
解决await在forEach中不起作用的问题
Feb 25 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网站在线人数统计
2008/04/09 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
JavaScript简介
2015/02/15 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
Python科学计算之Pandas详解
2017/01/15 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
合作协议书
2014/04/23 职场文书
家长会欢迎标语
2014/06/24 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
CSS3实现指纹特效代码
2022/03/17 HTML / CSS