js--typeof 和 instanceof 判断数据类型的区别及开发中的使用
前言
日常的开发中,我们经常会遇到判断一个变量的数据类型或者该变量是否为空值的情况,你是如何去选择判断类型的操作符的?本文来总结记录一下我们开发人员必须掌握的关于 typeof 和 instanceof 的知识点以及在开发中的使用建议,同时在面试过程中也经常会遇到这样的问题。
正文
1、typeof 操作符
返回值 |
含义值 |
"undefined" |
未定义 |
"boolean" |
布尔值 |
"string" |
字符串 |
"number" |
数值 |
"object" |
对象(而不是函数)或 null |
"function" |
函数 |
"symbol" |
符号 |
(2)常见使用方法
console.log(typeof undefined);//'undefined'
console.log(typeof true);//'bpplean'
console.log(typeof ("number")); //'string'
console.log(typeof "number"); //'string'
console.log(typeof 1);//'number'
console.log(typeof Symbol());//'symbol'
//对于Array,Null等特殊对象使用typeof一律返回object,这正是typeof的局限性
console.log(typeof null); //'object'
console.log(typeof [1, 2, 3]);//'object'
console.log(typeof undefined); //'undefined'
//通过 typeof 操作符来区分函数和其他对象
function f1() { console.log(111); }
console.log(typeof f1); //'function'
console.log(typeof f1()); // 111 'undefined'
var a;
if (a === undefined) {
console.log("变量不存在")
} else {
console.log("变量存在")
}
// 变量不存在
2、instanceof 操作符
typeof虽然对原始值很有用,但它对引用值的用处不大。我们通常不关心一个值是不是对象,而是想知道它是什么类型的对象。为了解决这个问题,ECMAScript 提供了 instanceof 操作符。使用如下:
function f1() { console.log(111); }
console.log(f1 instanceof Object);//true
console.log(f1 instanceof Function);//true
console.log(f1 instanceof RegExp);//false
所有引用值都是 Object 的实例,因此通过 instanceof 操作符检测任何引用值和Object 构造函数都会返回 true 。类似地,如果用 instanceof 检测原始值,则始终会返回 false ,因为原始值不是对象。
instanceof 运算符用于判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。其实现原理如下:
function myInstanceof(left, right) {
let proto = Object.getPrototypeOf(left), // 获取对象的原型
prototype = right.prototype; // 获取构造函数的 prototype 对象 // 判断构造函数的 prototype 对象是否在对象的原型链上
while (true) {
if (!proto) return false;
if (proto === prototype) return true;
proto = Object.getPrototypeOf(proto);
}
}
3、typeof 和 instanceof 的区别以及开发中的使用建议
typeof 与 instance 都是判断数据类型的方法,区别如下:
typeof
会返回一个变量的基本类型,instanceof
返回的是一个布尔值instanceof
可以准确地判断复杂引用数据类型,但是不能正确判断基础数据类型而
typeof
也存在弊端,它虽然可以判断基础数据类型(null
除外),但是引用数据类型中,除了function
类型以外,其他的也无法判断
可以看到,上述两种方法都有弊端,并不能满足所有场景的需求
如果需要通用检测数据类型,建议采用Object.prototype.toString
,调用该方法,统一返回格式“[object Xxx]”
的字符串。使用如下:
console.log(Object.prototype.toString.call(undefined)) //"[object Undefined]"
console.log(Object.prototype.toString.call(true)) // "[object Boolean]"
console.log(Object.prototype.toString.call('1')) // "[object String]"
console.log(Object.prototype.toString.call(1)) // "[object Number]"
console.log(Object.prototype.toString.call(Symbol())) // "[object Symbol]"
console.log(Object.prototype.toString.call({})) // "[object Object]"
console.log(Object.prototype.toString.call(function () { })) // "[object Function]"
console.log(Object.prototype.toString.call([])) //"[object Array]"
console.log(Object.prototype.toString.call(null)) //"[object Null]"
console.log(Object.prototype.toString.call(/123/g)) //"[object RegExp]"
console.log(Object.prototype.toString.call(new Date())) //"[object Date]"
写在最后
以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。
js--typeof 和 instanceof 判断数据类型的区别及开发中的使用的更多相关文章
- js中单引号和双引号的区别(html中属性规范是用双引号,js中字符串规定是用单引号)(js中单引号区别和php很像:单引号快,双引号可转义字符,双引号可解析变量)
js中单引号和双引号的区别(html中属性规范是用双引号,js中字符串规定是用单引号)(js中单引号区别和php很像:单引号快,双引号可转义字符,双引号可解析变量) 一.总结 1.html中属性规范是 ...
- JS中typeof和instanceof的用法和区别
typeof和instanceof的区别 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的 instanceof的用法 instanceof返回的是一个布尔值 ...
- JS typeof与instanceof的区别
typeof 与 instanceof 通常是用来判断一个变量的类型,二者有如下区别: typeof: 判断一个变量的类型,返回值是字符串形式,返回结果有如下几种: number,boolean,st ...
- JavaScript 中typeof、instanceof 与 constructor 的区别?
typeof.instanceof 与 constructor 详解 typeof 一元运算符 返回一个表达式的数据类型的字符串,返回结果为js基本的数据类型,包括number,boolean,st ...
- js高阶函数--判断数据类型、函数胡柯里化;
一.判断数据类型: 常见的判断有typeof.instanceof. constructor. prototype,先来看typeof: var a = "hello world" ...
- js严格模式下判断数据类型
function isType(type) { return function (content) { let t = Object.prototype.toString.call(content). ...
- 怎样手势的判断android GestureDetector在android开发中
import android.app.Activity; import android.os.Bundle; import android.util.Log; import android.view. ...
- typeof()和instanceof()用法区别
typeof()和instanceof()用法区别: 两者都是用来判断数据类型的 typeof()是能用来判断是不是属于五大类型Boolean,Number,String,Null,Undefined ...
- javascript篇-typeof,instanceof,constructor,toString判断数据类型的用法和区别
javascript基本数据类型有:string,number,Boolean,undefined,null 引用类型(复杂类型):object, ES6中新增了一种数据类型:Symbol 以上数据类 ...
随机推荐
- VMware workstation16 中Centos7下MySQL8.0安装过程+Navicat远程连接
1.MySQL yum源安装 2.安装后,首次登录mysql以及密码配置3.远程登录问题(Navicat15为例) 一.CentOS7+MySQL8.0,yum源安装1.安装mysql前应卸载原有my ...
- [考试总结]noip模拟45
真开心,挂没了.. 考完:"你们怎么第二题打了这么点分,明明一个爆搜就有65pts!!!怎么跟别人打?!" 然后我看了看我的爆搜,30pts. 然后认为自己打爆了... 我又想为什 ...
- python3 爬虫五大模块之二:URL管理器
Python的爬虫框架主要可以分为以下五个部分: 爬虫调度器:用于各个模块之间的通信,可以理解为爬虫的入口与核心(main函数),爬虫的执行策略在此模块进行定义: URL管理器:负责URL的管理,包括 ...
- MySQL高级语句(一)
一.MySQL高级进阶SQL 语句 1.SELECT 2.DISTINCT 3.WHERE 4.AND.OR 5.IN 6.BETWEEN 7.通配符.LIKE 8.ORDER BY 9.| | 连 ...
- ysoserial payloads/JRMPClient
ysoserial payloads/JRMPClient 环境:JDK8u102 payloads/JRMPClient可以配合exploit/JRMPListener模块来使用 1.在自己服务器上 ...
- 如何解决浮动元素高度塌陷---CSS
解决高度塌陷问题的方法: 方法一. //给父元素添加声明 overflow:hidden; 缺点:回隐藏溢出的元素: 方法二. 在浮动的元素下添加空div标签,并给该元素添加声明: clear:bot ...
- PHP中的PDO操作学习(二)预处理语句及事务
今天这篇文章,我们来简单的学习一下 PDO 中的预处理语句以及事务的使用,它们都是在 PDO 对象下的操作,而且并不复杂,简单的应用都能很容易地实现.只不过大部分情况下,大家都在使用框架,手写的机会非 ...
- [原创]OpenEuler20.03安装配置PostgreSQL13.4详细图文版
OpenEuler安装配置PostgreSQL 编写时间:2021年9月18日 作者:liupp 邮箱:liupp@88.com 序号 更新内容 更新日期 更新人 1 完成第一至三章内容编辑: 202 ...
- 告别Kafka Stream,让轻量级流处理更加简单
一说到数据孤岛,所有技术人都不陌生.在 IT 发展过程中,企业不可避免地搭建了各种业务系统,这些系统独立运行且所产生的数据彼此独立封闭,使得企业难以实现数据共享和融合,并形成了"数据孤岛&q ...
- 重新整理 .net core 周边阅读篇————AspNetCoreRateLimit[一]
前言 整理了一下.net core 一些常见的库的源码阅读,共32个库,记100余篇. 以下只是个人的源码阅读,如有错误或者思路不正确,望请指点. 正文 github 地址为: https://git ...