前言
类型判断是我们在日常工作中经常会遇到的一个功能,本文将给大家详细介绍关于 类型判断的相关内容,下面话不多说了,来一起看看详细的介绍吧
中数据类型分为两种:
- 简单数据类型:Undefined, NULL, Boolean, Number, String
- 复杂数据类型:
接下来我们就来看看怎么做数据类型判别吧?
首先来看看 typeof
| Type | Result |
|---|---|
| Undefined | "undefined" |
| Null | " " (see below) |
| Boolean | "boolean" |
| Number | "number" |
| String | "string" |
| Symbol (new in ECMA 2015) | "symbol" |
| Host (provided by the JS environment) | Implementation-dependent |
| Function (implements [[Call]] in ECMA-262 terms) | "function" |
| Any other | " " |
来点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
" "
let num = new Number(12);
typeof num
" "
var func = new Function();
typeof func;
"function"
typeof null
" "
使用构造函数创建的变量,使用typeof判断会返回“ ”结果,但是Function函数例外,由它创建的变量typeof返回的是“function”
接着就来说说typeof null == " "。这个相信前端开发的小伙伴都知道是这个结果了,But why? 这其实是 第一个版本就存在的一个bug,历史原因可以看看这篇文章The history of typeof null
关于如何判断数组
let arr = [1, 2, 3]; typeof arr " "
上面这个结果大家应该不陌生,那该如何正确判断数组类型呢
1、instanceof
arr instanceof Array //true
2、isArray
Array.isArray(arr) // true
3、constructor.name
arr.constructor.name // "Array"
第三种用法用的人应该比较少,不少前端的的小伙伴都没用过。对于复杂类型 ,它的每个实例都有constructor属性。
instanceof vs isArray
当检测Array实例时, Array.isArray 优于 instanceof,因为Array.isArray能检测 s.
var = document.createElement(' ');
document.body.appendChild( );
xArray = window. s[window. s.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 s
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的 .is()即可。
let nan1 = NaN let nan2 = NaN .is(nan1, nan2) true
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
继续阅读与本文标签相同的文章
-
云南移动与昆船集团5G项目又有新进展,亮相瑞士第十届全球移动宽带论坛
2026-05-18栏目: 教程
-
功能强大且实用的6个在线网站,好东西,值得分享给大家!
2026-05-18栏目: 教程
-
微软谷歌增强合作 共同推进Chromium的现代化表单控件
2026-05-18栏目: 教程
-
深耕电子行业 帮助客户拿终端订单
2026-05-18栏目: 教程
-
怎样才能做好项目进度管理
2026-05-18栏目: 教程
