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

所属分类: 网络编程 / JavaScript 阅读数: 2070
收藏 0 赞 0 分享

前言

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

数据类型

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

原始类型中两个比较特殊的就是 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数据类型和判断方法的资料请关注脚本之家其它相关文章!

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多