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语言中的Literal Syntax特性分析
Mar 08 Javascript
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
从零学JS之你需要了解的几本书
May 19 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
Vue Element校验validate的实例
Sep 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
Search Engine Friendly的URL设计
2006/10/09 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
HTML的select控件美化
2017/03/27 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
koa源码中promise的解读
2018/11/13 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
Python基础中所出现的异常报错总结
2016/11/19 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
python机器学习之随机森林(七)
2018/03/26 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
python selenium xpath定位操作
2020/09/01 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
《风筝》教学反思
2014/04/10 职场文书
住房租房协议书
2014/08/20 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
创业计划书之农家乐
2019/10/09 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python