JavaScript 数据类型检测总结
JavaScript 数据类型检测总结
原文:https://blog.csdn.net/q3254421/article/details/85483462
在js中,有四种用于检测数据类型的方式,分别是:
- typeof 用来检测数据类型的运算符
- instanceof 检测一个实例是否属于某个类
- constructor 构造函数
- Object.prototype.toString.call() 原型链上的Object对象的toString方法
- 下面我们就来分别介绍一下上面四种方法的适用场景和局限性。
typeof 用来检测数据类型的运算符
使用typeof检测数据类型,返回值是字符串格式。能够返回的数据类型
是:“number”,“string”,“bolean”,“undefined”,“function”,“object”。
- <script>
- console.log(typeof(1)); //number
- console.log(typeof('hello')); //string
- console.log(typeof(true)); //boolean
- console.log(typeof(undefined)); //undefined
- console.log(typeof(null)); //object
- console.log(typeof({})); //object
- console.log(typeof(function() {})); //function
- </script>
局限性:
- typeof (null); //“object”。这是由于在js中,null值表示一个空对象指针,而这也正是使用typeof操作 符检测null值时会返回"object"的原因。
- 不能具体的细分是数组还是正则,还是对象中其他的值,因为使用typeof检测数据类型,对于对象数据类型的所有的值,最后返回的都是"object"
instanceof 检测某一个实例是否属于某个类
instanceof 主要用来弥补 typeof 不能检测具体属于哪个对象的局限性。
- <script>
- let arr = [1,2,3];
- let reg = /\w/;
- console.log(arr instanceof Array); //true
- console.log(arr instanceof Object); //true
- console.log(reg instanceof RegExp); //true
- console.log(reg instanceof Object); //true
- </script>
局限性:
- 不能用于检测和处理字面量方式创建出来的基本数据类型值,即原始数据类型
- instanceof的特性:只要在当前实例的原型链上的对象,我们用其检测出来都为true
- 在类的原型继承中,我们最后检测出来的结果未必正确
constructor 构造函数
是函数原型上的属性,该属性指向的是构造函数本身。
作用和instsnceof非常相似,与instanceof不同的是,不仅可以处理引用数据类型,还可以处理原始数据类型。
- <script>
- let num = 12;
- let obj = {};
- console.log(num.constructor == Number);//true
- console.log(obj.constructor == Object);//true
- </script>
但是要注意一点的是,当直接用(对象字面量或原始数据).constructor时,最好加上()。为了便于理解,我们来看一个例子。
- <script>
- 1.constructor === Number; //报错,Invalid or unexceped token
- (1).constructor === Number; //true
- {}.constructor === Number; //报错,Invalid or unexceped token
- ({}).constructor === Number; //true
- </script>
这主要是由于js内部解析方式造成的,js会把1.constructor解析成小数,这显然是不合理的,小数点后应该是数字,因此就会引发报错。js会把{}解析成语句块来执行,这时后面出现一个小数点显然也是不合理的,因此也会报错。为了解决这个问题,我们可以为表达式加上()使js能够正确解析。
局限性:
- 我们可以把类的原型进行重写,在重写的过程中很可能把之前constructor给覆盖了,这样检测出来的结果就是不准确的。
- <script>
- function Fn() {};
- Fn.prototype = new Array;
- var f = new Fn;
- //f是一个函数,按道理说他的构造函数应该是Function,但是修改其原型链后,它的constructor变成了Array.
- console.log(f.constructor == Array); //true
- </script>
Object.prototype.toString.call() 原型链上的Object对象的toString方法
Object.prototype.toString的作用是返回当前方法的执行主体(方法中的this)所属类的详细信息,是最全面也是最常用的检测数据类型的方式。
返回值的类型为string类型。
- <script>
- console.log(Object.prototype.toString.call(1)); //[object Number]
- console.log(Object.prototype.toString.call(/^sf/)); //[object RegExp]
- console.log(Object.prototype.toString.call("hello")); //[object String]
- console.log(Object.prototype.toString.call(true)); //[object Boolean]
- console.log(Object.prototype.toString.call(null)); //[object Null]
- console.log(Object.prototype.toString.call(undefined)); //[object Undefined]
- console.log(Object.prototype.toString.call(function() {})); //[object Function]
- console.log(typeof(Object.prototype.toString.call(function() {}))); //string
- </script>
=============== End
JavaScript 数据类型检测总结的更多相关文章
- javascript 数据类型 -- 检测
一.前言 在上一篇博文中 Javascript 数据类型 -- 分类 中,我们梳理了 javascript 的基本类型和引用类型,并提到了一些冷知识.大概的知识框架如下: 这篇博文就讲一下在写代码的过 ...
- JavaScript: 数据类型检测
由于JavaScript是门松散类型语言,定义变量时没有类型标识信息,并且在运行期可以动态更改其类型,所以一个变量的类型在运行期是不可预测的,因此,数据类型检测在开发当中就成为一个必须要了解和掌握的知 ...
- JavaScript数据类型检测 数组(Array)检测方式
前言 对于确定某个对象是不是数组,一直是数组的一个经典问题.本文专门将该问题择出来,介绍什么才是正确的javascript数组检测方式 typeof 首先,使用最常用的类型检测工具--typeof运算 ...
- Javascript数据类型检测
Javascript有5种简单数据类型和一种复杂数据类型 基本数据类型:String,Boolean,Number,Undefined, Null 引用数据类型:Object(Array,Date,R ...
- JavaScript数据类型检测详解
//JS该如何检测数据的类型呢? //使用关键字: typeof //输出结果依次为:'number','string','boolean'. console.log(typeof 17); cons ...
- javascript数据类型检测方法
一.字符串.数字.布尔值.undefined的最佳选择市使用 typeof 运算符进行检测: 对于字符串,typeof 返回"string" 对于数字,typeof 返回" ...
- JavaScript系列文章:不能不看的数据类型检测
由于JavaScript是门松散类型语言,定义变量时没有类型标识信息,并且在运行期可以动态更改其类型,所以一个变量的类型在运行期是不可预测的,因此,数据类型检测在开发当中就成为一个必须要了解和掌握的知 ...
- javascript 中检测数据类型的方法
typeof 检测数据类型 javascript 中检测数据类型有好几种,其中最简单的一种是 typeof 方式.typeof 方法返回的结果是一个字符串.typeof 的用法如下: typeof v ...
- 【JavaScript框架封装】数据类型检测模块功能封装
数据类型检测封装后的最终模块代码如下: /*数据类型检验*/ xframe.extend(xframe, { // 鸭子类型(duck typing)如果它走起路来像鸭子,叫起来也是鸭子,那么它就是鸭 ...
随机推荐
- 创建Web API并使用
昨晚有教一个网友在ASP.NET MVC里,创建Web API和在MVC视图中应用此API. 可以在ASP.NET MVC中,创建程序的model: namespace Insus.NET.Model ...
- SQL查询今天、昨天、7天内、30天 - 转
今天的所有数据:select * from 表名 where DateDiff(dd,datetime类型字段,getdate())=0 昨天的所有数据:select * from 表名 where ...
- Ionic App ActionSheet布局问题
使用 $ionicActionSheet的时候界面不像Ihpnoe手机那样显示的整齐,但是在电脑浏览器里面却是好的,原因还是Ionic自带css的问题,网上的答案是ionic.min.css/ioni ...
- 【强化学习】python 实现 q-learning 迷宫通用模板
本文作者:hhh5460 本文地址:https://www.cnblogs.com/hhh5460/p/10145797.html 0.说明 这里提供了二维迷宫问题的一个比较通用的模板,拿到后需要修改 ...
- [C#]使用Windows Form开发的百度网盘搜索工具
BaiduDiskSearcher 用C#编写的百度网盘搜索工具(.NET4.0 & Visual Studio 2017) 功能 1.搜索任意名称的百度网盘共享文件 2.可以左键双击打开网盘 ...
- 新人入坑Redis必会的吐血总结
新人入坑Redis必会的吐血总结 一.什么是Redis Redis是一个使用C语言开发的开源的高性能的key-value存储系统,我们可以把它近似理解为Java Map.简单来讲,Redis是一种NO ...
- PHP中报500错误时如何查看错误信息
在执行代码中加入下面两行代码即可 ini_set("display_errors","On"); error_reporting(E_ALL);
- M2阶段事后总结报告
会议照片: 设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 开发一个快捷方便的记事本App.从用户体验角度出发,在一般记事本App的基础上进行创新 ...
- 第三个Sprint冲刺第九天(燃尽图)
- activiti-explorer disable demo
https://community.alfresco.com/thread/203012-activiti-explorer engine.properties # demo data propert ...