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 相关文章推荐
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
canvas绘制多边形
Feb 24 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
node.js文件操作系统实例详解
Nov 05 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
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
python导入时小括号大作用
2017/01/10 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
python爬取内容存入Excel实例
2019/02/20 Python
django 信号调度机制详解
2019/07/19 Python
python中time库的实例使用方法
2019/10/31 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
电大学习个人自我评价范文
2013/10/04 职场文书
护士自我鉴定范文
2013/10/06 职场文书
银行领导证婚词
2014/01/11 职场文书
业务总经理岗位职责
2014/02/03 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
三八节主持词
2014/03/17 职场文书
大学生简短的自我评价
2014/09/12 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
解除施工合同协议书
2014/10/17 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
辞职信格式模板
2015/02/27 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书