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自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
跟我学习javascript的for循环和for...in循环
Nov 18 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
js 开发之autocomplete="off"在chrom中失效的解决办法
Sep 28 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
通过循环优化 JavaScript 程序
Jun 24 Javascript
Vue watch响应数据实现方法解析
Jul 10 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
新闻分类录入、显示系统
2006/10/09 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
php查看网页源代码的方法
2015/03/13 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
php中关于换行的实例写法
2019/09/26 PHP
许愿墙中用到的函数
2006/10/07 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
详解Vue中过度动画效果应用
2017/05/25 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
python实现排序算法
2014/02/14 Python
Python单例模式的两种实现方法
2017/08/14 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
详解python中的index函数用法
2019/08/06 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
诉前财产保全担保书
2014/05/20 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
房产公证委托书范本
2014/09/20 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
Python基础知识学习之类的继承
2021/05/31 Python