资讯专栏INFORMATION COLUMN

JavaScript核心概念(1):类型转换

tracymac7 / 1160人阅读

摘要:核心内置类,会尝试先于可以理解为对象优先转换成数字例外的是,利用的是转换。非核心的对象,通过自己的实现中定义的方法转换成原始值。

本文首发于个人博客

看到这个是不是有一种想打人的感觉,垃圾 JavaScript,这特么都什么鬼,相信很多人不管是笔试还是面试,都被 JS 的类型转换难道过,相信认真看完我这篇文章,妈妈再也不用担心类型转换的问题了。

原始值到原始值的转换

原始值转化为布尔值

所有的假值(undefined、null、0、-0、NaN、””)会被转化为 false,其他都会被转为 true

原始值转化为字符串
都相当于 原始值 + ""

原始值转为数字

布尔转数字:true -> 1, false -> 0

字符串转数字:以数字表示的字符串可以直接会转为字符串,如果字符串头尾有空格会忽略,但是空格在中间,转换结果就是 NaN。

  +" 66" // 66
  +" 6 7 " // NaN

原始值到对象的转换

null 和 undefined 转对象直接抛异常

原始值通过调用 String()、Number()、Boolean()构造函数,转换为他们各自的包装对象

对象到原始值的转换

对象转为布尔都为 true

对象到字符串

如果对象有 toString() 方法,就调用 toString() 方法。如果该方法返回原始值,就讲这个值转化为字符串。

如果对象没有 toString() 方法或者 该方法返回的不是原始值,就会调用该对象的 valueOf() 方法。如果存在就调用这个方法,如果返回值是原始值,就转化为字符串。

否则就报错

对象到数字

对象转化为数字做了跟对象转化为字符串做了想同的事儿,不同的是后者是先调用 valueOf 方法,如果调用失败或者返回不是原始值,就调用 toString 方法。

补充。一些常用内置对象 toString 方法和 valueOf 的转换规则

toString 相关

- valueOf 相关

== 运算符如何进行类型转换

如果一个值是null,另一个值是undefined,则相等

如果一个是字符串,另一个值是数字,则把字符串转换成数字,进行比较

如果任意值是true,则把true转换成1再进行比较;如果任意值是false,则把false转换成0再进行比较

如果一个是对象,另一个是数值或字符串,把对象转换成基础类型的值再比较。对象转换成基础类型,利用它的 toString 或者 valueOf 方法。 js 核心内置类,会尝试 valueOf 先于 toString(可以理解为对象优先转换成数字);例外的是 Date,Date 利用的是 toString 转换。非 js 核心的对象,通过自己的实现中定义的方法转换成原始值。

+ 运算符如何进行类型转化

如果作为一元运算符就是转化为数字,常常用来将字符串转化为数字

+"2" //  2
2+false // 0

如果作为二元运算符就有两种转换方式

两边如果有字符串,另一边一会转化为字符串进行相加

如果没有字符串,两边都会转化为数字进行相加,对象也根据前面的方法转化为原始值数字。

如果其中的一个操作数是对象,则将对象转换成原始值,日期对象会通过 toString() 方法进行转换,其他对象通过 valueOf()方法进行转换,但是大多数方法都是不具备可用的 valueOf() 方法,所以还是会通过 toString() 方法执行转换。

流程图如下:

实战分析 1. []+[] // ""

_1. 首先运算符是 + 运算符而且很明显是二元运算符,并且有对象,所以选择最后一点,操作数是对象,将对象转换为原始值。

_2. 两边对象都是数组,左边的数组先调用 valueOf() 方法无果,然后去调用 toString(), 方法,在 toString() 的转化规则里面有『将数组转化为字符串,用逗号分隔』,由于没有其他元素,所以直接是空字符串 “”。

