当前位置:网站首页 > 数据科学与大数据 > 正文

js中,封装一个判断所有数据类型的方法getType,入参为任意变量,返回值为该参数类型的字符串形式

js中,封装一个判断所有数据类型的方法getType,入参为任意变量,返回值为该参数类型的字符串形式

1、封装方法

基本数据类型,包括:undefined/null/string/number/boolean。

  • typeof 对null值进行判断时,返回的是object。因为null是一个空数据的地址,该方法误判其为object,然后这个错误保留。
  • 引用数据类型,typeof打印都是有 object,对常用的数据类型(Array/Date/RegExp)进行 typeof 操作时,返回的也只是 object,这就导致我们在使用时没法准确的区分了。因此我们需要一个方法,能够返回更详细的数据类型信息。

tool.js

<script> function getType(data) { 
    let type; type = typeof data; if (type != 'object') { 
    return type; } else { 
    if (data === null) { 
    return 'null' } let typeArr = [Date, Array, RegExp, Error, Object]; for (let i = 0, len = typeArr.length; i < len; i++) { 
    if (data instanceof typeArr[i]) { 
    return typeArr[i].name.toLowerCase() } } } } console.log(getType([1,2])) // array console.log(getType('')) // string console.log(getType(39)) // number console.log(getType(null)) // null console.log(getType(undefined)) // undefined console.log(getType({ 
   id:12})) // object </script> 
2、检测数据类型的方法
2.1、typeof

typeof操作符返回一个用来表示数据类型的字符串,即:typeof运算之后的结果都是字符串类型。

注意:typeof是一个操作符,不是一个函数!

key value
string 字符串
boolean 布尔值
number 数值
undefined 未定义
object 对象,数组或null
function 函数
symbol symbol
实例
var num=123; var str="123"; var boo=true; var und=undefined; var arr=[]; var obj={ 
   }; var nul=null; var fun=function(){ 
   }; var s = Symbol(); console.log(typeof num); //"number" console.log(typeof str); //"string" console.log(typeof boo); //"boolean" console.log(typeof und); //"undefined" console.log(typeof arr); //"object" console.log(typeof obj); //"object" console.log(typeof nul); //"object" console.log(typeof fun); //"function" 
  • 优点
    能检测出number,boolean,string,symbol,undefined,function,object
  • 缺点
    基本数据类型,null返回object 其他都可以返回正确结果
    引用数据类型,除了function以外,都返回object
    function返回function类型
2.2、instanceof

instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置.
语法: object instanceof 构造函数
返回值:如果是这个构造函数构造出来的,返回true,否则返回false。

实例
console.log(1 instanceof Number); //false console.log("liuqiao" instanceof String); //false console.log(true instanceof Number); //false console.log(function(){ 
   } instanceof Function); //true console.log({ 
   } instanceof Object);//true console.log([1,2,3] instanceof Array);//true 

结论:

instanceof 只要该实例的父亲辈,爷爷辈以及祖先辈,都会返回true

  • 优点
    可以检测出某特定的引用类型具体是某种类型
  • 缺点
    只能检测引用类型
2.3、constructor

每个对象都有一个隐藏属性constructor,该属性指向对象的构造函数(类)

实例
console.log(("1").constructor === String);//true console.log((1).constructor === Number);//true console.log((true).constructor === Boolean);//true console.log(([]).constructor === Array);//true console.log((function () { 
    }).constructor === Function);//true console.log(({ 
   }).constructor === Object);//true 
  • 优点
    基本上基本数据类型和引用数据类型都可以检测,但是除了自定义的对象外
  • 缺点
    为什么说除了自定义对象外都可以检测 ,因为检测自定义对象时不可靠!
2.4、Object.prototype.toString.call()
实例
 var m = Object.prototype.toString; console.log(m.call("aaa"));//[object String] console.log(m.call(1));//[object Number] console.log(m.call(true));//[object Boolean] console.log(m.call(null));//[object Null] console.log(m.call(undefined));//[object Undefined] console.log(m.call([]));//[object Array] console.log(m.call(function () { 
    }));//[object Function] console.log(m.call({ 
   }));//[object Object] console.log(m.call(new Date));//[object Date] console.log(m.call(/\d/));//[object RegExp] function Person() { 
    }; console.log(m.call(new Person));//[object Object] 
  • 优点

基本上的数据类型都可以检测

  • 缺点

自定义的类是不能准确判断的,这里可以采用instanceof

Object.prototype.toString()本身是允许被修改的,而我们目前所讨论的关于Object.prototype.toString()这个方法的应用都是假设toString()方法未被修改为前提的。

  • 扩展

我们发现上面打印[object String]类似这种不太完美,比如我想直接打印string呢

到此这篇js中,封装一个判断所有数据类型的方法getType,入参为任意变量,返回值为该参数类型的字符串形式的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • js之对象分类、数据类型分类和存储位置、函数 function介绍、变量的作用域2024-11-27 17:00:05
  • Node学习(五)022-处理静态资源——自定义中间件处理post提交的数据 & 将接收到的数据,赋值给req.body & 使用express和body-parser中间件处理post提交数据2024-11-27 17:00:05
  • Node学习(六)03-SQL语句——添加数据insert into、修改数据update、删除数据delete from、连接查询select from之内连接、左连接、右连接和定义别名2024-11-27 17:00:05
  • Node学习(七)01-mysql基本用法——Node中使用MySQL模块的5个步骤 & select查询语句-查询的结果是一个数组,数组中的每个对象就是一行数据 & SQL中有多个占位符2024-11-27 17:00:05
  • Node学习(七)02-mysql基本用法——insert添加语句之基本添加、带占位符的形式 & SQL中query方法为问号传递一个对象添加sql数据2024-11-27 17:00:05
  • 表格当前行-对象数据传递给弹框 & 父组件传对象数据给子组件 & 接口写法-增删改查-post-get-delete2024-11-27 17:00:05
  • jdbc使用java连接数据库学习笔记2024-11-27 17:00:05
  • 《第一行代码》 第七章:跨程序共享数据-内容提供器2024-11-27 17:00:05
  • 《第一行代码》 第六章:数据库与存储方案2024-11-27 17:00:05
  • 响应式数据2024-11-27 17:00:05
  • 全屏图片