详解JavaScript中的类型判断与类型转换

 更新时间:2023年07月31日 10:04:05   作者:布鲁斯要蓝调  
这篇文章主要给大家讲解一下JavaScript中的类型判断与类型转换的基本概念和使用方法,对我们的学习JavaScript的类型判断与转换有一定的帮助,需要的朋友可以参考下

类型判断

  • typeof:只能判断原始类型,并且判断null的时候会判断出null为'object';使用typeof判断 引用类型时:只能判断出function

  • Object.prototype.toString(): 因为区别对象、数组、函数单纯使用 typeof 只能判断为object对象,但是可以通过Object.prototype.toString方法,判断某个对象值属于哪种内置类型。 例:[object String] 1).如果this值是undefined,就会返回 [object Undefined] 2).如果this值是null,就会返回 [object Null] 3).生成变量 o,让 o 成为ToObject(this)的结果 4).让class成为 o 的内部属性[[class]]的值 5).最后返回由"[object 和 class 和 "]" 三个部分组成的字符串

例: console.log(Object.prototype.toString.call(new Date())); //[object Date]

  • 数组身上的判断方法:Array.isArray()

Array.isArray()方法用来判断某个方法是否是数组并且返回一个布尔值

  • instanceof:只能判断引用类型,不能判断原始类型,它是顺着原型链找的 ;但是数组也是属于Object 也可以判断出它是Object;instanceof用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

类型转换

对象转原始类型

js的类型转换只有三种类型的转换: to string, to boolean, to number

转number

调用 ToPrimitive (obj,Number)

  • 如果obj是基本类型,直接返回
  • 否则,调用ValueOf方法,如果得到一个原始类型.则返回
  • 否则,调用toString方法,如果得到一个原始类型.则返回
  • 否则报错 []==![] Number({})//NaN

转string

调用ToPrimitive (obj,String)

  • 如果obj是基本类型,直接返回
  • 否则,调用toString方法,如果得到一个原始类型.则返回
  • 否则,调用ValueOf方法,如果得到一个原始类型.则返回
  • 否则报错

隐式转换

一元操作符 : +'1'=>Number(1)=1 '+'会触发Number()

当+运算作为一元操作符时,会调用ToString()处理该值

二元操作符

v1+v2

  • lprim=ToPrimitive(v1)
  • rprim=ToPrimitive(v2)
  • 如果lprim或rprim是字符串,那么返回 ToString(lprim)和ToString(rprim)的拼接结果
  • 否则返回ToNumber(lprim)和否则ToNumber(rprim)的相加结果

==

当执行 x == y 时,

  • 如果x和y是同一类型,

    如果x是undefined,返回true

    如果x是null,返回true

    x是数字 x是NaN,返回false

    如果x和y指向同一个对象,返回true,否则返回fasle

  • 特例: null == undefined //true

  • 1 == 'h' 会先ToNumber('h')再判断

  • false == '1' 会先ToNumber('false') ToNumber('1')

  • true == {a:1} // ToPrimitive({a:1})

[] == ![]

!运算符优先级更高 先执行![] !为布尔 ![]为false []==false 然后有==将这两个向Number靠近 []为引用类型,调用ToPrimitive() 然后先调用valueOf()没有 再调用toString()转换成'' ''再转换成0 false转换成0 所以[] == ![]

到此这篇关于详解JavaScript中的类型判断与类型转换的文章就介绍到这了,更多相关JavaScript类型判断与转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js控制滚动条缓慢滚动到顶部实现代码

    js控制滚动条缓慢滚动到顶部实现代码

    滚动条缓慢滚动到顶部这样的效果想必大家在浏览网页的时候都有见过吧,本文使用js实现下,感兴趣的你可不要错过了哈,希望可以帮助到你
    2013-03-03
  • JS实现浏览器状态栏文字从右向左弹出效果代码

    JS实现浏览器状态栏文字从右向左弹出效果代码

    这篇文章主要介绍了JS实现浏览器状态栏文字从右向左弹出效果,涉及JavaScript结合时间函数遍历字符串及动态改变状态栏显示效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • webpack热模块替换(HMR)/热更新的方法

    webpack热模块替换(HMR)/热更新的方法

    模块热替换(HMR)的作用是,在应用运行时,无需刷新页面,便能替换、增加、删除必要的模块,本篇文章主要介绍了webpack热模块替换(HMR)/热更新的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Javascript如何实现对象扁平化实例详解

    Javascript如何实现对象扁平化实例详解

    这篇文章主要给大家介绍了关于Javascript如何实现对象扁平化的扁平化处理简而言之就是对对象中的对象提取出来,放在一个对象里面,形象的说就是把儿子的后代当成自己的儿子,下面相关资料,需要的朋友可以参考下
    2022-11-11
  • JavaScript编程学习技巧汇总

    JavaScript编程学习技巧汇总

    这篇文章主要介绍了JavaScript编程学习技巧汇总,整理了编程技巧、实用函数、简洁方法、编程细节等相关资料,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JavaScript6 let 新语法优势介绍

    JavaScript6 let 新语法优势介绍

    这篇文章主要介绍了JavaScript6 let 新语法优势介绍的相关资料,需要的朋友可以参考下
    2016-07-07
  • Webpack处理js资源(Eslint、Babel)

    Webpack处理js资源(Eslint、Babel)

    Webpack对js处理是有限的,只能编译js中ES模块化语法,不能编译其他语法,导致js不能在IE等浏览器运行,本文主要介绍了Webpack处理js资源,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • 鼠标滑过出现预览的大图提示效果

    鼠标滑过出现预览的大图提示效果

    这篇文章主要介绍了如何实现鼠标滑过出现预览的大图提示效果,需要的朋友可以参考下
    2014-02-02
  • 基于javascript的异步编程实例详解

    基于javascript的异步编程实例详解

    这篇文章主要介绍了基于javascript的异步编程,结合实例形式分析了javascript异步编程的原理、实现技巧与相关注意事项,需要的朋友可以参考下
    2017-04-04
  • 很不错的两款Bootstrap Icon图标选择组件

    很不错的两款Bootstrap Icon图标选择组件

    这篇文章主要介绍了不容错过的两款Bootstrap Icon图标选择组件,支持自定义的图标,拿出来分享下,绝对的干货,感兴趣的小伙伴们可以参考一下
    2016-01-01

最新评论