js基础-数据类型检测

1、typeof关键字

  1. 返回一个字符串,作用于基本数据类型
  2. 直接在计算机底层基于数据类型的值(二进制) 进行检测。
  3. typeof null "object" 对象存储在计算机中,都是以000 开始的二进制存储,null也是,所以检测出来的结果是对象。
  4. typeof 普通对象/数组对象/正则对象/日期对象 "object"

2、instanceof 关键字

  1. 返回一个布尔值 ,左边是 检测对象 右边是判断的类型 class
  2. 底层机制:只要当前类出现在实例的原型上,结果都是 true
  3. 由于我们可以肆意的修改原型的指向,所以检测的结果不准的
  4. 不能检测基本数据类型

arr instanceof Array ==>true

arr instanceof RegExp == >false

arr instanceof Object ==> true

1 instanceof Number ==> false

javascript 复制代码
// 实例.__proto__ === 类.prototype
function instance_of(ex,cl) {
    let classFunP = cl.prototype,
        proto = ex.getPrototypeOf(ex);
    while(true) {
        if(proto === null) {
            return false;
        }
        if( proto === classFunP ) {
            return true;
        }
         proto = Object.getPrototypeOf(proto);
     }


}

3、constructor属性

  1. 用起来看似比instanceof 还好用一些(基本类型支持的)
  2. constructor可以随便改,所以也不准。

arr.constructor == Array // true

arr.constructor == RegExp // false

arr.constructor == Object // false

1.constructor == Number // true

4、Object.prototype.toString().call([value])

  1. 标准检测数据类型的方法:Object.prototype.toString 不是转换为字符串,是返回当前实例所属类的信息。
  2. 标准的检测的方法 "[object Number/String/Boolean/Null/Undefined/Symbol/Onject/Array/Regexp/Date]"

最后总结的封装的方法

javascript 复制代码
const defaultTypeMap = {
  "object Number": "number",
  "object String": "string",
  "object Boolean":"boolean",
  "object Array": "array",
  "object Object": "object",
  "object Date": "date",
  "object Function": "function",
  "object Error": "error",
  "object RegExp": "regExp",
  "object Symbol": "symbol",
}

function typeCheck(value) {
    // 如果是null 或者 undefined 直接返回
  if(value == null) {
    return value + "";
  }
  const toString = Object.prototype.toString;

  return typeof value == "object" || typeof value == "function" ? defaultTypeMap[toString.call(value)]   || "object": typeof value; 
}
相关推荐
waicsdn_haha6 分钟前
Java/JDK下载、安装及环境配置超详细教程【Windows10、macOS和Linux图文详解】
java·运维·服务器·开发语言·windows·后端·jdk
_WndProc8 分钟前
C++ 日志输出
开发语言·c++·算法
web1478621072310 分钟前
C# .Net Web 路由相关配置
前端·c#·.net
m0_7482478011 分钟前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
飞的肖14 分钟前
前端使用 Element Plus架构vue3.0实现图片拖拉拽,后等比压缩,上传到Spring Boot后端
前端·spring boot·架构
qq_4335545417 分钟前
C++ 面向对象编程:+号运算符重载,左移运算符重载
开发语言·c++
青灯文案121 分钟前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_7482548826 分钟前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
数据小爬虫@36 分钟前
如何高效利用Python爬虫按关键字搜索苏宁商品
开发语言·爬虫·python
ZJ_.38 分钟前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps