在前端开发中,我们经常会遇到变量类型的判断,今天总结一下,以防老忘记某些类型的判断。
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> </head> <body> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <!-- Add your site or application content here --> <p id="testP">Hello world! This is HTML5 Boilerplate.</p> <script> /*说明:javascript中有5种简单类型(也成为基本数据类型):Undefined,Null,Boolean,Number和String,还有一种复杂数据类型--Object,Object本质上是由一组无序的名值对组成的。 javascript中包含9个原生对象构造函数,Number(),String(),Boolean(),Object(),Array(),Function(),Date(),RegExp(),Error() 1.typeof 用来检测给定变量的数据类型,有以下类型 "undefined":如果这个值未定义 "boolean":如果这个值是布尔值 "string":如果这个值是字符串 "number":如果这个值是数值 "object":如果这个值是对象或null "function":如果这个值是函数 2.instanceof 要求左边的运算数是一个对象,右边的运算数是对象类的名字。如果运算符左边的对象是右边类的一个实例,它返回true,否则返回false */ //var undefined = undefined; var obj ={}; console.log("undefined:",typeof b);//未定义变量 undefined console.log("undefined:",typeof obj.name == 'undefined');//未定义属性 var bVal = false; var bVal2 = new Boolean(false); var bVal3 = Boolean(false); console.log("Boolean:",typeof bVal == 'boolean'); console.log("Boolean:",typeof bVal2); console.log("Boolean:",typeof bVal3); var strVal = "a"; var strVal2 = new String("a"); var strVal3 = String("a"); console.log("String:",typeof strVal == 'string'); console.log("String:",typeof strVal2); console.log("String:",typeof strVal3); var numVal = 10; var numVal2 = 10; var numVal3 = 10; console.log("Number:",typeof numVal =='number'); console.log("Null:",typeof null); var objVal = {}; console.log("Object:",typeof objVal == 'object'); var array = []; console.log("Object:",typeof array =='object'); var fun = function (argument) { console.log("fun"); } console.log("Function:",typeof fun =='function'); function Person(){ } var person = new Person(); console.log("Function:",typeof Person =='function'); console.log("Object:",typeof person =='object'); console.log("Array:",array instanceof Array); //判断是数组类型 console.log("Array:",(Object.prototype.toString.call(array) === '[object Array]')); (function(){ var ObjectProto = Object.prototype; var isArguments=function (obj) { return ObjectProto.toString.call(obj)=="[object Arguments]"?true:false; }; var isFunction=function (obj) { return ObjectProto.toString.call(obj)=="[object Function]"?true:false; }; var isString=function (obj) { return ObjectProto.toString.call(obj)=="[object String]"?true:false; }; var isNumber=function (obj) { return ObjectProto.toString.call(obj)=="[object Number]"?true:false; }; var isArray=function (obj) { return ObjectProto.toString.call(obj)=="[object Array]"?true:false; }; var isDate=function (obj) { return ObjectProto.toString.call(obj)=="[object Date]"?true:false; }; var isRegExp=function (obj) { return ObjectProto.toString.call(obj)=="[object RegExp]"?true:false; }; var isBoolean=function (obj) { return ObjectProto.toString.call(obj)=="[object Boolean]"?true:false; }; var isNull = function(obj) { return obj === null?true:false; }; var isUndefined = function(obj) { return obj === void 0?true:false; }; var isNaN = function(obj) { return isNumber(obj) && obj !== +obj; }; var isObject = function(obj) { var type = typeof obj; return type === 'function' || type === 'object' && !!obj; }; var isElement = function(obj) { return !!(obj && obj.nodeType === 1); }; var has = function(obj, key) { return obj != null && ObjectProto.hasOwnProperty.call(obj, key); }; var isEmpty = function(obj) { if (obj == null){ return true; } if (isArray(obj) || isString(obj) || isArguments(obj)){ return obj.length === 0; } for (var key in obj){ if (has(obj, key)){ return false; } } return true; }; var nativeKeys = Object.keys; var keys = function(obj) { if (!isObject(obj)){ return []; } if (nativeKeys){ return nativeKeys(obj); } var keys = []; for (var key in obj) { if (has(obj, key)){ keys.push(key); } } return keys; }; var values = function(obj) { var keysArr = keys(obj); var length = keysArr.length; var values = Array(length); for (var i = 0; i < length; i++) { values[i] = obj[keysArr[i]]; } return values; }; //Convert an object into a list of `[key, value]` pairs var pairs = function(obj) { var keysArr = keys(obj); var length = keysArr.length; var pairs = Array(length); for (var i = 0; i < length; i++) { pairs[i] = [keysArr[i], obj[keysArr[i]]]; } return pairs; }; console.log("-----------------以下是分割线------------------"); console.log("-----------------调用方法------------------"); console.log("isArguments",isArguments(arguments)); function testFunction(){ }; var testString = "mike",testInt=123,testArr=['mike','is','me'],testDate=new Date(), testReg=/^abc/,testBoolean=true,testNull=null,testUndefined,testNaN=NaN,testObj={id:789,name:'mike',gender:'male'}, testElement=document.getElementById('testP'); console.log("isFunction",isFunction(testString),isFunction(testFunction)); console.log("isString",isString(testString),isString(testInt)); console.log("isNumber",isNumber(testInt),isNumber(testString)); console.log("isArray",isArray(testArr),isArray(testInt)); console.log("isDate",isDate(testDate)); console.log("isRegExp",isRegExp(testReg)); console.log("isBoolean",isBoolean(testBoolean)); console.log("isNull",isNull(testNull)); console.log("isUndefined",isUndefined(testUndefined)); console.log("isNaN",isNaN(testNaN)); console.log("isObject",isObject(testObj)); console.log("isElement",isElement(testElement)); console.log("keys",keys(testObj)); console.log("values",values(testObj)); console.log("pairs",pairs(testObj)); })(); /* 浏览器控制台日志: typeofAndInstanceOf.html:41 undefined: undefined typeofAndInstanceOf.html:42 undefined: true typeofAndInstanceOf.html:49 Boolean: true typeofAndInstanceOf.html:50 Boolean: object typeofAndInstanceOf.html:51 Boolean: boolean typeofAndInstanceOf.html:56 String: true typeofAndInstanceOf.html:57 String: object typeofAndInstanceOf.html:58 String: string typeofAndInstanceOf.html:63 Number: true typeofAndInstanceOf.html:66 Null: object typeofAndInstanceOf.html:69 Object: true typeofAndInstanceOf.html:72 Object: true typeofAndInstanceOf.html:78 Function: true typeofAndInstanceOf.html:85 Function: true typeofAndInstanceOf.html:86 Object: true typeofAndInstanceOf.html:88 Array: true typeofAndInstanceOf.html:90 Array: true typeofAndInstanceOf.html:188 -----------------以下是分割线------------------ typeofAndInstanceOf.html:189 -----------------调用方法------------------ typeofAndInstanceOf.html:190 isArguments true typeofAndInstanceOf.html:197 isFunction false true typeofAndInstanceOf.html:198 isString true false typeofAndInstanceOf.html:199 isNumber true false typeofAndInstanceOf.html:200 isArray true false typeofAndInstanceOf.html:201 isDate true typeofAndInstanceOf.html:202 isRegExp true typeofAndInstanceOf.html:203 isBoolean true typeofAndInstanceOf.html:204 isNull true typeofAndInstanceOf.html:205 isUndefined true typeofAndInstanceOf.html:206 isNaN true typeofAndInstanceOf.html:207 isObject true typeofAndInstanceOf.html:208 isElement true typeofAndInstanceOf.html:209 keys ["id", "name", "gender"] typeofAndInstanceOf.html:210 values [789, "mike", "male"] typeofAndInstanceOf.html:211 pairs [Array[2], Array[2], Array[2]]0: Array[2]0: "id"1: 789length: 2__proto__: Array[0]1: Array[2]2: Array[2]length: 3__proto__: Array[0] */ </script> </body> </html>
相关推荐
讲解利用JavaScript如何判断浏览器类型!讲解利用JavaScript如何判断浏览器类型!
javascript中经常使用的对象判断方式包括:typeof、constructor和Object.prototype.toString.call()最近在翻看JohnResig的大作《ProJavaScriptTechniques》,里面讲到了如何做javascript的类型判断的问题。...
简单的一二十代码, 就可以判断出当前所有浏览器的类型, 支持的浏览器也有很多,感谢支持
类型判断是我们在日常工作中经常会遇到的一个功能,本文将给大家详细介绍关于javascript类型判断的相关内容,下面话不多说了,来一起看看详细的介绍吧 Javascript中数据类型分为两种: 简单数据类型:Undefined, ...
通过Javascript代码判断运行浏览器的类型,不需要依赖其它的包纯净版本
我们在写封装的插件或者函数时,常常用到JS的数据类型判断,典型的案例就是深度拷贝函数用到数据类型判断,这个知识点在面试的时候也是经常考到的一个问题。本文就来给大家总结了下javascript中判断类型的相关资料,...
我们知道,JavaScript中检测对象类型的运算符有:typeof、instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一个说明运算数类型的字符串。如:”number”,”string”,”...
JavaScript应用实例-判断联网类型.js
JavaScript应用实例-判断网络类型.js
本文实例展示了JavaScript判断文件上传类型的方法,是一个非常常用的技巧。具体实现方法如下: 文件上传时用到一个功能,使用html元素的input标签实现: <input id="imageFile" name="imageFile1" accept="image...
在JavaScript中,有5种基本数据类型和1种复杂数据类型,基本数据类型有:Undefined, Null, Boolean, Number和String;复杂数据类型是Object,Object中还细分了很多具体的类型,比如:Array, Function, Date等等。...
主要介绍Javascript如何判断数据类型和数组类型,通俗易懂,需要的朋友可以参考下。
8、原生JavaScript判断是否为数字类型 9、原生JavaScript设置cookie值 10、原生JavaScript获取cookie值 11、原生JavaScript加入收藏夹 12、原生JavaScript设为首页 13、原生JavaScript判断IE6 14、原生JavaScript...
JavaScript判断浏览器类型及版本[归类].pdf
主要介绍了JavaScript中判断变量是数组、函数或是对象类型的方法,需要的朋友可以参考下
主要是对判断javascript的数据类型的判断方式进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助