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 数组的 uniq 方法
Jan 23 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
js常用正则表达式集锦
May 17 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 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
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
中职生自荐信
2013/10/13 职场文书
小饰品店的创业计划书范文
2013/12/28 职场文书
工厂实习感言
2014/01/14 职场文书
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android
MySQL限制查询和数据排序介绍
2022/03/25 MySQL