详解JavaScript数据类型和判断方法


Posted in Javascript onSeptember 04, 2020

前言

JavaScript 中目前有 7 种基本(原始primitives)数据类型 UndefinedNullBooleanNumberStringBigIntSymbol,以及一种引用类型 ObjectObject 中又包括 FunctionDateJSONRegExp等,除了 7 种原始类型,其他的所有能够用 new 实例化的内置类型都是 Object 构造的。

数据类型

对于数据了类型我们可以通过 typeof 运算符来判断,具体结果看下图。

详解JavaScript数据类型和判断方法

原始类型中两个比较特殊的就是 UndefinedNull,他们两个类型都只有一个值就是 undefinednull

Undefined

undefined 一般表示我们未对变量进行初始化。使用 typeof 操作符的时候,如果是未声明变量,同样也会返回 undefined,再比如未设置返回值的函数执行的结果是 undefined,未设置的参数也会被默认为 undefined。最后还有一点需要注意的是,undefined 并不是 js 的保留字,并且是全局对象的一个属性,在浏览器环境中就是 window.undefined。当在局部环境中,我们是可以自己给 undefined 属性赋值的,也就是重写 undefined,所以为了确保我们使用的 undefined 是未被重写的,我们可以使用 void 0 来代替。

Null

null 可以简单理解为一个未被创建的对象,比如我们使用 document.getElementById 并没有找到对应元素的时候就会返回 nullnullundefined 有一些区别,在转换为 Number 的时候,null 会转换为 0 undefined 会转换为 NaN,执行 typeof 运算的时候,undefined返回 undefinednull 返回 object。使用 == 判断两者相等会返回 true,所以为了防止误判一般我们使用全等 ===null 是所有对象原型链的终点,Object.prototype.__proto__ === null

关于 null 的使用,当我们声明一个变量是用来存储对象我们可以先赋值为 null,当一个对象不再需要的时候,我们可以设置为 null 解除这个引用。

Symbol 和 BigInt

这两个都是 ES6 新增的原始数据类型,Symbol 类型的数据通过 Symbol() 方法的执行产生,不过需要注意的是 Symbol 不能作为构造函数,每个从 Symbol() 返回的 symbol 值都是唯一的。一个 symbol 值能作为对象属性的标识符;这是该数据类型仅有的目的。

而 BigInt 则是为了精确表示超出双精度浮点数的最大安全表示范围的大数而新增的基本数据类型。

判断数据类型的方法

typeof 运算符

最简单的判断数据类型的方法是 typeof 运算符,返回值为字符串。typeof 的缺点是除了 Function 以外的其他所有对象的返回值都是 object (null 的返回值也是 object),如果我们需要区分不同的对象,就无法使用 typeof。

instanceof 运算符

instanceof 运算符是检测构造函数的原型是否出现在某个对象的原型链上。通过 instanceof 运算符我们可以实现对 Object 类型的细分,确定属于哪种对象。但是 instanceof 的缺点是只能对对象进行检测,对于基本数据类型的实例无法检测(字面量无法检测,但是通过基本包装类型的构造函数创建的基本类型可以进行检测)。

constructor 属性

利用实例的 constructor 属性来辅助判断实例的数据类型也是一种手段。一般来说,实例本身是没有 constructor 属性的,我们所看到的属性都是 实例.__proto__.constructor,换言之也就是实例的构造函数,这种方式对基本数据类型也是有效的。这种方法的一个比较大的问题是 constructor 属性是个不受保护的属性,随时可能被更改,我们既可以给实例增加 constructor 属性,也可以修改构造函数的 prototype 的引用,也可以直接修改原型的 constructor 属性。

Object.prototype.toString.call()

这是最安全准确的检测数据类型的方法,每一种数据类型的构造函数的原型上都有 toString 方法,但是除了 Object.prototype上的 toString 是用来返回当前实例所属类的信息(检测数据类型的),其余的都是转换为字符串的。该方法可以准确检测所有内置类型。自定义类型的返回值为 Object Object

let toString = Object.prototype.toString //=>Object.prototype.toString

console.log(toString.call(10)); //=>"[object Number]"
console.log(toString.call(NaN)); //=>"[object Number]"
console.log(toString.call("xxx")); //=>"[object String]"
console.log(toString.call(true)); //=>"[object Boolean]"
console.log(toString.call(null)); //=>"[object Null]"
console.log(toString.call(undefined)); //=>"[object Undefined]"
console.log(toString.call(Symbol())); //=>"[object Symbol]"
console.log(toString.call(BigInt(10))); //=>"[object BigInt]"
console.log(toString.call({xxx:'xxx'})); //=>"[object Object]"
console.log(toString.call([10,20])); //=>"[object Array]"
console.log(toString.call(/^\d+$/)); //=>"[object RegExp]"
console.log(toString.call(function(){})); //=>"[object Function]"

以上就是详解JavaScript数据类型和判断方法的详细内容,更多关于JavaScript数据类型和判断方法的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
js重写方法的简单实现
Jul 10 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
node.js博客项目开发手记
Mar 16 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
vue将data恢复到初始状态 && 重新渲染组件实例
Sep 04 #Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 #Javascript
我所理解的JavaScript中的this指向
Sep 04 #Javascript
JS运算符优先级与表达式示例详解
Sep 04 #Javascript
vue中的循环对象属性和属性值用法
Sep 04 #Javascript
JavaScript逻辑运算符相关总结
Sep 04 #Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 #Javascript
You might like
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
php解析xml方法实例详解
2015/05/12 PHP
初识ThinkPHP控制器
2016/04/07 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
普天C++笔试题
2016/03/20 面试题
餐饮加盟计划书
2014/01/10 职场文书
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
python分分钟绘制精美地图海报
2022/02/15 Python
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python