关于javascript中类型判断的那些疑惑

李增田发布于2019-08-23 12:19 / 650人阅读

摘要：对于复杂类型它的每个实例都有属性。当检测实例时优于因为能检测这段代码是从的。补充以下结果，发现第三种方法也能正确判断出。我们知道结果是那如何判断两个变量呢比较两个变量，使用的即可。

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"

上面这个结果大家应该不陌生，那该如何正确判断数组类型呢

instanceof

arr instanceof Array  //true

isArray

Array.isArray(arr) // true

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

GPU云服务器云服务器 js中判断数据类型关于javascript的问题 js判断时间类型的数据类型 js如何判断类型的数据类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98312.html

JavaScript专题系列20篇正式完结！

摘要：写在前面专题系列是我写的第二个系列，第一个系列是深入系列。专题系列自月日发布第一篇文章，到月日发布最后一篇，感谢各位朋友的收藏点赞，鼓励指正。写在前面 JavaScript 专题系列是我写的第二个系列，第一个系列是 JavaScript 深入系列。 JavaScript 专题系列共计 20 篇，主要研究日常开发中一些功能点的实现，比如防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里...

sixleaves 2019-08-21 17:15 评论0 收藏0
JS程序

摘要：设计模式是以面向对象编程为基础的，的面向对象编程和传统的的面向对象编程有些差别，这让我一开始接触的时候感到十分痛苦，但是这只能靠自己慢慢积累慢慢思考。想继续了解设计模式必须要先搞懂面向对象编程，否则只会让你自己更痛苦。 JavaScript 中的构造函数学习总结。知识只有分享才有存在的意义。是时候替换你的 for 循环大法了~ 《小分享》JavaScript中数组的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 评论0 收藏0
那些年，前端学习之路的疑难杂症（三）：数组和Date的一些梳理

摘要：将指定的数字索引值转换成字符串索引值变成，然后将其作为属性名来用。返回一个由删除元素组成的数组。该方法返回的数组元素是调用的数组的一个子集。使用的函数有四个参数初始值积累值数组元素元素索引数组本身。前言很多人在学习原生JS的过程中会遇到一些疑惑，比如在学习array时，就很容易搞不清哪些方法会改变原来数组，哪些方法不会改变原来数组？再比如很多人会使用new Date()获取时间，却...

xeblog 2019-08-21 11:33 评论0 收藏0
JS编译之 LHS RHS（你不知道的JavaScript 小记一）

摘要：关于两个专业术语的讨论起自对你不知道的一书的阅读学习。遇到，编译器会询问作用域是否已经有一个该名称的变量存在于同一个作用域的集合中。摘录来自你不知道的。 JS 编译之 LHS RHS 一、前言最近和朋友聊技术的时候，聊到 LHS RHS，我竟然没听说过没听说过。。。于是成功引起了我的好奇心。关于两个专业术语的讨论起自对《你不知道的JavaScript》一书的阅读学习。二、编译...

Cristic 2019-08-22 18:41 评论0 收藏0
JavasScript重难点知识

摘要：忍者级别的函数操作对于什么是匿名函数，这里就不做过多介绍了。我们需要知道的是，对于而言，匿名函数是一个很重要且具有逻辑性的特性。通常，匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果...

forsigner 2019-08-21 18:36 评论0 收藏0