Javascript类型判断相关例题及解析
题目:
请在index.html文件中,编写arraysSimilar函数,实现判断传入的两个数组是否相似。具体需求:
1. 数组中的成员类型相同,顺序可以不同。例如[1, true] 与 [false, 2]是相似的。
2. 数组的长度一致。
3. 类型的判断范围,需要区分:String, Boolean, Number, undefined, null, 函数,日期, window.
当以上全部满足,则返回"判定结果:通过",否则返回"判定结果:不通过"。
一、测试用例
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()); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
相关文章
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 在昨天的《Javascript权威指南》学习笔记之十:ECMAScript 5 增强的对象模型一文中,对于一段代码的调试出现了一个奇怪现象,现将源代码贴在下面: 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31
- 最近做一个小项目不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现,故问题演化成asp.net中jiavascript与后台c#如何进行交互。...2020-06-25
php中浮点型(float)和整型(integer)数据类型详解
文章分析了关于php中浮点型(float)和整型(integer)数据类型的用法区别以及在那种情况下会出现数据长度不够。 取值只能为True或者False,当其他类型转化为boolean类...2016-11-25- 复制代码 代码如下: //element:需要添加新样式的元素,value:新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31
- 在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15
- 首先,我想到的是另建一个结果数组,用来存储原始数组中不重复的数据。遍历原始数组依次跟结果数组中的元素进行比较,检测是否重复。于是乎,我写出了如下代码A: Array.prototype.clearRepetitionA = function(){ var resul...2015-11-08
- 这篇文章主要介绍了JavaScript预解析,对象的的相关资料,小编觉得这篇文章写的还不错,需要的朋友可以参考下,希望能够给你带来帮助...2021-11-10
- 事件触发器从字面意思上可以很好的理解,就是用来触发事件的,但是有些没有用过的朋友可能就会迷惑了,事件不是通常都由用户在页面上的实际操作来触发的吗?这个观点不完全正确,因为有些事件必须由程序来实现,如自定义事件,jQue...2014-06-07
- 有一道js面试题,题目是这样的:下列代码的执行结果是什么,为什么? 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10,这道题主要考察JavaScript的逗...2015-03-15
JavaScript学习笔记整理_setTimeout的应用
下面小编就为大家带来一篇JavaScript学习笔记整理_setTimeout的应用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-03- 这篇文章主要介绍了Javascript类型转换的规则实例解析,涉及到javascript类型转换相关知识,对本文感兴趣的朋友一起学习吧...2016-02-27
- 本篇文章主要是对c#中数据类型占用的字节数进行了详细的介绍。需要的朋友可以过来参考下,希望对大家有所帮助...2020-06-25
- 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM 模型被构造为对象的树: 通过可编程的对象模型,Java...2015-10-23
- 1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名,通过<object>标签里的id属性设定,如下; 复制...2014-06-07
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
下面小编就为大家带来一篇JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-05-20- Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24
- 这篇文章主要为大家介绍了JavaScript设计模式中的装饰者模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下...2016-01-21
- 使用 conditional comment 来判断 IE 的版本。嗯,是早早有人提出,但没有认真看代码。昨天刚好在看 CSS3 PIE 的时候看到,觉得是不是不靠谱。今天看到 Paul Irish 也提起,那么,推荐一下吧。这是作者博客上写的:复制代码 代码...2014-05-31