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 ajax执行后台方法
Mar 18 Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
Puppet的一些技巧
Sep 17 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
用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 数组使用详解 推荐
2011/06/02 PHP
PHP 第一节 php简介
2012/04/28 PHP
PHP生成随机密码类分享
2014/06/25 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
php基础教程
2015/08/26 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
Python获取文件所在目录和文件名的方法
2017/01/12 Python
python的文件操作方法汇总
2017/11/10 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
python文件写入write()的操作
2019/05/14 Python
python如何实现视频转代码视频
2019/06/17 Python
六道php面试题附答案
2014/06/05 面试题
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
销售经理工作职责
2014/02/03 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
担保书范本
2015/01/20 职场文书
公司停电通知
2015/04/15 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
create-react-app开发常用配置教程
2022/06/25 Javascript