JS中的四种数据类型判断方法

 更新时间:2022年05月25日 16:45:56   作者:前端点线面来源  
js有多种数据类型(Number(数值)、String(字符串)、Boolean(布尔值)、Null、Undefined、Symbol、Object、函数等),在开发过程中难免需要判断数据类型,本文总结了四种判断方法给大家分享,需要的朋友可以参考一下

本文总结了四种判断方法:

1、typeof

typeof是一个运算符,其有两种使用方式:(1)typeof(表达式); (2)typeof 变量名;返回值是一个字符串,用来说明变量的数据类型;所以可以用此来判断number, string, object, boolean, function, undefined, symbol 这七种类型,每种情况返回的内容如下表所示:

// 字符串 
console.log(typeof('lili')); // string 
// 数字 
console.log(typeof(1)); // number 
// 布尔值 
console.log(typeof(true)); // boolean 
// undefined 
console.log(typeof(undefined)); // undefined 
// 对象 
console.log(typeof({})); // object 
// 数组 
console.log(typeof([])); // object 
// null 
console.log(typeof(null)); // object 
// 函数 
console.log(typeof(() => {})); // function 
// Symbol值 
console.log(typeof(Symbol())); // symbol 

2、instanceof

instanceof运算符用于检测构造函数的 prototype属性是否出现在某个实例对象的原型链上,返回值为布尔值,用于指示一个变量是否属于某个对象的实例。其语法如下所示:

object instanceof constructor 

const arr = [1, 2]; 
// 判断Object的prototype有没有在数组的原型链上 
console.log(arr instanceof Object); // true 
// 数组arr的原型 
const proto1 = Object.getPrototypeOf(arr); 
console.log(proto1); // [] 
// 数组arr的原型的原型 
const proto2 = Object.getPrototypeOf(proto1); 
console.log(proto2); // [] 
// Object的prototype 
console.log(Object.prototype); 
// 判断arr的原型是否与Object的prototype相等 
console.log(proto1 === Object.prototype); // false 
// 判断arr的原型的原型是否与Object的prototype相等 
console.log(proto2 === Object.prototype); // true 
 


3、constructor

该种判断方式其实涉及到原型、构造函数和实例之间的关系,更深层次的讲解将放到后面的内容,下面只需要简单了解一下这三者关系即可。

在定义一个函数(构造函数)的时候,JS引擎会为其添加prototype原型,原型上有其对应的constructor属性指向该构造函数,从而原型和构造函数之间互相知道对方。当构造函数实例化的时候,会产生对应的实例,其实例可以访问对应原型上的constructor属性,这样该实例就可以了解到通过谁产生了自己,这样就可以在新对象产生之后了解其数据类型。

const val1 = 1; 
console.log(val1.constructor); // [Function: Number] 
const val2 = 'abc'; 
console.log(val2.constructor); // [Function: String] 
const val3 = true; 
console.log(val3.constructor); // [Function: Boolean] 


虽然该方法可以判断其数据类型,但存在两个缺点:

  • null undefined 是无效的对象,因此是不会有 constructor 存在的,这两种类型的数据需要通过其他方式来判断。
  • 函数的 constructor 是不稳定的,这个主要体现在自定义对象上,当开发者重写 prototype 后,原有的 constructor 引用会丢失,constructor 会默认为 Object

4、toString()

toString() Object 的原型方法,调用该方法,默认返回当前对象的 [[Class]] 。这是一个内部属性,其格式为[object Xxx] ,其中 Xxx 就是对象的类型。所以利用Object.prototype.toString()方法可以对变量的类型进行比较准确的判断。

该类型针对不同不同变量的类型返回的结果如下所示:

利用该方法很容易构建一个鉴型函数,代码如下所示:

function type(target) { 
    const ret = typeof(target); 
    const template = { 
        "[object Array]": "array",  
        "[object Object]":"object", 
        "[object Number]":"number - object", 
        "[object Boolean]":"boolean - object", 
        "[object String]":'string-object' 
    } 
    if(target === null) { 
        return 'null'; 
    } 
    else if(ret == "object"){ 
        const str = Object.prototype.toString.call(target); 
        return template[str]; 
    } 
    else{ 
        return ret; 
    } 
} 

console.log(type({})); // object 
console.log(type(123)); // number 
console.log(type('123')); // string 

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

相关文章

  • sockjs前端WebSocket二次封装示例详解

    sockjs前端WebSocket二次封装示例详解

    这篇文章主要为大家介绍了sockjs前端WebSocket二次封装示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 详解使用yeoman打造自己的项目脚手架

    详解使用yeoman打造自己的项目脚手架

    这篇文章主要为大家介绍了使用yeoman打造自己的项目脚手架实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 微信小程序页面开发注意事项整理

    微信小程序页面开发注意事项整理

    这篇文章主要介绍了微信小程序页面开发注意事项整理的相关资料,需要的朋友可以参考下
    2017-05-05
  • unified如何处理markdown解析器详解

    unified如何处理markdown解析器详解

    这篇文章主要为大家介绍了unified如何处理markdown解析器详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 微信小程序之选项卡的实现方法

    微信小程序之选项卡的实现方法

    这篇文章主要介绍了 微信小程序之选项卡的实现方法的相关资料,希望大家通过本文能实现这样的功能,需要的朋友可以参考下
    2017-09-09
  • 前端算法leetcode109题解有序链表转换二叉搜索树

    前端算法leetcode109题解有序链表转换二叉搜索树

    这篇文章主要为大家介绍了前端算法leetcode109题解有序链表转换二叉搜索树示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Canvas如何判断点在形状内及内置API性能详解

    Canvas如何判断点在形状内及内置API性能详解

    这篇文章主要为大家介绍了Canvas如何判断点在形状内及内置API性能详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 微信小程序 scroll-view组件实现列表页实例代码

    微信小程序 scroll-view组件实现列表页实例代码

    这篇文章主要介绍了微信小程序 scroll-view组件实现列表页实例代码的相关资料,scroll-view组件介绍scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端经常会看到的上拉加载 ,需要的朋友可以参考下
    2016-12-12
  • 详解如何在 JavaScript中使用媒体查询

    详解如何在 JavaScript中使用媒体查询

    这篇文章主要为大家介绍了详解如何在 JavaScript中使用媒体查询,<BR>有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 微信小程序 flex实现导航实例详解

    微信小程序 flex实现导航实例详解

    这篇文章主要介绍了微信小程序 flex实现导航实例详解的相关资料,需要的朋友可以参考下
    2017-04-04

最新评论