基于javascript中的typeof和类型判断(详解)


Posted in Javascript onOctober 27, 2017

typeof

ECMAScript 有 5 种原始类型(primitive type),即 Undefined、Null、Boolean、Number 和 String。我们都知道可以使用typeof运算符求得一个变量的类型,但是对引用类型变量却只会返回object,也就是说typeof只能正确识别基本类型值变量。

var a = "abc";
console.log(typeof a); // "string"
var b = 123;
console.log(typeof b); // "number"
var c = true;
console.log(typeof c); // "boolean"
var d = null;
console.log(typeof d); // "object"
var f = undefined;
console.log(typeof f); // "undefined"
var g;
console.log(typeof g); // "undefined"

console.log(typeof x); // "undefined"

您也许会问,为什么 typeof 运算符对于 null 值会返回 "object"。这实际上是 JavaScript 最初实现中的一个错误,然后被 ECMAScript 沿用了。现在,null 被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值。

最后一个比较奇怪,typeof一个不存在的变量x居然返回了"object"而不是"undefined"。

我们在来如下代码:

var a = function() { };
console.log(typeof a); // "function"
var b = [1,2,3]; 
console.log(typeof b); // "object"
var c = { };
console.log(typeof c); // "object"

对于数组和对象都返回"object",因此我们日常开发中一个常见需求就是如何判断变量是数组还是对象。

类型判断

类型判断,一般就是判断是否是数组,是否是空对象。这是针对这个需求,我日常用过或见过的判断方法

判断是否是数组

有数组:var a = [1,2,3,4,5];

方法一:

toString.call(a); // "[object Array]"方法二:

a instanceof Array; //true方法三:

a.constructor == Array; //true 第一种方法比较通用,也就是Object.prototype.toString.call(a)的简写。

instanceof和constructor判断的变量,必须在当前页面声明的,比如,一个页面(父页面)有一个框架,框架中引用了一个页面(子页面),在子页面中声明了一个a,并将其赋值给父页面的一个变量,这时判断该变量,Array == object.constructor会返回false;

var a = [1,2,3,4,5];
console.log(toString.call(a)); // "[object Array]"      
console.log(a instanceof Array); //true
console.log(a.constructor == Array); //true

判断是否是空对象

有变量:var obj = {};

方法一:

JSON.stringify(obj); // "{}"通过转换成JSON对象来判断是否是空大括号

方法二:

if(obj.id){ //如果属性id存在....}这个方法比较土,大多数人都能想到,前提是得知道对象中有某个属性。

方法三:

function isEmptyObject(e) { 
var t; for (t in e) return !1; return !0 } //trueisEmptyObject(obj);
//falseisEmptyObject({ "a":1, "b":2});

这个方法是jQuery的isEmptyObject()方法的实现方式。

以上这篇基于javascript中的typeof和类型判断(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
javascript 中的继承实例详解
May 05 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 Javascript
webpack配置之后端渲染详解
Oct 26 #Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 #jQuery
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 #Javascript
node文字生成图片的示例代码
Oct 26 #Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 #Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 #Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 #Javascript
You might like
C# Assembly类访问程序集信息
2009/06/13 PHP
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
纯javascript响应式树形菜单效果
2015/11/10 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
大四本科生的自我评价
2013/12/30 职场文书
2015年班组工作总结
2015/04/20 职场文书
反邪教观后感
2015/06/11 职场文书
门球健将观后感
2015/06/16 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python