js中各种数据类型检测和判定的实战示例

 更新时间:2022年11月09日 11:37:10   作者:H-rosy  
typeof一般被用于判断一个变量的类型,我们可以利用typeof来判断number,string,object,boolean,function,undefined,symbol这七种类型,下面这篇文章主要给大家介绍了关于js中各种数据类型检测和判定的相关资料,需要的朋友可以参考下

介绍

在前端开发中,js 有各种各样的数据类型,数据类型检测是每个开发者都必须掌握基础知识。数据类型检测的方法也有很多种,本题将封装一个通用的数据类型检测函数。

准备

本题已经内置了初始代码,打开实验环境,目录结构如下:

.
└── main.js

其中:
main.js 是待补充代码的 js 文件。
在 main.js 文件中封装好方法以后,可以尝试在该文件中手动调用已经封装好的方法,通过命令 node main.js 来执行文件,打印对应的日志。

目标

完善 main.js 中 getType 函数中的 TODO 部分,返回传入值的对应数据类型。

传入值以及 getType 函数返回值(大小写可忽略)按照如下方式对应:

传入值 返回值
‘s’ string
0 number

传入值返回值
falseboolean
undefinedundefined
Symbol()symbol
function fn(){}function
123nbigint
nullnull
{}object
[]array
new Datedate
new Mapmap
new Setset
/a/regexp

测试用例

// 示例
const testArr = [
  "s",
  0,
  false,
  undefined,
  Symbol(),
  function () {},
  123n,
  null,
  {},
  [],
  new Date(),
  new Map(),
  new Set(),
  /a/,
];
const result = testArr.map((item) => getType(item));
console.log("得到的结果:", result);
/*
得到的结果:
 [
    'string',  'number',
    'boolean', 'undefined',
    'symbol',  'function',
    'bigint',  'null',
    'object',  'array',
    'date',    'map',
    'set',     'regExp'
  ]
*/

值得注意的是需要我们区别typeof与instanceof的用法。instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上。关于原型链请自行学习,这里不过多解释。typeof返回的是一个字符串,具体用法请见代码。typeof只能检测出图中的8种类型。并且你如果使用typeof检测 null、Date、RegExp、Error都会返回为object类型。所以最好使用instanceof检测

代码

/**
 * @description: 数据类型检测
 * @param {*} data 传入的待检测数据
 * @return {*} 返回数据类型
 */
 function getType(data) {
  // TODO:待补充代码
    if(typeof data=="String"){
      return 'string';
    }else if( typeof data=="number"){
      return "number"
    }else if(typeof data== "boolean"){
      return "boolean"
    }else if(typeof data=="undefined"){
      return "undefined"
    }else if(typeof data== "function"){
      return "function"
    }else if(typeof data=== "symbol"){
      return "symbol"
    }
    else if(typeof data== "bigint"){
      return "bigint"
    }else if( data=== null){
      return "null"
    }else if(Array.isArray(data)){
      return "array"
    }else if(data instanceof Date){
      return "date"
    }else if(data instanceof RegExp){
      return "regExp"
    }
    else if(data instanceof Map){
      return "map"
    }else if(data instanceof Set){
      return "set"
    }
    else if(typeof data=="string"){
      return "string"
    }else if(typeof data=="object"){
      return "object"
    }
}

const testArr = [
  "s",
  0,
  false,
  undefined,
  Symbol(),
  function () {},
  123n,
  null,
  {},
  [],
  new Date(),
  new Map(),
  new Set(),
  /a/,
];
  const result = testArr.map((item) => getType(item));
console.log("得到的结果:", result);
module.exports = {
  getType
}

使用

可以把代码复制到一个js文件中。在终端运行node 文件名.js即可。测试结果如下,结果是从左往右开始读,然后下一行

总结 

到此这篇关于js中各种数据类型检测和判定的文章就介绍到这了,更多相关js数据类型检测和判定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript中的console.assert()函数介绍

    JavaScript中的console.assert()函数介绍

    这篇文章主要介绍了JavaScript中的console.assert()函数介绍,assert()函数是一个调试中经常使用的断言工具函数,需要的朋友可以参考下
    2014-12-12
  • 深度解析JavaScript中的filter()方法

    深度解析JavaScript中的filter()方法

    在JavaScript中,filter()是一个数组方法,用于从数组中过滤出符合特定条件的元素,并返回一个新数组,本文将带大家深度解析JavaScript中的filter()方法,需要的朋友可以参考下
    2023-09-09
  • js中select选择器的change事件处理函数详解

    js中select选择器的change事件处理函数详解

    Js操作Select是很常见的,也是比较实用的,下面这篇文章主要给大家介绍了关于js中select选择器的change事件处理函数的相关资料,文中给出了详细的实例代码,需要的朋友可以参考下
    2023-06-06
  • JS中 new Date() 各方法的用法说明

    JS中 new Date() 各方法的用法说明

    这篇文章主要介绍了JS中 new Date() 各方法的用法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • 深入理解JavaScript中的并行处理

    深入理解JavaScript中的并行处理

    这篇文章给大家详细介绍了JavaScript中的并行处理,一直以来,JavaScript 都并没有多线程的能力,而单线程在让开发者方便的同时,也使它一直不能处理计算量复杂的场景,唯一方法就是让服务端去做。下来通过这篇文章我们一起来看看详细介绍。
    2016-09-09
  • 如何用js判断dom是否有存在某class的值

    如何用js判断dom是否有存在某class的值

    本文主要介绍了如何用javascript判断dom是否有存在某class的值。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 整理CocosCreator常用知识点

    整理CocosCreator常用知识点

    这篇文章主要介绍了整理CocosCreator常用知识点,这些知识点,平时几乎都能用到,希望同学们看完后,可以自己去试一下,加深印象
    2021-04-04
  • JavaScript中常见的Polyfill介绍

    JavaScript中常见的Polyfill介绍

    在多姿多彩的JavaScript世界,Polyfill如同一座架在浏览器兼容性鸿沟之上的桥梁,本文将介绍常见的JavaScript Polyfill兼容方案,并举例说明它们的应用,需要的可以参考下
    2023-12-12
  • 重载toString实现JS HashMap分析

    重载toString实现JS HashMap分析

    用过Java的都知道,里面有个功能强大的数据结构——HashMap,它能提供键与值的对应访问。不过熟悉JS的朋友也会说,JS里面到处都是hashmap,因为每个对象都提供了map[key]的访问形式。
    2011-03-03
  • 定时器(setTimeout/setInterval)调用带参函数失效解决方法

    定时器(setTimeout/setInterval)调用带参函数失效解决方法

    setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式,setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式,详细使用方法可以参考下本文
    2013-03-03

最新评论