浅谈javascript的数据类型检测

一、javascript的数据
javascript的数据分为两种:简单数据和复杂数据。简单数据包含number,string,boolean,undefined和null这五种;复杂数据只有一种即object。【此处友情鸣谢李战老师,<<悟透JavaScript>>写得太传神,印象太深刻了】

二、javascript的数据类型检测
1、万能的typeof
我们先测试一下通过typeof来获取简单数据类型。什么也别说了,上代码是王道:


代码如下:

// 获取变量obj的数据类型
function getType(obj) {
return typeof (obj);
}
/*常量获取类型*/
alert(getType(1)); //number
alert(getType("jeff wong")); //string
alert(getType(true)); //boolean
alert(getType(undefined)); //undefined
alert(getType(null)); //object
/*变量获取类型*/
var num = 1;
var str = "jeff wong";
var flag = true;
var hell = undefined;
var none = null;
alert(getType(num)); //number
alert(getType(str)); //string
alert(getType(flag)); //boolean
alert(getType(hell)); //undefined
alert(getType(none)); //object

正如你所看到的那样,通过typeof运算符,前面四个简单数据类型完全在意料之中,但是typeof null却返回object。应该注意到,null是null类型的唯一值,但null并不是object,具有null值的变量也并非object,所以直接通过typeof,并不能正确得到null类型。 要正确获取简单数据类型,只要在getType的地方加点改进就可以了:


代码如下:

function getType(obj) {
return (obj === null) ? "null" : typeof (obj);
}

接着来试一下复杂数据类型object:


代码如下:

function Cat() {
}
Cat.prototype.CatchMouse = function () {
//do some thing
}
// 获取变量obj的数据类型
function getType(obj) {
return (obj === null) ? "null" : typeof (obj);
}
var obj = new Object();
alert(getType(obj)); //object
var func = new Function();
alert(getType(func)); //function
var str = new String("jeff wong");
alert(getType(str)); //object
var num = new Number(10);
alert(getType(num)); //object
var time = new Date();
alert(getType(time)); //object
var arr = new Array();
alert(getType(arr)); //object
var reg = new RegExp();
alert(getType(reg)); //object
var garfield = new Cat();
alert(getType(garfield)); //object

我们看到,除了Function(请注意大小写)返回了function,不管是javascript的常见内置对象Object,String或者Date等等,还是自定义function,通过typeof返回的无一例外,通通都是object。但是对于自定义function,我们更愿意得到它的“庐山真面目”(示例中即Cat,而非object),而显然,typeof不具备这种转换处理能力。
2、constructor,想大声说爱你
既然万能的typeof也有无解的时候,那么我们怎么判断一个变量是否是自定义的function实例呢?我们知道,javascript的所有对象都有一个constructor属性,这个属性可以帮我们判断object数据类型,尤其是对自定义function同样适用:


代码如下:

var obj = "jeff wong";
alert(obj.constructor == String); //true
obj = new Cat();
alert(obj.constructor == Cat); //true

但是,下面的代码您也可以测试一下:


代码如下:

//alert(1.constructor); //数字常量 出错 数字常量无constructor
var num = 1;
alert(num.constructor == Number); //true
alert("jeff wong".constructor == String); //true
var str = "jeff wong";
alert(str.constructor == String); //true
var obj= null;
alert(obj.constructor); //null没有constructor属性
none = undefined;
alert(obj.constructor); //undefined没有constructor属性

实验证明,数字型常量,null和undefined都没有constructor属性。
到这里,您会和楼猪一样庆幸认为终于大功告成了吗?下面的代码或许还能有点启发和挖掘作用:


代码如下:

function Animal() {
}
function Cat() {
}
Cat.prototype = new Animal();
Cat.prototype.CatchMouse = function () {
//do some thing
}
var obj = new Cat();
alert(obj.constructor == Cat); //false ??
alert(obj.constructor == Animal); //true 理解

原来对于原型链继承的情况,constuctor也不那么好使了。那怎么办?
3、直观的instanceof
嘿嘿,有请instanceof隆重登场。看它的命名,好像是获取某一个对象的实例,也不知这样理解对不对?不管怎样,我们还是动手改进上面的代码测试一下先:


代码如下:

function Animal() {
}
function Cat() {
}
Cat.prototype = new Animal();
Cat.prototype.CatchMouse = function () {
//do some thing
}
var garfield = new Cat();
alert(garfield instanceof Cat); //true 毫无疑问
alert(garfield instanceof Animal); //true 可以理解

好了,关于javascript的数据类型检测,楼猪就大致总结介绍到这里了。希望有心的高人补充。

(0)

