前端面试之JavaScript -- JS中如何检测一个变量是什么类型
2019-02-01 11:52
501 查看
前端面试之JavaScript -- JS中如何检测一个变量是什么类型
JS标准文档定义的类型
序号 | [[Class]] | 变量声明 |
---|---|---|
01 | Array | var arr = [1,2,3,4]; |
02 | Boolean | var bool = true; |
03 | Date | var date = new Date(); |
04 | Error | var err = new Error(); |
05 | Function | var func = function(){console.log(‘this is function’);} |
06 | JSON | {name:“苏”,age:25}; |
07 | Math | var pi = Math.PI; |
08 | Undefined | var und = undefined; |
09 | Null | var nul = null; |
10 | Number | var num = 123; |
11 | Object | var obj = Object(); |
12 | RegExp | var reg = / ^ [a-zA-Z]{5,20}$ /; |
13 | String | var str = “abcdef”; |
不同的检测方案
1、不完全准确的检测:typeof
//以string类型为例 var str = "abcdef"; //获取变量obj类型 typeof(str); //"string" typeof str; //"string" str.constructor; //ƒ String() { [native code] } //检测变量obj是否为string类型 typeof(str) === 'string'; //true typeof str=== 'string'; //true
---- typeof 检测出的类型
判断类型 | typeof 判断结果 |
---|---|
num | number |
str | string |
bool | boolean |
arr | object |
json | object |
func | function |
und | undefined |
null | object |
date | object |
reg | object |
error | object |
优点:使用简单,能直接输出结果
缺点:检测出的类型太少,不能检测出object的具体类型
2、不完全准确的检测:instanceof
//instanceof用于识别正在处理的对象(Object)类型 function Person(){} function Student(){} Student.prototype = new Person(); var Tom = new Student(); console.log(Tom instanceof Person); //true console.log(Tom instanceof Student); //true
---- instanceof 检测出的类型
变量 | 检测语句 | 结果 |
---|---|---|
var num = 123; | num instanceof Number | false |
var num = new Number(123); | num instanceof Number | true |
var str = “abcdef”; | str instanceof String | false |
var str = new String(“abcdef”); | str instanceof String | true |
var bool = true; | bool instanceof Boolean | false | var bool = new Boolean(true); | bool instanceof Boolean | true |
var arr = [1,2,3,4]; | arr instanceof Array | true |
{name:“苏”,age:25}; | json instanceof Object | true |
var func = function(){console.log(‘this is function’);} | func instanceof Function | true |
var und = undefined; | und instanceof Object | false |
var nul = null; | nul instanceof Object | false |
var date = new Date(); | date instanceof Date | true |
var reg = / ^ [a-zA-Z]{5,20}$ /; | reg instanceof RegExp | true |
var err = new Error(); | err instanceof Error | true |
优点:明确地确认对象(object)为某个特定类型;能检测出多层继承的关系
缺点:对number、string、boolean类型的变量声明方式有要求,必须用new方法声明才能检测,不能跨iframe
3、不完全准确的检测:constructor
var str = "abcdef"; str.constructor === String; //true //输出数字类型变量的构造函数 var num = 123; console.log(num.constructor); //function Number() { [native code] }
---- constructor 检测出的类型
变量 | 检测语句 | 结果 |
---|---|---|
var Tom = new Person(); | Tom.constructor == Person | true |
var num = 123; | num.constructor == Number | true |
var str = “abcdef”; | str.constructor == String | true |
var bool = true; | bool.constructor == Boolean | true |
var arr = [1,2,3,4]; | arr.constructor == Array | true |
{name:“苏”,age:25}; | json.constructor == Object | true |
var func = function(){console.log(‘this is function’);} | func.constructor == Function | true |
var date = new Date(); | date.constructor == Date | true |
var reg = / ^ [a-zA-Z]{5,20}$ /; | reg.constructor == RegExp | true |
var err = new Error(); | err.constructor == Error | true |
constructor:是原型对象的属性,指向构造函数,但根据实例对象寻找属性的顺序,如果实例对象上没有属性或方法时,就可以到原型链上寻找,所以实例对象也能使用constructor属性
优点:除了undefined和null,其他类型的变量都可以使用constructor检测
缺点:constructor属性可以被修改,会导致结果不正确,不能跨iframe
function Person(){} function Student(){} Student.prototype = new Person(); //Student原型中的constructor被指向到Person var John = new Student(); console.log(John.constructor == Student); console.log(John.constructor == Person); //所以constructor检测不出实例对象John真实的构造函数
4、准确的检测:Object.prototype.toString.call
变量 | 检测语句 | 结果 |
---|---|---|
var num = 123; | Object.prototype.toString.call(num) | ‘[object Number]’ |
var str = “abcdef”; | Object.prototype.toString.call(str) | ‘[object String]’ |
var bool = true; | Object.prototype.toString.call(bool) | ‘[object Boolean]’ |
var arr = [1,2,3,4]; | Object.prototype.toString.call(arr) | ‘[object Array]’ |
{name:“苏”,age:25}; | Object.prototype.toString.call(json) | ‘[object Object]’ |
var func = function(){console.log(‘this is function’);} | Object.prototype.toString.call(func) | ‘[object Function]’ |
var und = undefined; | Object.prototype.toString.call(und) | ‘[object Undefined]’ |
var nul = null; | Object.prototype.toString.call(nul) | ‘[object Null]’ |
var date = new Date(); | Object.prototype.toString.call(date) | ‘[object Date]’ |
var reg = / ^ [a-zA-Z]{5,20}$ /; | Object.prototype.toString.call(reg) | ‘[object RegExp]’ |
var err = new Error(); | Object.prototype.toString.call(err) | ‘[object Error]’ |
Object.prototype.toString先取得对象的内部属性[[Class]],然后依据这个属性返回一个类似于"[Object Array]"的字符串作为结果,再配合call可以取得任何对象的内部属性,然后把类型检测转化为字符串比较。
优点:能检测出所有的类型
缺点:IE6下undefined、null均为Object类型
5、使用JQuery中的检测:$.type
变量 | 检测语句 | 结果 |
---|---|---|
var num = 123; | $.type(num) | ‘number’ |
var str = “abcdef”; | $.type(str) | ‘string’ |
var bool = true; | $.type(bool) | ‘boolean’ |
var arr = [1,2,3,4]; | $.type(arr) | ‘array’ |
{name:“苏”,age:25}; | $.type(json) | ‘object’ |
var func = function(){console.log(‘this is function’);} | $.type(func) | ‘function’ |
var und = undefined; | $.type(und) | ‘undefined’ |
var nul = null; | $.type(nul) | ‘null’ |
var date = new Date(); | $.type(date) | ‘date’ |
var reg = / ^ [a-zA-Z]{5,20}$ /; | $.type(reg) | ‘regexp’ |
var err = new Error(); | $.type(err) | ‘error’ |
可以看出,JQuery中的$ .type的输出结果和Object.prototype.toString.call的输出结果很像,因为$.type就是用Object.prototype.toString.call实现的。
总结
- Number、String、Boolean 类型变量的检测:typeof
- Array、JSON、Function、Undefined、Null、Date、RegExp、Error 等 Object 和 Function 类型变量的检测:推荐使用Object.prototype.toString.call 以及 $.type
相关文章推荐
- JavaScript中如何检测一个变量是一个String类型?请写出函数实现
- JavaScript如何获取变量(对象)是不是属于什么类型的?
- js变量类型有哪些?如何检测判断变量类型?(上)
- 如何检测Web网站使用的是什么JS框架--一个很好用的工具
- Javascript如何判断一个变量是数字类型?
- 后端传回一个String类型的js脚本语句 前端如何解析
- 前端面试纪实(四):如何判断一个变量是数组:typeof和instanceof
- JS如何判断一个变量是否为数组类型
- 如何开发一个异常检测系统:使用什么特征变量(features)来构建异常检测算法
- 如何检测或判断一个文件或字节流(无BOM)是什么编码类型
- 各种浏览器的userAgent及如何使用JS来检测游览器类型,或android是什么版本号
- 前端面试-----JavaScript中变量类型与计算
- Web前端面试指导(二十九):Ajax 是什么? 如何创建一个Ajax?
- Web前端面试指导(二十):JavaScript中如何翻转一个字符串?
- Python--前端基础之JavaScript(JS的引入方式,JS的变量、常量和标识符,JS的数据类型,运算符,流程控制,JavaScript的对象)
- 【前端js】实现一个函数可以对JavaScript中的5种主要数据类型进行赋值
- 如何检测 JavaScript 中的自定义全局变量
- 后台返回一个string类型的json格式数据,前台js如何读取?
- JavaScript的数据类型和变量声明以及js的语句
- Web前端面试指导(二十四):事件是什么?如何阻止事件冒泡?