![](https://user-gold-cdn.xitu.io/2018/8/7/165124228cd61ccc?w=236&h=64&f=png&s=2453)

_3. 因为加号有一边是字符串了,所以另外一边也转为 字符串,所以两边都是空字符串 “”。

_4. 所以加起来也是空字符串 “”。

2. (! + [] + [] + ![]).length // 9

_1. 首先我们会看到挺多一元运算符,「+」、「!」,对于一元运算符是右结合性,所以可以画出以下运算顺序。

_2. 对于+[],数组是会被转化为数字的而不是字符串,可见「+ 运算符如何进行类型转化」的第一条,所以经过第一步就会转化为

(!0 + [] + "false").length

_3. 第二步比较简单,0 转化为布尔值就是 false,所以经过第二步就转化为

(true + [] + "false").length

_4. 第三步中间的 []会转为空字符串,在「+ 运算符如何进行类型转化」第二条的第三点,对象会被转转化为原始值,就是空字符,所以经过第三步之后就会变成

("true" + "false").length

_5. 第五步就比较简单啦,最终就是

"truefalse".length // 9

附录:


《JavaScript权威指南》中类型转换表格


个人公众号,欢迎继续交流

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96800.html

相关文章

  • 33 个 js 核心概念(四):显式 (名义) 与 隐式 (鸭子)类型转换

    摘要:相对于显式使用,隐式转换则更加简洁。隐式转换为布尔值将其他类型值隐式转换为布尔值是我们最常用的一种转换。在以下场景中,都是进行判断,而只要传入的值不是布尔值,都会通过隐式类型转换转为布尔值。原文地址阿木木的博客与隐式鸭子类型转换 showImg(https://segmentfault.com/img/remote/1460000017309581); 前言 说实话,JavaScrip...

    hoohack 评论0 收藏0
  • jsweet中英文文档,java代码转js代码

    摘要:例如允许的对象默认情况下,通过使用内置宏将核心对象和方法映射到。例如这被转换为以下代码类可以定义构造函数,具有超类,并且可以像在中一样实例化。因此,它不违反原则。用于声明该对象可以用作构造函数。 这个工具可以将java代码转为js代码,从而可以使用java编写前端代码 如果排版看着费劲可以下载下方html,打开html后使用google翻译 JSweet语言规范版本:2.x(快照) 作...

    Near_Li 评论0 收藏0
  • jsweet中英文文档,java代码转js代码

    摘要:例如允许的对象默认情况下,通过使用内置宏将核心对象和方法映射到。例如这被转换为以下代码类可以定义构造函数,具有超类,并且可以像在中一样实例化。因此,它不违反原则。用于声明该对象可以用作构造函数。 这个工具可以将java代码转为js代码,从而可以使用java编写前端代码 如果排版看着费劲可以下载下方html,打开html后使用google翻译 JSweet语言规范版本:2.x(快照) 作...

    Mr_houzi 评论0 收藏0
  • JavaSceipt核心语法——运算符

    摘要:运算符运算符一共分为六种算数运算符比较运算符逻辑运算符赋值运算符字符串联接运算符条件运算符运算符的概念提供的一组用于操作数据值的运算符操作符。这些运算符可以按照作用的不同或者操作变量数量的不同进行分类。 运算符 ——运算符一共分为六种;1.算数运算符2.比较运算符3.逻辑运算符4.赋值运算符5.字符串联接运算符6.条件运算符——运算符的概念;JavaScript提供的一组用于操作数据值...

    刘德刚 评论0 收藏0
  • JavaScript学习笔记系列(一)

    摘要:只是浏览器只是实现可能的宿主环境之一,其他宿主环境包括和。级别级由两个模块组成核心和。有效不推荐有一点必须注意,即用操作符定义的变量将成为定义该变量的作用域的局部变量。会返回判断相等符认为两者相等。显示因此尽量避免这样运算。 一:JavaScript组成部分 JavaScript是由三个不同部分组成的,核心(ECMAScript) 、文档对象模型(DOM)和浏览器对象模型(BOM)。 ...

    Andrman 评论0 收藏0

发表评论

0条评论

tracymac7

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<