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 相关文章推荐
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
vue ssr 指南详读
Jun 29 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
vue动画效果实现方法示例
Mar 18 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中对数据库操作的封装
2006/10/09 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
python实现rest请求api示例
2014/04/22 Python
Django中URLconf和include()的协同工作方法
2015/07/20 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
Python的形参和实参使用方式
2019/12/24 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
vue路由实现登录拦截
2021/03/24 Vue.js
体育教育专业自荐信范文
2013/12/20 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript