在前端开发中，我们经常会遇到变量类型的判断，今天总结一下，以防老忘记某些类型的判断。
<!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 判断浏览器类型及版本 随着浏览器市场的日益繁荣，浏览器的类型和版本也越来越多，给前端开发带来了很大的挑战。如何精准地判断浏览器的类型和版本成为了前端开发中非常重要的一个问题。 JavaScript ...
本文将详细讲解JavaScript中的几个常见判断函数，这些函数可以帮助开发者进行数据类型的检查和验证。 首先，我们来看`DataLength`函数。这个函数的主要功能是计算字符串的长度，但与JavaScript原生的`length`属性...
在JavaScript编程中，判断函数是非常重要的工具，可以帮助开发者快速地对各种数据类型进行验证和处理。本文将详细介绍几个常用的JavaScript判断函数，包括`DataLength`（计算数据长度）、`IsEmpty`（判断是否为空）...
在JavaScript编程中，类型判断是一个基本而又重要的技能，它涉及到数据类型的确定与识别。本文将深入解析JavaScript中类型判断的方方面面。 首先，JavaScript中基本的数据类型包括Undefined、Null、Boolean、Number...
数据类型转换章节介绍了在JavaScript中进行数据转换的各种方法和规则。了解这些规则对于避免类型相关的bug和提升代码的健壮性非常重要。 错误处理机制章节介绍了JavaScript中的Error对象、throw语句、try...catch...
在JavaScript中，基本的数据类型包括字符串、数字、布尔值、null、undefined、对象和Symbol。其中，字符串是不可变的字符序列，可以使用模板字面量来方便地创建和操作；数字包括整数和浮点数，可以用十进制、八进制...
- 当两个不同类型的值进行比较时，JavaScript 会自动进行类型转换，但这可能导致意外的结果。 ##### 2.3 JScript 的数据类型 - **2.3.1 字符串数据类型** - 字符串是由一系列字符组成的序列，使用单引号 `'` 或...
- **布尔（Boolean）**：在逻辑判断中使用true和false。 - **全局对象（Global）**：JavaScript中的全局变量和函数。 - **Date对象**：处理日期和时间。 - **Number对象**：处理数值相关的操作。 - **Windows和...
总结来说，在JavaScript中判断两个字符串是否相等，不仅要考虑使用哪种相等性运算符，还要注意可能需要进行的类型转换以及区域设置对字符串比较的影响。理解这些基本概念对于编写健壮且可靠的JavaScript程序是非常...
### JavaScript密码强度判断代码解析 在现代Web应用中，用户数据的安全性至关重要，而密码作为保护用户账户的第一道防线，其强度直接关系到账户的安全。本文将深入解析一段JavaScript代码，该代码用于评估用户输入...
简单的一二十代码, 就可以判断出当前所有浏览器的类型, 支持的浏览器也有很多,感谢支持
JavaScript 中可以进行数据类型转换，包括强制转换和弱类型转换。强制转换可以使用 parseInt() 和 parseFloat() 函数，将字符串转换为数字。弱类型转换可以使用 + 号和 - 号，将数字转换为字符串。 运算符 ...
但是，无论是使用typeof还是instanceof，在面对JavaScript中类型判断的复杂性时，开发者都应时刻注意其局限性和可能出现的意外情况。例如，在处理复杂的继承关系、不同作用域下的变量类型判断，以及在使用多个框架或...
在JavaScript中，正确判断一个值的类型是编程中不可或缺的基础知识。`typeof`运算符是JavaScript提供的一...在实际编程中，还应该考虑使用`Object.prototype.toString.call()`等其他方法来进一步提高类型判断的准确性。
JavaScript中的数据类型有Number、String、Boolean、null、undefined、数组和对象等，这些类型及其操作构成了编程的基础。 接着，掌握条件判断和循环结构对于编写有效的JavaScript代码至关重要。Map和Set是ES6引入...