【JavaScript】封装可以辨别全部数据类型的方法

标签: 数据类型 分辨数组跟对象 检测数据类型 toString typeof
70人阅读 评论(0) 收藏 举报
分类:

前言:ECMAScript有5中简单数据类型(也称为基本数据类型):Undefined,Null,Boolean,Number和String。还有一种复杂数据类型:object 。而用typeof操作符去分辨这些数据类型是件很让人奔溃的事情。

一、typeof检测数据

var obj = {};
var str = 'string';
var num = 123;
var bool = true;
var arr = [];
var reg = /a-z/;
var fn = function(){};
var obj_null = null;
var undf = undefined;

console.log(typeof obj);		//object
console.log(typeof str);		//string
console.log(typeof num);		//number
console.log(typeof bool);		//boolean
console.log(typeof arr);		//object
console.log(typeof reg);		//object
console.log(typeof fn);			//function
console.log(typeof obj_null);	//object
console.log(typeof undf);	//undefined

这时,除了对象输出的是'object'外,还有数组输出的也是'object',正则reg输出的也是'object',null输出的也是'object'。

二、检测new创建数据类型

var obj2 = new Object();
var obj_str = new String('string');
var obj_num = new Number();
var obj_bool = new Boolean();
var obj_arr = new Array();
var obj_reg = new RegExp();
var obj_fn = new Function();
var obj_date = new Date();

console.log(typeof obj2);		//object
console.log(typeof obj_str);	//object
console.log(typeof obj_num);	//object
console.log(typeof obj_bool);	//object
console.log(typeof obj_arr);	//object
console.log(typeof obj_reg);	//object
console.log(typeof obj_fn);		//function
console.log(typeof obj_date);	//object

这时,除了obj_fn,即通过new Funciton()创建的输出的是'function'外,其他输出的全是'object'。这令人很头疼。

三、封装可以分辨所有数据类型的方法

var typeName = {
	'[object Function]': 'function',
	'[object Boolean]': 'boolean',
	'[object Number]': 'number',
	'[object String]': 'string',
	'[object Object]': 'object',
	'[object RegExp]': 'regExp',
	'[object Array]': 'array',
	'[object Error]': 'error',
	'[object Date]' : 'date'	
};
var toStringFn = Object.prototype.toString;    //获取到对象的toString方法
//通过call 引用toString方法。

function checkType(obj){
	if( obj == null ){
		return String( obj );	//js自带的的String方法,用于检测null和undefined
	}	
	//safari5及之前版本,Chrome7, typeof RegExp返回的是function
	return typeof obj ==='object' || typeof obj === "function" ?
		   typeName[toStringFn.call(obj)]:typeof obj;        
}

用checkType检测数据类型

var obj = {};
var str = 'string';
var num = 123;
var bool = true;
var arr = [];
var reg = /a-z/;
var fn = function(){};
var obj_null = null;
var undf = undefined;

var obj2 = new Object();
var obj_str = new String('string');
var obj_num = new Number();
var obj_bool = new Boolean();
var obj_arr = new Array();
var obj_reg = new RegExp();
var obj_fn = new Function();
var obj_date = new Date();

console.log(checkType(obj));		//object
console.log(checkType(str));		//string
console.log(checkType(num));		//number
console.log(checkType(bool));		//boolean
console.log(checkType(arr));		//array
console.log(checkType(reg));		//regExp
console.log(checkType(fn));			//function
console.log(checkType(obj_null));	//null
console.log(checkType(undf));	//undefined
console.log('-----------------------分界线');
console.log(checkType(obj2));		//object
console.log(checkType(obj_str));	//string
console.log(checkType(obj_num));	//number
console.log(checkType(obj_bool));	//boolean
console.log(checkType(obj_arr));	//array
console.log(checkType(obj_reg));	//regExp
console.log(checkType(obj_fn));		//function
console.log(checkType(obj_date));	//date

这时就可以清晰的检测所有的数据类型了。


相关链接:

全面分析不同数据类型之间的操作问题



查看评论

Javascript面向对象特效&框架封装实战

本套Javascript面向对象课程 主要包括以下四大块内容,通过以下内容安排帮助大家 掌握用面向对象的方式来写程序, 1,掌握面向对象的基本语法 封装 原型与原型链 this 等等 2,使用面向对象封装一些特效 3,使用面向对象实现一个类似于jQuery的小型框架 4,用框架来做特效
  • 2017年02月22日 23:46

javascript中的基本数据类型以及类型检测的几种方法

1.JS中有6种基本的数据类型,JS中的所有操作都是基于这五种基本类型得到的。 (1)Object 对象类型 (2)number 数字类型 (3)String 字符串类型 (4)null...
  • liwusen
  • liwusen
  • 2016-06-11 15:06:48
  • 1185

javascript怎么封装方法

using System; using System.Text; using System.Data; using System.Configuration; using System.Web...
  • u012183378
  • u012183378
  • 2013-10-02 09:31:19
  • 455

[Javascript] 对象的创建与类的封装

1.单个对象创建方法一 var stu = {}; stu.name = 'Luck'; stu.showName = function() { alert(this.name); } 2...
  • xiaohaoyao
  • xiaohaoyao
  • 2015-08-06 12:03:20
  • 977

原生javascript自己封装的常用小方法。

var zycTools = { //使用css选择器选择单个元素 $:function(elem){ return document.querySelector(el...
  • CodingNoob
  • CodingNoob
  • 2017-03-20 17:35:48
  • 1318

[初学笔记] matlab中 怎么判断输入的数据类型

转自百度经验的 http://jingyan.baidu.com/article/f0062228d273a8fbd3f0c833.html 1  用class(var)指令获取矩阵类型 ...
  • Yuinfen
  • Yuinfen
  • 2017-09-14 14:44:38
  • 693

JS判断数据类型的三种方法

JavaScript 中常见的几种数据类型: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,...
  • donggx
  • donggx
  • 2017-05-09 14:01:04
  • 1429

javascript基础--对象(Object)封装

引言 说到对象,我想到一个成语叫作谈虎色变,对象应该说是javascript中最难得一部分,原因呢,首先,js作为函数式编程语言,对象的实现方式跟java,c,c++等面向对象设计语言不一样;其次...
  • csdn_kingboss
  • csdn_kingboss
  • 2017-02-03 16:21:54
  • 707

ASP.NET里常用的JavaScript代码封装

ASP.NET里常用的JavaScript代码封装   using System;  using System.Web;  using System.Web.UI.HTMLControls ;  us...
  • wonsoft
  • wonsoft
  • 2008-06-29 01:18:00
  • 1123

javascript 正则封装方法,

  • 2013年11月05日 10:59
  • 4KB
  • 下载
    个人资料
    持之以恒
    等级:
    访问量: 5103
    积分: 420
    排名: 11万+
    文章分类
    文章存档
    最新评论