js类型判断 判断Null和Undefined

javaScript中判断数据类型的方法主要有三种:

​ **typeof:**原理是通过根据变量的机器码来判断

instanceof:根据 构造函数的 prototype 属性是否出现在某个实例对象的原型链上

typeof

序号 类型 结果
1 Undefined “undefined”
2 Null “object”
3 Boolean “boolean”
4 Number “number”
5 BigInt(ECMAScript 2020 新增) “bigint”
6 String “string”
7 Symbol (ECMAScript 2015 新增) “symbol”
8 Function 对象 (按照 ECMA-262 规范实现 [[Call]]) “function”
9 任何对象(Array) “object”
10 宿主对象(由 JS 环境提供) 取决于具体实现

这里有两个地方需要注意

  1. 第一个是 typeof null的结果是"object"

    javaSctript在底层存储变量的时候,会在变量的机器码的低位1-3位存储其类型信息:

    • 000:对象
    • 010:浮点数
    • 100:字符串
    • 110:布尔
    • 1:整数

    null:所有机器码均为0

    undefined:用 −2^30 整数来表示

    所以,typeof 在判断 null 的时候就出现问题了,由于 null 的所有机器码均为0,因此直接被当做了对象来看待。

  2. 还有就是表中最后一条,宿主对象(由 JS 环境提供)的结果是取决于具体情况

instanceof

  1. 用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上,所以instanceof 判断的是对象的实例,理解这一点非常关键

     let simpleStr = "This is a simple string";simpleStr instanceof String;  // 返回 false, 非对象实例,因此返回 falselet str = String('aa')str instanceof Object // false'aaa' instanceof Object // false
    
  2. 正确的使用方法,只能判断通过new创建的字符串,也是instanceof 的缺陷

    let myString  = new String();
    let newStr    = new String("String created with constructor");
    let myDate    = new Date();
    let myObj     = {};myString  instanceof String; // 返回 true
    newStr    instanceof String; // 返回 true
    myDate  instanceof Object; // 返回 true
    myObj instanceof Object;    // 返回 true, 尽管原型没有定义
    ({})  instanceof Object;    // 返回 true, 同上
    
  3. 只能判断实例对象是否h在某一条原型链上,而不能直接判断实例对象是什么类型

     // Object.getPrototypeOf( o ) === Object.prototype,因为这几个对象都是在Object的原型链上,所以都是true
    Array instanceof Object // true
    Function instanceof Object // true
    String instanceof Object // true
    Date instanceof Object   // true
    RegExp instanceof Object // true
    Reflect instanceof Object // true
    ...
    
  4. 如果要instanceof判断变量l类型,一般要具体到某一变量类型,不能判断unll和undefined

    // 判断是否是函数
    function fn(){}
    fn instanceof Function // true
    let fn2 = ()=>{};
    fn2 instanceof Function // true// 判断是否是对象
    ({}) instanceof Object // true// 判断是否是数组
    [] instanceof Array // true
    let list = new Array
    list instanceof Array // true// 判断是否是字符串
    let str = 'aaa'
    str instanceof Object // false,str不是String 的实例
    let str = new String()
    str instanceof String // true// 判断哪是否是null
    null instanceof null  // 报错 Uncaught TypeError: Right-hand side of 'instanceof' is not an object// 判断是否是undefined
    undefined instanceof undefined // Uncaught TypeError: Right-hand side of 'instanceof' is not an object
    
  5. 判断存在继承关系的对象实例

    function Car(make, model, year) {this.make = make;this.model = model;this.year = year;
    }
    var mycar = new Car("Honda", "Accord", 1998);
    var a = mycar instanceof Car;    // 返回 true
    var b = mycar instanceof Object; // 返回 true
    

Object.prototype.toString


Object.prototype.toString.call(1) // "[object Number]"Object.prototype.toString.call('hi') // "[object String]"Object.prototype.toString.call({a:'hi'}) // "[object Object]"Object.prototype.toString.call([1,'a']) // "[object Array]"Object.prototype.toString.call(true) // "[object Boolean]"Object.prototype.toString.call(() => {}) // "[object Function]"Object.prototype.toString.call(null) // "[object Null]"Object.prototype.toString.call(undefined) // "[object Undefined]"Object.prototype.toString.call(Symbol(1)) // "[object Symbol]"

总结:

typeof 和instanceof的缺点
  1. typeof:

    判断null的结果为“object”,是jasascript诞生就存在的bug

  2. instanceof:

    1、判断null 和undefined 的时候会报错

    2、在判断字符串的时候,如果不是通过new 方式创建的字符串,得到的结果为fasle

    let str = 'this is string; str instanceof String' 接口为fasle

    3、如果更改了对象的原型,那么得到结果也是不准确的

    var o = new C();
    o instanceof C; // true,因为 Object.getPrototypeOf(o) === C.prototype
    C.prototype = {};
    o instanceof C; // false,C.prototype 指向了一个空对象,这个空对象不在 o 的原型链上.
    

    需要注意的是,如果表达式 obj instanceof Foo 返回 true,则并不意味着该表达式会永远返回 true,因为 Foo.prototype 属性的值有可能会改变,改变之后的值很有可能不存在于 obj 的原型链上,这时原表达式的值就会成为 false。另外一种情况下,原表达式的值也会改变,就是改变对象 obj 的原型链的情况,虽然在目前的ES规范中,我们只能读取对象的原型而不能改变它,但借助于非标准的 __proto__ 伪属性,是可以实现的。比如执行 obj.__proto__ = {} 之后,obj instanceof Foo 就会返回 false 了。

