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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
JS多物体 任意值 链式 缓冲运动
Aug 10 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
javascript实现原生ajax的几种方法介绍
Sep 21 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
基于canvas实现手写签名(vue)
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 裁剪图片成固定大小代码方法
2009/09/09 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
Python中字典的基础知识归纳小结
2015/08/19 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
python复制文件到指定目录的实例
2018/04/27 Python
基于python实现学生管理系统
2018/10/17 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
实习生自我鉴定
2013/12/12 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
文明寝室申报材料
2014/05/12 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
外出学习心得体会范文
2016/01/18 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
Mysql基础知识点汇总
2021/05/26 MySQL
Python面向对象之内置函数相关知识总结
2021/06/24 Python
Mysql 文件配置解析介绍
2022/05/06 MySQL