详解JavaScript中的4种类型识别方法


Posted in Javascript onSeptember 14, 2015

具体内容如下:

1.typeof

【输出】首字母小写的字符串形式

【功能】

[a]可以识别标准类型(将Null识别为object)

[b]不能识别具体的对象类型(Function除外)

【实例】

console.log(typeof "jerry");//"string"
console.log(typeof 12);//"number"
console.log(typeof true);//"boolean"
console.log(typeof undefined);//"undefined"
console.log(typeof null);//"object"
console.log(typeof {name: "jerry"});//"object"
console.log(typeof function(){});//"function"
console.log(typeof []);//"object"
console.log(typeof new Date);//"object"
console.log(typeof /\d/);//"object"
function Person(){};
console.log(typeof new Person);//"object"

2.Object.prototype.toString

【输出】[object 数据类型]的字符串形式

【功能】

[a]可以识别标准类型及内置对象类型

[b]不能识别自定义类型

【构造方法】

function type(obj){
return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
}

【实例1】

console.log(Object.prototype.toString.call("jerry"));//[object String]
console.log(Object.prototype.toString.call(12));//[object Number]
console.log(Object.prototype.toString.call(true));//[object Boolean]
console.log(Object.prototype.toString.call(undefined));//[object Undefined]
console.log(Object.prototype.toString.call(null));//[object Null]
console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]
console.log(Object.prototype.toString.call(function(){}));//[object Function]
console.log(Object.prototype.toString.call([]));//[object Array]
console.log(Object.prototype.toString.call(new Date));//[object Date]
console.log(Object.prototype.toString.call(/\d/));//[object RegExp]
function Person(){};
console.log(Object.prototype.toString.call(new Person));//[object Object]

【实例2】

function type(obj){
  return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
}
console.log(type("jerry"));//"string"
console.log(type(12));//"number"
console.log(type(true));//"boolean"
console.log(type(undefined));//"undefined"
console.log(type(null));//"null"
console.log(type({name: "jerry"}));//"object"
console.log(type(function(){}));//"function"
console.log(type([]));//"array"
console.log(type(new Date));//"date"
console.log(type(/\d/));//"regexp"
function Person(){};
console.log(type(new Person));//"object"

3.constructor

【输出】function 数据类型(){[native code]}或者function 自定义类型(){}

【功能】

[a]可以识别标准类型、内置对象类型及自定义类型

[b]不能识别undefined、null,会报错

【构造方法】

function type(obj){
  var temp = obj.constructor.toString();
  return temp.replace(/^function (\w+)\(\).+$/,'$1');
}

【实例1】

console.log(("jerry").constructor);//function String(){[native code]}
console.log((12).constructor);//function Number(){[native code]}
console.log((true).constructor);//function Boolean(){[native code]}
//console.log((undefined).constructor);//报错
//console.log((null).constructor);//报错
console.log(({name: "jerry"}).constructor);//function Object(){[native code]}
console.log((function(){}).constructor);//function Function(){[native code]}
console.log(([]).constructor);//function Array(){[native code]}
console.log((new Date).constructor);//function Date(){[native code]}
console.log((/\d/).constructor);//function RegExp(){[native code]}
function Person(){};
console.log((new Person).constructor);//function Person(){}

【实例2】

function type(obj){
  var temp = obj.constructor.toString().toLowerCase();
  return temp.replace(/^function (\w+)\(\).+$/,'$1');
}
console.log(type("jerry"));//"string"
console.log(type(12));//"number"
console.log(type(true));//"boolean"
//console.log(type(undefined));//错误
//console.log(type(null));//错误
console.log(type({name: "jerry"}));//"object"
console.log(type(function(){}));//"function"
console.log(type([]));//"array"
console.log(type(new Date));//"date"
console.log(type(/\d/));//"regexp"
function Person(){};
console.log(type(new Person));//"person"

4.instanceof

【输出】true或false

【功能】

[a]可以识别内置对象类型、自定义类型及其父类型

[b]不能识别标准类型,会返回false

[c]不能识别undefined、null,会报错

【实例】

console.log("jerry" instanceof String);//false
console.log(12 instanceof Number);//false
console.log(true instanceof Boolean);//false
//console.log(undefined instanceof Undefined);//报错
//console.log(null instanceof Null);//报错
console.log({name: "jerry"} instanceof Object);//true
console.log(function(){} instanceof Function);//true
console.log([] instanceof Array);//true
console.log(new Date instanceof Date);//true
console.log(/\d/ instanceof RegExp);//true
function Person(){};
console.log(new Person instanceof Person);//true
console.log(new Person instanceof Object);//true

以上内容就是详解JavaScript中的4种类型识别方法,希望大家喜欢。

Javascript 相关文章推荐
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
js style动态设置table高度
Oct 21 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
简单的分页代码js实现
May 17 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
详细介绍Next.js脚手架完整搭建封装
Apr 26 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 #Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 #Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 #Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 #Javascript
JS动态添加iframe的代码
Sep 14 #Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 #Javascript
window.onload使用指南
Sep 13 #Javascript
You might like
一道关于php变量引用的面试题
2010/08/08 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
JS分页效果示例
2013/10/11 Javascript
jquery选择器使用详解
2014/04/08 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
Python中格式化format()方法详解
2017/04/01 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
python属于软件吗
2020/06/18 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
《美丽的彩虹》教学反思
2014/02/25 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
浅谈python数据类型及其操作
2021/05/25 Python
Python 数据科学 Matplotlib图库详解
2021/07/07 Python