javascript中关于类型判断的一些疑惑小结

前言

类型判断是我们在日常工作中经常会遇到的一个功能，本文将给大家详细介绍关于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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 通过jQuery学习js类型判断的技巧

    通过jQuery学习js类型判断的技巧

    1. isFunction中typeof的不靠谱 源码: var isFunction = function isFunction( obj ) { // Support: Chrome <=57, Firefox <=52 // In some browsers, typeof returns "function" for HTML <object> elements // (i.e., `typeof document.createElement( &quo

  • 关于JavaScript和jQuery的类型判断详解

    对于类型的判断,JavaScript用typeof来进行. 栗子: console.log(typeof null); //object console.log(typeof []); //object console.log(typeof {}); //object console.log(typeof new Date()); //object console.log(typeof new Object); //object console.log(typeof function(){});

  • jQuery中使用validate插件校验表单功能

    一.功能效果 二.部分特殊规则 2.1 错误信息位置更改 在表单某选项中增加代码 <label class="error" for="表单中选项的name"></label> 例如 : 性别必选 <td> <input type="radio" id="male" value="m" name="sex"/>男 <input type

  • js的各种数据类型判断的介绍

    1.typeof typeof 用来判断各种数据类型,有两种写法:typeof xxx , typeof(xxx) 例如: typeof 2 输出 number typeof null 输出 object typeof {} 输出 object typeof [] 输出 object typeof (function(){}) 输出 function typeof undefined 输出 undefined typeof '222' 输出 string typeof true 输出 boole

  • jquery+php后台实现省市区联动功能示例

    jquery+php后台实现省市区联动功能示例

    本文实例讲述了jquery+php后台实现省市区联动功能.分享给大家供大家参考,具体如下: JS: $("#from_prov_id,#from_city_id").change(function () { var current_prov_id = $(this).val(); var _this = this; $.ajax({ type:'get', url:"{:url('getarea')}?id="+current_prov_id, success:fu

  • javascript中关于类型判断的一些疑惑小结

    前言 类型判断是我们在日常工作中经常会遇到的一个功能,本文将给大家详细介绍关于javascript类型判断的相关内容,下面话不多说了,来一起看看详细的介绍吧 Javascript中数据类型分为两种: 简单数据类型:Undefined, NULL, Boolean, Number, String 复杂数据类型:Object 接下来我们就来看看怎么做数据类型判别吧? 首先来看看 typeof Type Result Undefined "undefined" Null "obje

  • isArray()函数(JavaScript中对象类型判断的几种方法)

    1) typeof 运算符 typeof 是一元运算符,返回结果是一个说明运算数类型的字符串.如:"number","string","boolean","object","function","undefined"(可用于判断变量是否存在). 但 typeof 的能力有限,其对于Date.RegExp类型返回的都是"object".如: typeof {}; //

  • JavaScript中值类型和引用类型的区别

    JavaScript中值类型和引用类型的区别

    JavaScript的数据类型分为两类:原始类型和对象类型.其中,原始类型包括:数字.字符串和布尔值.此外,JavaScript中还有两个特殊的原始值:null和undefined,它们既不是数字也不是字符串,更不是布尔值.它们通常分别代表了各自特殊类型的唯一成员.JavaScript中除了数字.字符串.布尔值.null和undefined之外的就是对象了. JavaScript中值类型和引用类型的区别 JavaScript中的值类型的值是不可变的: 任何方法都无法改变值类型的值.数字.布尔值.

  • JavaScript中boolean类型之三种情景实例代码

    实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

  • JavaScript中“基本类型”之争小结

    JavaScript中“基本类型”之争小结

    前端面试中常被问到的问题之一就是"JavaScript的基本类型有几种?". 有的回答"数字.字符串.布尔",有的可能会再加上"Null.Undefined".而有人可能认为"object"也是基本类型.到底是什么样呢? 所谓"基本类型(primitive types)"的概念ECMAScript(V3,V5)中压根就没有,它只是将类型分为6种. ECMAScript只提到类型,用types表示,在V3,V

  • JavaScript中的50+个实用工具函数小结

    JavaScript可以做很多出色的事情,本篇文章给大家整理50+个实用工具函数,可以帮助你提高工作效率并可以帮助调试代码 1.isStatic: 检测数据是不是除了symbol外的原始数据. function isStatic(value) { return ( typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'undefined'

  • JavaScript中find()和 filter()方法的区别小结

    目录 前言 JavaScript find() 方法 JavaScript filter() 方法 find() 和 filter() 的区别与共点 直接上代码 总结 前言 JavaScript 在 ES6 上有很多数组方法,每种方法都有独特的用途和好处. 在开发应用程序时,大多使用数组方法来获取特定的值列表并获取单个或多个匹配项. 在列出这两种方法的区别之前,我们先来一一了解这些方法. JavaScript find() 方法 ES6 find() 方法返回通过测试函数的第一个元素的值.如果没

  • Javascript中常用类型的格式化方法小结

    前言 相信大家都知道因为JavaScript是弱类型的语言,项目写大了会非常难以把控,容易出各种问题.幸好有强类型的TypeScript可以很大程度上弥补这一缺陷,但TypeScript提供的强类型是编译阶段的,虽然绝大部分类型相关的问题在编译阶段都能被覆盖到,但对于小部分在运行时才会出错的错误还是无能为力. 例如以下几种常见的情况: 1.定义为number的属性,赋值的时候,如果赋值源没有定义强类型,这样就会绕过编译检查的阶段,到运行时发现可能传进来的是个字符串.类内部再一顿加减乘除,很容易导

  • JavaScript中值类型与引用类型实例说明

    复制代码 代码如下: <script type="text/javascript"> var str = 'abced'; var obj = new String(str); function newToString() { return 'hello,world'; } function func(val) { val.toString = newToString; } func(str); //ps:实际只传入了str的值,因此对它的toString修改是无意义的 传

  • 浅析JavaScript中的类型和对象

    JavaScript是基于对象的,任何元素都可以看成对象.然而,类型和对象是不同的.本文中,我们除了讨论类型和对象的一些特点之外,更重要的是研究如何写出好的并且利于重用的类型.毕竟,JavaScript这种流行的脚本语言如果能够进行良好的封装,并形成一个庞大的类型库,对于重用是非常有意义的. 网上对于prototype的文章很多,一直没明白核心的思想.最后写了很多例子代码后才明白:prototype只能用在类型上. 以下是一些关于类型和对象的例子,大家看完例子后可能更容易理解类型和对象之间的联系

随机推荐