typeof 和instanceof的使用场景
  1. typoof和instanceof 都无法判断Null ,我们需要通过其他方式判断null

    // null 与自己比较,总是返回
    null === null // true// typeof exp != "undefined" 排除了 undefined
    function isNull(value) {if (!value && typeof value != "undefined" && value != 0) {return true;} else {return false;}}
    
  2. typeof 可以判断undefined,而 instanceof,判断会报错

    undefined === undefined // true
    typeof undefined // "undefined"
    undefined instanceof undefined // Uncaught TypeError: Right-hand side of 'instanceof' is not an object
    
  3. typeof 无法判断Array 和Object,instanceof 可以

    typeof []  // "object"function fn(){};
    fn instanceof Function // true
    
  4. type 判断undefined 和null的区别(两个变量类型之间)

    typeof undefined // "undefined"
    typeof null // "object"//  undefined 和 null 之间要又 三等运算符
    undefined == null // true
    undefined === null // false
    undefined != null // false
    undefined !== null  // true
    

推荐阅读:

掘金:https://juejin.cn/post/6967727936216498190

掘金:https://juejin.cn/post/6844903613584654344#heading-2

MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof

MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/instanceof

JavaScript 类型判断 判断Null和Undefined相关推荐

  1. JavaScript的数据类型、null 和undefined、原始数据类型和引用数据类型等JavaScript基础知识总结

    一.JavaScript里有哪些数据类型,解释清楚null 和undefined,解释清楚原始数据类型和引用数据类型.比如讲一下1 和Number(1)的区别 数据类型: undefined,没有定义 ...

  2. javaScript基础面试题 ---null 与 undefined

    null 与 undefined 奇怪点 原因 具体区别 奇怪点 有点奇怪的是:JavaScript语言竟然拥有两个表示"无"的值:undefined与null.这是为什么? 原因 ...

  3. javascript中对变量类型的判断

    在JavaScript中,有5种基本数据类型和1种复杂数据类型,基本数据类型有:Undefined,Null,Boolean, Number和String:复杂数据类型是Object,Object中还 ...

  4. JavaScript类型判断

    JS(ES6)中的基本数据类型:1.数值型(Number):包括整数.浮点数.2.布尔型(Boolean).3.字符串型(String).4.数组(Array).5.空值(Null) .6.未定义(U ...

  5. 手把手带你写一个JavaScript类型判断小工具

    业务写了很多,依然不是前端大神,我相信这是很多'入坑'前端开发同学的迷茫之处,个人觉得前端职业发展是有路径可寻的,前期写业务是一个积累过程,后期提炼总结,比如编程思想,父子类的原型继承,还是对象之间的 ...

  6. javascript 类型及类型判断

    js中的类型: 标准类型:Number.String.Boolean.Null.Undefined 内置对象类型:Function.Array.Date.RegExp.Math.JSON... 类型识 ...

  7. js判断null_JavaScript中的undefined和null

    大家都知道,undefined和null都是JavaScript中基本数据类型之一.先来看看两者的定义: undefined:未定义的值,表示一个变量的原始状态,而非人为操作的结果,常出现在以下情况: ...

  8. 原生JavaScript类型判断

    第1问:js中的数据类型有哪些? 1.1 原始数据类型:共有7种 Boolean Number String undefined null Bigint Symbol 1.2 引用数据类型:1种 Ob ...

  9. php undefined 判断,JS中如何判断null、undefined与NaN

    javascript中如何判断一个变量是否是null,undefined还是NaN呢?下面我们看看具体的判断方法吧. 主要是通过 typeof 这个方法去判断,typeof 返回的是字符串,有六种可能 ...

最新文章

  1. Gradient Descent梯度下降(透彻分析)
  2. c语言aba字母塔,打印字母金字塔,昨晚看到某个帖子的题目
  3. 进程状态控制-进程创建
  4. 果园机器人能干什么_24* 果园机器人优秀教学实录
  5. 开源服务专题之------ssh防止暴力破解及fail2ban的使用方法
  6. 机器学习模型 知乎_机器学习中有哪些模型?
  7. spring框架如何调用异步方法?快进来学学吧
  8. Spring Bean的作用域及生命周期
  9. 阿里开发者们的第15个感悟:做一款优秀大数据引擎,要找准重点解决的业务场景
  10. ViewPager做出广告轮播特效
  11. RabbitMQ实现多系统间的分布式事务,保证数据一致性
  12. ThreadLocal类学习笔记
  13. python3 Tkinter GUI 试水
  14. 原生 JavaScript 实现扫雷
  15. Jquery实现可拖动进度条
  16. iOS经典讲解之Socket使用教程
  17. 程序员做自媒体,龙叔教你怎么快速成为优秀博主【CSDN篇】
  18. 如何让语音芯片与功放芯片之间更好地配合让音效更好
  19. 电子书chm转换html,chm转换为html的超简单方法
  20. 找到一个数组对象中 '某某某(属性名)'为 ['某某','某某']的值

热门文章

  1. 一个完整的html文档必须包含3个,HTML骨架结构
  2. 怎样将Activity设置成窗口模式
  3. 数据结构之队列知识与习题练习
  4. python输出1到100整数_python第一个代码程序打印1到100整数
  5. Linux:创新本应“以人为本”
  6. flutter入门(1)
  7. 莽荒纪计算机游戏,莽荒纪HD 电脑版
  8. 化学家V1.1.0正式版
  9. SWUST OJ#978 #979 #980 二叉树的遍历
  10. 鄂尔多斯房价崩盘阵痛:老总2年都在催账还账