溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章運用簡單易懂的例子給大家介紹一文讀懂JS中的類型判斷，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
一、測試用例
var result=function(){
//以下為多組測試數據
var cases=[{
arr1:[1,true,null],
arr2:[null,false,100],
expect:true
},{
arr1:[function(){},100],
arr2:[100,{}],
expect:false
},{
arr1:[null,999],
arr2:[{},444],
expect:false
},{
arr1:[window,1,true,new Date(),"hahaha",(function(){}),undefined],
arr2:[undefined,(function(){}),"okokok",new Date(),false,2,window],
expect:true
},{
arr1:[new Date()],
arr2:[{}],
expect:false
},{
arr1:[window],
arr2:[{}],
expect:false
},{
arr1:[undefined,1],
arr2:[null,2],
expect:false
},{
arr1:[new Object,new Object,new Object],
arr2:[{},{},null],
expect:false
},{
arr1:null,
arr2:null,
expect:false
},{
arr1:[],
arr2:undefined,
expect:false
},{
arr1:"abc",
arr2:"cba",
expect:false
}];
//使用for循環, 通過arraysSimilar函數驗證以上數據是否相似，如相似顯示“通過”,否則"不通過",所以大家要完成arraysSimilar函數,具體要求，詳見任務要求。
for(var i=0;i<cases.length;i++){
if(arraysSimilar(cases[i].arr1,cases[i].arr2)!==cases[i].expect) {
document.write("不通過！case"+(i+1)+"不正確！arr1="+JSON.stringify(cases[i].arr1)+", arr2="+JSON.stringify(cases[i].arr2)+" 的判斷結果不是"+cases[i].expect);
return false;
}
}
return true;
}();
document.write("判定結果:"+(result?"通過":"不通過"));這個文件為testData.js。主要任務是完成arraysSimilar函數。
二、arraySimilar函數
1、我的寫法
1、判斷2個參數是否都是數組，不是就返回false;
2、判斷2個數組長度是否一致，不是直接返回fasle；
3、新建2個臨時數組temp1,temp2并初始化為0，用來存放arr1和arr2中各種類型的個數。
var temp1 = [0, 0, 0, 0, 0, 0, 0, 0];
var temp2 = [0, 0, 0, 0, 0, 0, 0, 0];
4、遍歷2個arr1和arr2，每遍歷一個元素，將對應類型加1。
5、完成arr1和arr2的遍歷后，通過temp1.toString()和temp2.toString()是否相等得出2個數組是否相似。
<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030">
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
/*
* param1 Array
* param2 Array
* return true or false
*/
function arraysSimilar(arr1, arr2) {
console.log("arr1為" + arr1);
console.log("arr2為" + arr2);
if (!(arr1 instanceof Array) || !(arr2 instanceof Array)) {
document.write(false + "<br/>");
return false;
} else if (arr1.length != arr2.length) {
document.write(false + "<br/>");
return false;
}
var temp1 = [0, 0, 0, 0, 0, 0, 0, 0];
var temp2 = [0, 0, 0, 0, 0, 0, 0, 0];
//初始化temp1
for (i = 0; i < arr1.length; i++) {
console.log("arr1的第" + i + "個值為" + arr1[i]);
switch (jsType(arr1[i])) {
case "String":
temp1[0]++;
break;
case "Boolean":
temp1[1]++;
break;
case "Number":
temp1[2]++;
break;
case "Undefined":
temp1[3]++;
break;
case "Null":
temp1[4]++;
break;
case "Function":
temp1[5]++;
break;
case "Date":
temp1[6]++;
break;
case "Window":
temp1[7]++;
break;
}
console.log("arr2的第" + i + "個值為" + arr2[i]);
//初始化temp2
switch (jsType(arr2[i])) {
case "String":
temp2[0]++;
break;
case "Boolean":
temp2[1]++;
break;
case "Number":
temp2[2]++;
break;
case "Undefined":
temp2[3]++;
break;
case "Null":
temp2[4]++;
break;
case "Function":
temp2[5]++;
break;
case "Date":
temp2[6]++;
break;
case "Window":
temp2[7]++;
break;
}
}
//判斷temp1和temp2是否相等
if (temp1.toString() === temp2.toString()) {
document.write(true + "<br/>");
return true;
} else {
document.write(false + "<br/>");
return false;
}
}
//返回參數的javascript類型
function jsType(arg) {
//判斷字符串
if (typeof arg == "string") {
console.log("string");
return "String";
}
//判斷Boolean
if (typeof arg == "boolean") {
console.log("boolean");
return "Boolean";
}
//判斷Number
if (typeof arg == "number") {
console.log("Number");
return "Number";
}
//判斷Undefined
if (typeof arg == "undefined") {
console.log("Undefined");
return "Undefined";
}
//判斷Null(不考慮IE8以下) //看了答案發現直接=== null判斷就好了
if (Object.prototype.toString.apply(arg) == "[object Null]") {
console.log("Null");
return "Null";
}
//判斷Function
if (typeof arg == "function") {
console.log("Function");
return "Function";
}
//判斷日期
if (arg instanceof Date) {
console.log("Date");
return "Date";
}
//判斷window //看了答案發現直接=== window 判斷就好了
if (arg instanceof Window) {
console.log("window");
return "Window";
}
}
</script>
<script src="testData.js"></script>
</body>
</html>雖然代碼略粗糙，但是功能完成了。網上看了其他人的答案確實不同的人做法不一樣，有些值得借鑒的地方。
2、其他答案
建一個類型對象數組obj，初始化為零，arr1遍歷時每個元素對應的類型加一，arr2遍歷時每個元素對應的類型減一，最終判斷obj里所有鍵的值都為0即相似數組。
function check(i){
//除了function 其他的引用類型用instanceof來判定
if(i instanceof Date){
return 'date';
}
else if(i instanceof Window){
return 'window';
}
// typeof可以判斷基本類型(number string boolean null(typeof 返回object) undefined )和引用類型的function類型
if(typeof i === 'number')return 'number';
else if(typeof i === 'string')return 'string';
else if(typeof i === 'boolean')return 'boolean';
else if(typeof i === 'function')return 'function';
//typeof null 返回 object
else if(typeof i === 'object'){
if(i === null){
return 'null';
}else{
return 'object';
}
}
else if(typeof i === 'undefined'){
return 'undefined';
}
}
function arraysSimilar(arr1, arr2){
if(!arr1||!arr2){return false;}
if(!(arr1 instanceof Array )||!(arr2 instanceof Array))return false;
if(arr1.length!=arr2.length)return false;
var obj={
'number':0,
'string':0,
'boolean':0,
'undefined':0,
'null':0,
'function':0,
'date':0,
'object':0,
'window':0
};
for(var i=0;i<arr1.length;i++){
var r1=check(arr1[i]);
var r2=check(arr2[i]);
obj[r1]++;
obj[r2]--;
}
for(var o in obj){
if(obj[o]!=0)return false;
}
return true;
}還有一個答案，差不多算標準答案，當然這種題也沒有標準答案。和上個答案的差別是，用map（在js中也就是對象）存放數據類型和次數，這個map初始化為{}，在后面動態生成的。
/**
* String, Boolean, Number, undefined, null, 函數，日期, window
*/
function arraysSimilar(arr1, arr2) {
// 判斷參數，確保arr1, arr2是數組，若不是直接返回false
if (!(arr1 instanceof Array)
|| !(arr2 instanceof Array)) {
return false;
}
// 判斷長度
if (arr1.length !== arr2.length) return false;
var i = 0,
n = arr1.length,
countMap1 = {}, // 用來計算數組元素數據類型個數的map，key是TYPES中的類型字符串，value是數字表示出現次數。
countMap2 = {},
t1, t2,
TYPES = ['string', 'boolean', 'number', 'undefined', 'null',
'function', 'date', 'window'];
// 因為是無序的，用一個對象來存儲處理過程。key為類型, value為該類型出現的次數。
// 最后校驗：若每一種數據類型出現的次數都相同（或都不存在），則證明同構。
for (; i < n; i++) {
t1 = typeOf(arr1[i]);
t2 = typeOf(arr2[i]);
if (countMap1[t1]) {
countMap1[t1]++;
} else {
countMap1[t1] = 1;
}
if (countMap2[t2]) {
countMap2[t2]++;
} else {
countMap2[t2] = 1;
}
}
// 因為typeof只能判斷原始類型，且無法判斷null(返回"object")，所以自己寫typeof方法擴展。
function typeOf(ele) {
var r;
if (ele === null) r = 'null'; // 判斷null
else if (ele instanceof Array) r = 'array'; // 判斷數組對象
else if (ele === window) r = 'window'; // 判斷window
else if (ele instanceof Date) r = 'date' // 判斷Date對象
else r = typeof ele; // 其它的，使用typeof判斷
return r;
}
for (i = 0, n = TYPES.length; i < n; i++) {
if (countMap1[TYPES[i]] !== countMap2[TYPES[i]]) {
return false;
}
}
return true;
}還有一個比較簡潔也好理解的解法
<script type="text/javascript">
/*
* param1 Array
* param2 Array
* return true or false
*/
function type(a){
return a === null ? '[object Null]':Object.prototype.toString.apply(a); //hack ie678
}
function arraysSimilar(arr1, arr2){
if(!Array.isArray(arr1) || !Array.isArray(arr2) ||arr1.length!=arr2.length){return false;}
var arr3=[];
var arr4=[];
var x;
for(var i in arr1){
arr3.push(type(arr1[i]));
arr4.push(type(arr2[i]));
}
if(arr3.sort().toString()==arr4.sort().toString()){
return true;
}else{
return false;
}
}
</script>還有一個精妙的解法，我對這種不感興趣，沒仔細看。
var global = window;
function arraysSimilar(arr1, arr2){
return (arr1 instanceof Array && arr2 instanceof Array) && JSON.stringify(arr1.map(function(v) {
return null === v ? "☀" : (v instanceof Date ? "❤" : (v === global ? "❀" : typeof v));
}).sort()) === JSON.stringify(arr2.map(function(v) {
return null === v ? "☀" : (v instanceof Date ? "❤" : (v === global ? "❀" : typeof v));
}).sort());
}關于一文讀懂JS中的類型判斷就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
