基于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 相关文章推荐
基于jQuery的实现简单的分页控件
Oct 10 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
JavaScript window.location对象
Nov 14 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
Vuex新手的理解与使用详解
May 31 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
JS 事件机制完整示例分析
Jan 15 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 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
php 浮点数比较方法详解
2017/05/05 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
如何在PHP中使用数组
2020/06/09 PHP
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
js实现批量删除功能
2020/08/27 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
使用Python抓取模板之家的CSS模板
2015/03/16 Python
python3操作mysql数据库的方法
2017/06/23 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
公关关系专员的自我评价分享
2013/11/20 职场文书
小学后勤管理制度
2014/01/14 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
学校运动会报道稿
2014/09/23 职场文书
个人委托书范文
2015/01/28 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
法律意见书范本
2015/06/04 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS