javascript中关于类型判断的一些疑惑小结


Posted in Javascript onOctober 14, 2018

前言

类型判断是我们在日常工作中经常会遇到的一个功能,本文将给大家详细介绍关于javascript类型判断的相关内容,下面话不多说了,来一起看看详细的介绍吧

Javascript中数据类型分为两种:

  • 简单数据类型:Undefined, NULL, Boolean, Number, String
  • 复杂数据类型:Object

接下来我们就来看看怎么做数据类型判别吧?

首先来看看 typeof

Type Result
Undefined "undefined"
Null "object" (see below)
Boolean "boolean"
Number "number"
String "string"
Symbol (new in ECMAScript 2015) "symbol"
Host object (provided by the JS environment) Implementation-dependent
Function object (implements [[Call]] in ECMA-262 terms) "function"
Any other object "object"

来点code demo吧

let a = undefined;
typeof a
"undefined"

let b = false;
typeof b
"boolean"

let c = 12;
typeof c
"number"

let d = '12';
typeof d
"string"

let f = function () {};
typeof f
"function"

接下来我们就来看看那些奇怪的现象吧

let str = new String('abc');
typeof str
"object"

let num = new Number(12);
typeof num
"object"

var func = new Function();
typeof func; 
"function"

typeof null
"object"

使用构造函数创建的变量,使用typeof判断会返回“object”结果,但是Function函数例外,由它创建的变量typeof返回的是“function”

接着就来说说typeof null == "object"。这个相信前端开发的小伙伴都知道是这个结果了,But why? 这其实是javascript第一个版本就存在的一个bug,历史原因可以看看这篇文章The history of typeof null

关于如何判断数组

let arr = [1, 2, 3];
typeof arr
"object"

上面这个结果大家应该不陌生,那该如何正确判断数组类型呢

1、instanceof

arr instanceof Array //true

2、isArray

Array.isArray(arr) // true

3、constructor.name

arr.constructor.name // "Array"

第三种用法用的人应该比较少,不少前端的的小伙伴都没用过。对于复杂类型Object,它的每个实例都有constructor属性。

instanceof vs isArray

当检测Array实例时, Array.isArray 优于 instanceof,因为Array.isArray能检测iframes.

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3); // [1,2,3]

// Correctly checking for Array
Array.isArray(arr); // true
// Considered harmful, because doesn't work though iframes
arr instanceof Array; // false

这段代码是从MDN copy的。补充以下结果,发现第三种方法constructor.name也能正确判断出。

arr.constructor.name //"Array"

关于NaN

使用isNaN判断NaN。

isNaN(1/'a') // true

我们知道NaN == NaN结果是false,那如何判断两个NaN变量呢?

比较两个NaN变量,使用es6的Object.is()即可。

let nan1 = NaN
let nan2 = NaN
Object.is(nan1, nan2)
true

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
js实现登录时记住密码的方法分析
Apr 05 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 #Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 #Javascript
详解ES6 Symbol 的用途
Oct 14 #Javascript
javascript实现文本框标签验证的实例代码
Oct 14 #Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 #Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 #Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 #Javascript
You might like
浅析PHP中Collection 类的设计
2013/06/21 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
javascript 动态创建表格
2015/01/08 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
Python的语言类型(详解)
2017/06/24 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
python数据化运营的重要意义
2019/11/25 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
通过代码实例了解Python异常本质
2020/09/16 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
Java面试题汇总
2015/12/06 面试题
幼儿园大班评语大全
2014/04/17 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers