资讯专栏INFORMATION COLUMN

前端碎碎念 之 [] + {} 和 {} + []一样吗?

Soarkey / 954人阅读

摘要:前端碎碎念系列会记录我平时看书或者看文章遇到的问题,一般都是比较基础但是容易遗忘的知识点,你也可能会在面试中碰到。当两个操作数都是数值时,执行常规的数值加法计算。关键还是要加深对中对数值转换的理解,以不变应万变。

『前端碎碎念』系列会记录我平时看书或者看文章遇到的问题,一般都是比较基础但是容易遗忘的知识点,你也可能会在面试中碰到。 我会查阅一些资料并可能加上自己的理解,来记录这些问题。更多文章请前往我的个人博客

这道题跟之前提到的[] == ![] 有异曲同工之妙,都是涉及到了隐式的强制类型转换。同样,我们直接开门见山,总结下加号操作符的运算规则。下面规则判断权重由上往下。

两个操作数都是数值 时,执行常规的数值加法计算。但有几个值的考虑

如果有一个操作数是NaN, 则结果是NaN;

Infinity 加 Infinity 结果是 Infinity;

-Infinity 加 -Infinity 结果是 -Infinity;

Infinity 加 -Infinity 结果是NaN;

+0 加 +0 结果是+0;

-0 加 -0 结果是 -0;

+0 加 -0 结果是+0;

当有 一个操作数是字符串 时,应用如下规则:

如果两个操作数都是字符串,则将两个字符串拼接起来;

如果只有一个操作符是字符串,则两另一个操作符转换为字符串(toString),然后再将两个字符串拼接起来。

前面两条规则都非常简单,不会有混淆。对于其他情况,我总结了下面两条规则:

有一个操作数是复杂数据类型(对象,数组) 时,将两个操作数都转换为字符串(ToString)相加。

有一个操作数是简单数据类型(true/false, null,undefined) 时,同时不存在复杂数据类型和字符串,则将两个操作数都转换成数值(ToNumber)相加。

另外还有一种特殊情况{} + 头 的相加式,有些浏览器会将{}视为一个块符号,所以不会参与相加,而是把+符号视为转换符(Number)将后面的操作数转换为数值。

注意上面的规则的权重是从上到下的,每执行一步要从第一条规则开始再进行判断。

下面是改规则的一个判断流程图:

我们来看看这几道题

1.[] + {}

根据规则,[] 和 {} 都是复杂数据类型,满足有一个操作符是复杂数据类型, 所以将两个值都转换为字符串,调用其toString方法,得到:

"" + "[object Object]" = "[object Object]"

2.1+{}

同样满足第三条规则,结果为

"1" + "[object Object]" = "1[object Object]"

3."1" + false

其中false满足第4条规则,但同时满足第2条规则"1"是字符串,优先处理第2条规则。所以处理结果应该是将false转为字符串

"1" + "false" = "1false"

看看题目中的 {} + []

按规则计算结果应该是
"[object Object]"

但是控制台打印出来的结果却是0,别忘了第5条,当{}+开头的时候,{}并不参与计算,只是被单做一个空的代码块,所以{}+[]实际上是+[], 即Number([]) => Number("") => 0

那么{}+{}就是+{},等于Number({}) => Number("[object Object]") => NaN
然而我们看到结果再次出乎我们的意料,控制台输出的是
"[object Object][object Object]"

到底是怎么回事?

原来对于{}+{}
不同浏览器会有不同的处理结果,在chrome中会输出"[object Object][object Object]",在firefox会输出NaN
这应该是不同浏览器的js引擎解析差异引起的。我们只要记住这个特殊情况就行了。

其实这些特殊值的计算我们平时都很少接触到,也没有多大的意义。关键还是要加深对JS中对数值转换的理解,以不变应万变。到真正遇到问题的时候,不至于摸不着头脑。

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

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

相关文章

  • 前端碎碎 为什么[] == ![] ?

    摘要:判断步骤如下如果有一个操作数是布尔值,则在比较相等性之前先将其转换为数值转换为,而转换为。实际上是对比运用上面的顺序,是布尔值,所以转化为数值为。 『前端碎碎念』系列会记录我平时看书或者看文章遇到的问题,一般都是比较基础但是容易遗忘的知识点,你也可能会在面试中碰到。 我会查阅一些资料并可能加上自己的理解,来记录这些问题。更多文章请前往我的个人博客 类似标题中的问题还有很多,例如: 为...

    isaced 评论0 收藏0
  • 前端碎碎 nextTick, setTimeout 以及 setImmediate 三者的执行

    摘要:更多文章请前往我的个人博客这个问题是有关执行顺序和的。其中,整体代码,可以理解为待执行的所有代码。当队列执行完后再执行一个任务。然后再次回到新的事件循环。所以两个执行完后队列里只剩下第一个里的。 『前端碎碎念』系列会记录我平时看书或者看文章遇到的问题,一般都是比较基础但是容易遗忘的知识点,你也可能会在面试中碰到。 我会查阅一些资料并可能加上自己的理解,来记录这些问题。更多文章请前往我...

    Cciradih 评论0 收藏0
  • 盒模型的一些碎碎

    摘要:盒模型的简介本文简单的总结了一些基本概念,知识点以及细节问题作为前端人员,盒模型是最基础的知识点,在排版与布局时不可避免与盒模型打交道。 1. 盒模型的简介 本文简单的总结了一些基本概念,知识点以及细节问题 作为前端人员,盒模型是最基础的知识点,在排版与布局时不可避免与盒模型打交道。 在我们编写HTML时,网页上的内容几乎都是被包在一个个元素(当然也可以叫做标签)中的,最常见的有div...

    王伟廷 评论0 收藏0
  • 关于C++基础的一些“碎碎

    摘要:使用命名空间的目的是对标识符的名称进行本地化,以避免命名冲突或名字污染,关键字的出现就是针对这种问题的。缺省参数概念缺省参数是声明或定义函数时为函数的参数指定一个默认值。 ...

    Jackwoo 评论0 收藏0
  • 请求与响应

    摘要:请求与响应请求的组成的四部分动词路径协议版本要上传的数据关于以上各部分内容的碎碎念请求最多包含四部分,最少包含三部分。 HTTP 请求与响应 HTTP 请求的组成的四部分: 1 动词 路径 协议/版本2 Key1: value12 Key2: value22 Key3: value32 Content-Type: application/x-www-form-urlencoded2 H...

    BLUE 评论0 收藏0

发表评论

0条评论

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