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 相关文章推荐
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 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 获取本机外网/公网IP的代码
2010/05/09 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
Python里disconnect UDP套接字的方法
2015/04/23 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
PyQt5每天必学之组合框
2018/04/20 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
纽约海:Sea New York
2018/11/04 全球购物
商务专员岗位职责
2013/11/23 职场文书
小学语文教学反思
2014/02/10 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
爽歪歪广告词
2014/03/20 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书