相关推荐

  • js学习总结_基于数据类型检测的四种方式(必看)

    1.typeof 用来检测数据类型的运算符 console.log(typeof 12)//Number 使用typeof检测数据类型,首先返回的都是字符串 ,其次字符串中包含了对应的数据类型 例如:"number"."string"."boolean"."undefined"."function"."object" console.log(typeof typeof function(

  • 在javaScript中检测数据类型的几种方式小结

    在用javaScript编程的过程中,我们经常会遇到这样一个问题,就是需要检测一个数据或变量的类型,那么在javaScript中给我们提供了哪些方法呢?网上流传的代码比比皆是,但是发现其中有些是有误的,索性我自己动手把每种方法用了一遍,今天我专门整理了下,以便以后查阅. 一.typeof  检测 typeof 是一个一元运算符,语法:typeof(运算数),运算数可以是任意类型.它的返回值是一个字符串,该字符串说明运算数的类型. // var arr = { name:"john"};

  • JavaScript数据类型检测代码分享

    复制代码 代码如下: /**   * param:o表示检测的值   * return:返回字符串"undefined"."number"."boolean"."string"."function"."regexp"."array"."date"."error"."object"或"null&quo

  • JS中检测数据类型的几种方式及优缺点小结

    1.typeof 用来检测数据类型的运算符 typeof value 返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number"."string"."boolean"."undefined"."object"."function" 局限性: 1)typeof null ->"object" 2)检测的不管是数组还是正则都返回的是"ob

  • javascript基本数据类型及类型检测常用方法小结

    本文实例讲述了javascript中的基本数据类型以及类型检测的几种方法.分享给大家供大家参考,具体如下: 1.JS中有6种基本的数据类型,JS中的所有操作都是基于这五种基本类型得到的. (1)Object 对象类型 (2)number 数字类型 (3)String 字符串类型 (4)null (5)underfined (6)boolean 布尔类型:true或者为false I)JS中的数据类型转换(非严格模式下) "12"==12 // true 在非严格模式下,字符串可以向数字

  • 浅谈javascript的数据类型检测

    一.javascript的数据 javascript的数据分为两种:简单数据和复杂数据.简单数据包含number,string,boolean,undefined和null这五种:复杂数据只有一种即object.[此处友情鸣谢李战老师,<<悟透JavaScript>>写得太传神,印象太深刻了] 二.javascript的数据类型检测 1.万能的typeof 我们先测试一下通过typeof来获取简单数据类型.什么也别说了,上代码是王道: 复制代码 代码如下: // 获取变量obj的数

  • 浅谈javascript六种数据类型以及特殊注意点

    在js中常见的六种数据类型:String类型.Null类型.Number类型.Boolean类型.Object类型. 1.typeof的注意点 涉及到数据类型,不免会提到,操作符 typeof.要注意: 1.typeof是操作符,不是方法.虽然我们经常使用typeof()的方式获取对象的数据类型. 2.对 null 取typeof  是 object(这是因为null是 空的对象引用),对函数取 typeof 是 function 复制代码 代码如下: alert(typeof null);  

  • 浅谈javascript中的Function和Arguments

    javascript的Function 属性: 1.Arguments对象 2.caller 对调用单前函数的Function的引用,如果是顶层代码调用,  则返回null(firefox返回undefined).  注:只有在代码执行时才有意义 3.length 声明函数是指定的命名参数的个数(函数定义是,定义参数的个数) 4.prototype 一个对象,用于构造函数,这个对象定义的属性和方法  由构造函数创建的所有对象共享. 方法: applay() --> applay(this,[])

  • 浅谈JavaScript的内置对象和浏览器对象

    在javascript中对象通常包括两种类型:内置对象和浏览器对象,此外,用户还可以自定义对象. 对象包含两个要素: 1. 用来描述对象特性的一组数据,也就是若干变量,通常称为属性. 2. 用来操作对象特性的若干动作,也就是若干函数,通常称为方法. 浏览器对象 对象 含义 anchor 当前文档中设置了name属性的超链接 applet 当前文档中的小程序 area 客户端图形映射中的区域 button 表单中的按钮 checkbook 表单中的复选框 document 当前窗口中的HTML文档

  • 浅谈JavaScript对象的创建方式

    通过Object构造函数或对象字面量创建对象时,使用同一个接口创建很多对象时,会产生大量的重复代码.为了简化,引入了工厂模式. 工厂模式 function createPerson(name, age, job) { var obj = new Object(); obj.name = name; obj.age = age; obj.job = job; obj.sayHello(){ alert(this.name); }; return obj; } var p1 = createPers

  • 浅谈JavaScript 标准对象

    在JavaScript的世界里,一切都是对象. 但是某些对象还是和其他对象不太一样.为了区分对象的类型,我们用typeof操作符获取对象的类型,它总是返回一个字符串: typeof 123; // 'number' typeof NaN; // 'number' typeof 'str'; // 'string' typeof true; // 'boolean' typeof undefined; // 'undefined' typeof Math.abs; // 'function' ty

  • 浅谈JavaScript编程语言的编码规范

    JavaScript 编程语言作为最流行的客户端脚本语言,早已被众多 Web 开发人员所熟悉.随着 Web2.0 时代的到来和 Ajax 技术的广泛应用,JavaScript 也逐渐吸引着更多的视线.工作中要求越多的是对 JavaScript 语言的深入学习,灵活运用,和对编码质量的保证. 对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编码规范也

  • 浅谈javascript属性onresize

    浅谈javascript属性onresize //获取屏幕宽度并动态赋值 var winWidth = 0; var winHeight = 0; function findDimensions() //函数:获取尺寸 { //获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = docum

  • 浅谈JavaScript工具链不完全指南

    目录 概述 静态类型检查 代码风格检查(Linter) 包管理器 模块加载器 打包工具 任务管理工具(Task Runner) 转译器 构建工具 调试工具 Node 进程管理器 项目脚手架 概述 在 JavaScript 语言日渐强大的同时,与其配套的开发工具也蓬勃发展.现在的 Web 前端项目,早已不是写几个 HTML 页面,加点 CSS 和 JS 就完事了.随便一个实用的项目,可能都需要用到一些框架和第三方库,以及相应的脚手架.依赖包管理.预编译.构建打包.压缩合并等等工具.纯手工完成这些任

  • 浅谈JavaScript 浏览器对象

    window window对象不但充当全局作用域,而且表示浏览器窗口. window对象有innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度.内部宽高是指除去菜单栏.工具栏.边框等占位元素后,用于显示网页的净宽高.还有一个outerWidth和outerHeight属性,可以获取浏览器窗口的整个宽高. 补充: 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:

随机推荐