Javascript如何判断数据类型和数组类型


Posted in Javascript onJune 22, 2016

这么基础的东西实在不应该再记录了,不过嘛,温故知新~就先从数据类型开始吧

js六大数据类型:number、string、object、Boolean、null、undefined

string: 由单引号或双引号来说明,如"string"

number:什么整数啊浮点数啊都叫数字,你懂的~

Boolean: 就是true和false啦

undefined:未定义,就是你创建一个变量后却没给它赋值~

null: 故名思久,null就是没有,什么也不表示

object: 这个我也很难解释的说。就是除了上面五种之外的类型

--------------------上面的都是浮云,下面的才是神马------------------------------

数据类型判断之 typeof

typeof可以解决大部分的数据类型判断,是一个一元运算,放在一个运算值之前,其返回值为一个字符串,该字符串说明运算数的类型,所以判断某个是否为String类型,可以直接 if(typeof(你的值) == "string"){}

以下是各种数据类型返回结果:

var a="string"; console.log(a); //string
var a=1; console.log(a); //number
var a=false; console.log(a); //boolean
var a; console.log(typeof a); //undfined

var a = null; console.log(typeof a); //object
var a = document; console.log(typeof a); //object
var a = []; console.log(a); //object

var a = function(){}; console.log(typeof a) //function 除了可以判断数据类型还可以判断function类型

这样一来就很明显了,除了前四个类型外,null、对象、数组返回的都是object类型;

对于函数类型返回的则是function,再比如typeof(Date),typeof(eval)等。

然后这里就可以再引申出另一个灰常热门并且解决方法已普遍存在的问题,如何判断数据是个数组类型?

---------------------------------------其实这才是我的目的,咩~----------------------------------------------

js判断数组类型的方法

方法一之 instanceof

instance,故名思义,实例,例子,所以instanceof 用于判断一个变量是否某个对象的实例,是一个三目运算式---和typeof最实质上的区别

a instanceof b?alert("true"):alert("false")  //注意b值是你想要判断的那种数据类型,不是一个字符串,比如Array

举个栗子:

var a=[];
console.log(a instanceof Array) //返回true

方法二之 constructor

在W3C定义中的定义:constructor 属性返回对创建此对象的数组函数的引用

就是返回对象相对应的构造函数。从定义上来说跟instanceof不太一致,但效果都是一样的

如: (a instanceof Array)   //a是否Array的实例?true or false

   (a.constructor == Array)  // a实例所对应的构造函数是否为Array? true or false

举个栗子:

function employee(name,job,born){
 this.name=name;
 this.job=job;
 this.born=born;
}

var bill=new employee("Bill Gates","Engineer",1985);
console.log(bill.constructor); //输出function employee(name, jobtitle, born){this.name = name; this.jobtitle = job; this.born = born;}

那么判断各种类型的方法就是:

console.log([].constructor == Array);
console.log({}.constructor == Object);
console.log("string".constructor == String);
console.log((123).constructor == Number);
console.log(true.constructor == Boolean);

-------------------------------------以下不是原创--------------------------------------

较为严谨并且通用的方法:

function isArray(object){
 return object && typeof object==='object' &&
   Array == object.constructor;
}

!!注意:

使用instaceof和construcor,被判断的array必须是在当前页面声明的!比如,一个页面(父页面)有一个框架,框架中引用了一个页面(子页面),在子页面中声明了一个array,并将其赋值给父页面的一个变量,这时判断该变量,Array == object.constructor;会返回false;

原因:

1、array属于引用型数据,在传递过程中,仅仅是引用地址的传递。
2、每个页面的Array原生对象所引用的地址是不一样的,在子页面声明的array,所对应的构造函数,是子页面的Array对象;父页面来进行判断,使用的Array并不等于子页面的Array;切记,不然很难跟踪问题!

方法三之 特性判断法

以上方法均有一定的缺陷,但要相信人民大众的智慧是无所不能及的,我们可根据数组的一些特性来判断其类型

function isArray(object){
 return object && typeof object==='object' && 
   typeof object.length==='number' && 
   typeof object.splice==='function' && 
    //判断length属性是否是可枚举的 对于数组 将得到false 
   !(object.propertyIsEnumerable('length'));
}

有length和splice并不一定是数组,因为可以为对象添加属性,而不能枚举length属性,才是最重要的判断因子。

ps: 在这里普及下 propertyIsEnumerable 方法:

object. propertyIsEnumerable(proName)

判断指定的属性是否可列举

备注:如果 proName 存在于 object 中且可以使用一个 For…In 循环穷举出来,那么 propertyIsEnumerable 属性返回 true。如果 object 不具有所指定的属性或者所指定的属性不是可列举的,那么 propertyIsEnumerable 属性返回 false。

propertyIsEnumerable 属性不考虑原型链中的对象。

示例:

var a = new Array("apple", "banana", "cactus");
document.write(a.propertyIsEnumerable(1));

方法四之 最简单的方法

function isArray(o) {
 return Object.prototype.toString.call(o) === ‘[object Array]‘;
}

以上就是本文的全部内容,了解更多JavaScript的语法,大家可以查看:《JavaScript 参考教程》、《JavaScript代码风格指南》,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习ExtJS TextField常用方法
Oct 07 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
JS+Canvas绘制动态时钟效果
Nov 10 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
vue分页插件的使用方法
Dec 25 Javascript
最全的Javascript编码规范(推荐)
Jun 22 #Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 #Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 #Javascript
jQuery soColorPacker 网页拾色器
Jun 22 #Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 #Javascript
Javascript对象字面量的理解
Jun 22 #Javascript
Javascript闭包与函数柯里化浅析
Jun 22 #Javascript
You might like
透析PHP的配置文件php.ini
2006/10/09 PHP
PHP防止跨域提交表单
2013/11/01 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
javascript 写类方式之六
2009/07/05 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
python 调用钉钉机器人的方法
2019/02/20 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Django多个app urls配置代码实例
2020/11/26 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
毕业生护理专业个人求职信范文
2014/01/04 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
Android Studio 计算器开发
2022/05/20 Java/Android
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android