IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 妹妹老问JavaScript判断数据类型的方法,哥一次给你回答的明明白白! -> 正文阅读

[JavaScript知识库]妹妹老问JavaScript判断数据类型的方法,哥一次给你回答的明明白白!

判断数据类型的几种方法

话不多说,直奔正题。

1. typeof(常用于判断基本数据类型,对于引用数据类型全部返回Object)

  • 语法: typeof [检测数据] 返回数据的类型名称

  • 特点

    • 对于基本类型,除 null 以外,均可以返回正确的结果。
    • 对于引用类型,除 function 以外,一律返回 object 类型。
    • 对于 null ,返回 object 类型。
    • 对于 function 返回 function 类型。
      var str = '字符串类型';
      var num = 123;
      var bool = true;
      var bignum = BigInt("1234567890123456789012345678901234567890");
      var d = undefined;
      var n = null;
      var s = Symbol('foo');
      var obj = { a: 1 };
      var arr = [1, 2]
      console.log(typeof str);    // string 
      console.log(typeof num);    // number
      console.log(typeof bool);   // boolean
      console.log(typeof bignum); // bigint
      console.log(typeof d);     // undefined
      console.log(typeof n);     // object
      console.log(typeof s);     // symbol
      console.log(typeof obj);   // object
      console.log(typeof arr);   // object

2. instanceof(检测某一个实例的原型链上是否有这个类的原型属性)

  • 语法:[监测数据] instanceof [class] :返回true或false

  • 特点:

    • 可以区分复杂数据类型
    • 只要在当前实例的原型链上,我们用其检测出来的结果都是true
    • 基本类型值检测繁琐,且检测不全(undefined, null, symbol)
  • 原理:验证当前类的原型prototype是否会出现在实例的原型链__proto__上,只要在它的原型链上,则结果都为true。因此,instanceof 在查找的过程中会遍历左边变量的原型链,直到找到右边变量的 prototype,找到返回true,未找到返回false

  • 手写instanceof

  function myinstanceOf_(left, right) {
     let proto = left.__proto__;
       let prototype = right.prototype
       while (true) {
           if (proto == null) return false
           if (proto == prototype) return true
           proto = proto.__proto__;
       }
   }

3. constructor (用于引用数据类型)

  • 语法: 检测数据.constructor === class
  • 特点:
    • 适合使用在引用数据类型上
    • 原型链不会干扰
  • 原理:构造函数原型上有一个 constructor 属性指向构造函数自身的,如果在实例上使用 construtor 时,就会直接使用其构造函数原型的上的该属性,并指向其构造函数。
// 可以检测其构造函数
  console.log(Number(1).constructor === Number)
   console.log([].constructor === Array); // true
   console.log({}.constructor === Object);// true
   function Person() { }
   console.log(new Person().constructor === Person);// true

   // 原型链不会干扰
   console.log([].constructor === Object); // false

4. Object.prototype.toString.call()(对象原型链判断方法)

  • 语法:Object.prototype.toString.call(检测数据)
  • 特点:适用于所有类型的判断检测
  • 原理:Object.prototype.toString 表示一个返回对象类型的字符串,call()方法可以改变this的指向,那么把Object.prototype.toString()方法指向不同的数据类型上面,返回不同的结果
  console.log(Object.prototype.toString.call('asdb'))              // [object String]
  console.log(Object.prototype.toString.call(false))              // [object Boolean]
  console.log(Object.prototype.toString.call(123))               // [object Number]
  console.log(Object.prototype.toString.call(undefined))         // [object Undefined]
  console.log(Object.prototype.toString.call(Symbol(1)))         // [object Symbol]
  console.log(Object.prototype.toString.call(null))              // [object Null]
  console.log(Object.prototype.toString.call({ name: 'zs' }))   // [object Object]
  console.log(Object.prototype.toString.call([]))                // [object Array]
  console.log(Object.prototype.toString.call(function f1() { }))  // [object Function]
  console.log(Object.prototype.toString.call(new Date()))         // [object Date]
  console.log(Object.prototype.toString.call(/\d/))              // [object RegExp]

这里需要留意的是打印出来的结果是[object XXX]的字符串,我们需要的结果XXX需要进行字符串截取才能获得。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-15 16:04:45  更:2021-07-15 16:05:01 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年1日历 -2025/1/28 12:03:51-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码