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 相关文章推荐
JS location几个方法小姐
Jul 09 Javascript
使用js 设置url参数
Jul 08 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 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解压文件代码实现php在线解压
2014/02/13 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
PHP实现简单的计算器
2020/08/28 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
javascript实现的listview效果
2007/04/28 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
简化Python的Django框架代码的一些示例
2015/04/20 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
python程序如何进行保存
2020/07/03 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
python 决策树算法的实现
2020/10/09 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
请介绍一下WSDL的文档结构
2013/03/17 面试题
安全保证书范文
2014/04/29 职场文书
学生个人总结范文
2015/02/15 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers