Javascript类型判断相关例题及解析

2024-10-05 19:30:56

题目：

请在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());
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

基于js实现判断浏览器类型代码实例

前言工作中需要用到判断浏览器类型,网上找到的内容不怎么全,故在此进行一下总结. 一.不同浏览器及版本下User-Agent信息待续.....欢迎补充二.根据User-Agent信息进行判断以下代码目前还判断不了win10下的edge //判断是否是IE浏览器 function isIE() { var b = navigator.userAgent; var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
判断js数据类型的函数实例详解

function judgeType(change) { if (arguments.length == 0) { return '0';//无参数传入 } if (change === null) { return 'null' } if (change === undefined && arguments.length > 0) { return 'undefined' } if (change instanceof Function) { return 'function' }
js的各种数据类型判断的介绍

1.typeof typeof 用来判断各种数据类型,有两种写法:typeof xxx , typeof(xxx) 例如: typeof 2 输出 number typeof null 输出 object typeof {} 输出 object typeof [] 输出 object typeof (function(){}) 输出 function typeof undefined 输出 undefined typeof '222' 输出 string typeof true 输出 boole
JavaScript判断数组类型的方法

前言 JavaScript中关于数组的判定问题,一直都是一个必须要掌握的点,那么,运用知识,如何判断一个类型是数组,就需要有对JavaScript使用有着深入的了解. 判断方法一.Array.isArray ES5新增的数组方法,Array.isArray应该是我们最先想到的判定方式,现在应用的也比较广泛. const arr = [1,2,3,4] Array.isArray(arr) // true 如果是在支持ES5的浏览器中,用这样的方式自然没什么问题,但是如果是在IE9以下版本,这个
JS中准确判断变量类型的方法

这是一个高频面试题,我们开发中也进程会遇到,今天我们来实现一个函数getValType(val)用来获取一个变量的类型.从1. JS基础变量类型.2. Js中判断变量的函数. 3. 实现getValType函数.3个方面来分析实现. Js基础变量类型在 JS 中,有 5 种基本数据类型和 1 种复杂数据类型,基本数据类型有:Undefined, Null, Boolean, Number和String:复杂数据类型是Object,Object中还细分了很多具体的类型,比如:Array, Fun
JS数据类型判断的几种常用方法

JavaScript 中常见数据类型有Number.String.Boolean.Object.Array.Json.Function.Date.RegExp.Error.undefined.Null等十几种.ES6还有新增的数据类型有Symbol.Set.Map等.在实际应用中,我们经常需要判断数据类型,现在我归纳几种方法,希望对大家有所帮助. typeof 判断(最常用) typeof 是 JS 提供的一个运算符,专门用来检测一个变量的类型 . typeof 有2种使用方式:typeof(表
JavaScript如何判断input数据类型

这篇文章主要介绍了JavaScript如何判断input数据类型,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下在HTML中接收用户输入信息一般都会用到<input/>.我今天本来想实现一个功能:由用户在input中输入自己的年龄,然后根据不同的年龄段弹出不同的信息,为了让程序更加严谨,我得判断从input中获取到的值必须是数字(这个问题其实可以直接限制input的输入内容为数字,在这里我想要实现通过javascript判断input里的值是
利用JS判断客户端类型你应该知道的四种方法

前言我们在写响应式布局的时候,总要考虑是否是移动端,基于这个这里总结了4种方法判断客户端是否是ios或者android.分享出来供大家参考学习,下面随着小编来一起看看详细的介绍吧. 方法如下: 1. 第一种:通过判断浏览器的userAgent,用正则来判断是否是ios和Android客户端 User Agent中文名为用户代理,是Http协议中的一部分,属于头域的组成部分,User Agent也简称UA.它是一个特殊字符串头,是一种向访问网站提供你所使用的浏览器类型及版本.操作系统及版本.浏览
Javascript类型判断相关例题及解析

题目: 请在index.html文件中,编写arraysSimilar函数,实现判断传入的两个数组是否相似.具体需求: 1. 数组中的成员类型相同,顺序可以不同.例如[1, true] 与 [false, 2]是相似的. 2. 数组的长度一致. 3. 类型的判断范围,需要区分:String, Boolean, Number, undefined, null, 函数,日期, window. 当以上全部满足,则返回"判定结果:通过",否则返回"判定结果:不通过". 一.
详解JavaScript类型判断的四种方法

JavaScript有八种内置类型,除对象外,其他统称为"基本类型". 空值(null) 未定义(undefined) 布尔值(boolean) 数字(number) 字符串(string) 对象 (object) 符号(symbol, ES6中新增) 大整数(BigInt, ES2020 引入) Symbol: 是ES6中引入的一种原始数据类型,表示独一无二的值. BigInt:是 ES2020 引入的一种新的数据类型,用来解决 JavaScript中数字只能到 53 个二进制位(J
分享JavaScript 类型判断的几种方法

目录一.JavaScript 基本类型 1.原始数据类型 2.引用数据类型 3.两种数据类型的存储方式二.Javascript 数据类型判断的几种方法 1.typeof 2.instanceof 3.构造函数(constructor) 4.Object.prototype.toString.call() 三.写在最后一.JavaScript 基本类型首先介绍一下JavaScript中的八大基本类型 1.原始数据类型除对象类型(object)以外的其它任何类型定义的不可变的值(值本身无法
javascript 类型判断代码分析

复制代码代码如下: var is = function(obj,type){ var toString=Object.prototype.toString,undefined; return obj===null&&type==='Null'|| obj===undefined&&type==='Undefined'|| toString.call(obj).slice(8,-1)===type; } //原文中有小括号包裹每个逻辑与运算,但根据运算符优先级,括号可以省略
javascript中关于类型判断的一些疑惑小结

前言类型判断是我们在日常工作中经常会遇到的一个功能,本文将给大家详细介绍关于javascript类型判断的相关内容,下面话不多说了,来一起看看详细的介绍吧 Javascript中数据类型分为两种: 简单数据类型:Undefined, NULL, Boolean, Number, String 复杂数据类型:Object 接下来我们就来看看怎么做数据类型判别吧? 首先来看看 typeof Type Result Undefined "undefined" Null "obje
关于JavaScript和jQuery的类型判断详解

对于类型的判断,JavaScript用typeof来进行. 栗子: console.log(typeof null); //object console.log(typeof []); //object console.log(typeof {}); //object console.log(typeof new Date()); //object console.log(typeof new Object); //object console.log(typeof function(){});
javascript中怎么做对象的类型判断

最近在翻看John Resig的大作<Pro JavaScript Techniques>,里面讲到了如何做javascript的类型判断的问题.文中介绍了两种方式,一种是使用typeof,另一种是使用constructor.略感遗憾的是作为jquery的作者,他尽然没有介绍jquery使用的类型判断方式.不过没有关系,我在这里给大家一起总结下. 在这里我首先像大家推荐一个很好用的在线编辑器:http://jsfiddle.net/.他提供了jquery.mootools.prototype和
基于javascript中的typeof和类型判断(详解)

typeof ECMAScript 有 5 种原始类型(primitive type),即 Undefined.Null.Boolean.Number 和 String.我们都知道可以使用typeof运算符求得一个变量的类型,但是对引用类型变量却只会返回object,也就是说typeof只能正确识别基本类型值变量. var a = "abc"; console.log(typeof a); // "string" var b = 123; console.log(t
JavaScript数组类型Array相关的属性与方法详解

Array数组类型详解在ECMAScript中除了object类型之外,Array数组用的是最常用的类型.ECMAScript数组可以在每一项存储任何类型的值,无需指定数组的长度,还可以随着数据的增长来增加数组长度,这些是和其他语言的数组不同的. 1.数组的创建方法数组字面量方式 var arr = [1,2,3,4,5];// 简单直接用中括号包裹构建数组数组构造函数 var arr = new Array(1,2,3,4,5);// 通过内置Array对象构建数组 2.检测数组 ins
在javascript中创建对象的各种模式解析

最近在看<javascript高级程序设计>(第二版) javascript中对象的创建 •工厂模式 •构造函数模式 •原型模式 •结合构造函数和原型模式 •原型动态模式面向对象的语言大都有一个类的概念,通过类可以创建多个具有相同方法和属性的对象.虽然从技术上讲,javascript是一门面向对象的语言,但是javascript没有类的概念,一切都是对象.任意一个对象都是某种引用类型的实例,都是通过已有的引用类型创建:引用类型可以是原生的,也可以是自定义的.原生的引用类型有:Object.A

Javascript类型判断相关例题及解析

相关推荐

随机推荐