脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript类型判断

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

 更新时间：2018年10月14日 15:23:26   作者：ylzsmallsun  
这篇文章主要给大家介绍了关于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

总结

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

您可能感兴趣的文章:

相关文章

  • 原生JS实现微信通讯录

    原生JS实现微信通讯录

    这篇文章主要为大家详细介绍了原生JS实现微信通讯录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-06-06
  • ES6 如何改变JS内置行为的代理与反射

    ES6 如何改变JS内置行为的代理与反射

    这篇文章主要介绍了ES6 如何改变JS内置行为的代理与反射，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • JS实现的多张图片轮流播放幻灯片效果

    JS实现的多张图片轮流播放幻灯片效果

    这篇文章主要介绍了JS实现的多张图片轮流播放幻灯片效果,实例分析了js图片轮播插件的实现代码与具体使用方法,需要的朋友可以参考下
    2016-07-07
  • ES6 关键字 let 和 ES5 及关键字 var 的区别解析

    ES6 关键字 let 和 ES5 及关键字 var 的区别解析

    var可以穿透控制语句、条件语句这样的作用域，导致变量冲突经常发生，这篇文章主要介绍了ES6 关键字 let 和 ES5 及关键字 var 的区别,需要的朋友可以参考下
    2022-09-09
  • 微信小程序实现吸顶特效

    微信小程序实现吸顶特效

    这篇文章主要为大家详细介绍了微信小程序实现吸顶特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JavaScript函数封装随机颜色验证码(完整代码)

    JavaScript函数封装随机颜色验证码(完整代码)

    这篇文章主要介绍了JavaScript函数封装随机颜色验证码(完整代码),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-12-12
  • JavaScript实现指定数量的并发限制的示例代码

    JavaScript实现指定数量的并发限制的示例代码

    这篇文章主要介绍了JavaScript实现指定数量的并发限制的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • JS搜狐面试题分析

    JS搜狐面试题分析

    这篇文章主要介绍了JS搜狐面试题,涉及javascript数组、字符串及面向对象程序设计相关技巧,需要的朋友可以参考下
    2016-12-12
  • JavaScript表格常用操作方法汇总

    JavaScript表格常用操作方法汇总

    这篇文章主要介绍了JavaScript表格常用操作方法,实例汇总了javascript中表格操作的创建、添加、删除、遍历等常用操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • js实现内容显示并使用json传输数据

    js实现内容显示并使用json传输数据

    这篇文章主要为大家详细介绍了js实现内容显示并使用json传输数据的方法，感兴趣的小伙伴们可以参考一下
    2016-03-03

最新评论