关于前端:20个稀奇古怪的-JavaScript-表达式

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq44924588… 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

JavaScript 是一种十分容错的编程语言，许多在其余编程语言中不非法的表达式在 JavaScript 中都能失常工作。

这导致了很多奇怪的代码。你想挑战它吗？

挑战

在这个挑战中，你将看到 20 个乖僻表达式，并要猜出其输入后果。

1.

true + false

2.

**1.**

3.

[1, 2, 3] + [4, 5, 6]

4.

0.2 + 0.1 === 0.3

5.

10,2

6.

!!""

7.

+!![]

8.

true == "true"

9.

010 - 03

10.

""- -""

11.

null + 0

12.

0/0

13.

1/0 === 10 ** 1000

14.

true++

15.

"" - 1

16.

(null - 1) - "1"

17.

38 * 4343 * 2342+ (“true”— 0)

18.

5 + !5 + !!5

19.

[] + [1] + 2

20.

1 + 2 + "3"

后果和剖析

true + false

试图在两个布尔值之间应用加法运算符（+）时，它们会被转换为数字。

而且咱们都晓得 true 应该被转换为 1，false 应该被转换为 0。所以true+false 返回1。

[,,,].length

[,,,] 输入一个有三个空槽的数组。最初一个逗号是尾部的逗号。

你能够这么想。

[,]     ==> [empty,]
[,,]    ==> [empty, empty,]
[,,,]   ==> [empty, empty, empty,]

所以 [,,,].length 返回 3。

[1, 2, 3] + [4, 5, 6]

当你试图在数组之间应用加法运算符（+）时，它们会被转换为字符串。

将一个数组转换为字符串时，数组的 toString() 办法被调用。toString()办法是 JavaScript 外部应用的，当一个数组须要显示为文本时，它将用逗号连贯其元素。

[1, 2, 3].toString() ==> '1, 2, 3'
[4, 5, 6].toString() ==> '4, 5, 6'

所以

[1, 2, 3] + [4, 5, 6] ==> '1, 2, 3' + '4, 5, 6' ==> "1,2,34,5,6"

0.2 + 0.1 === 0.3

因为浮点数很难在计算机中精确示意，数学上的 0.1 和0.2在计算机中只能用近似的数字示意。

0.1+0.2的后果不齐全是0.3。不仅仅是 JavaScript，其余编程语言也有同样的问题。

10, 2

逗号（,）在 JavaScript 中也是一个非法的操作符，它评估每个操作数（从左到右），并返回最初一个操作数的值。

因而，10，2 返回 2

!!””

""是一个空字符串，它是一个虚值。

留神：0、空字符串 ””、null 和 undefined 都是虚值。

! 是逻辑上的 “ 非 “ 运算符，把 true 变成 false，反之亦然。

如果咱们应用两次 !，也就是!!，它将把一个失常的值转换成一个布尔值。所以!"" 返回 false。

+!![]

数组都是真值，甚至是空数组。所以 !![] 将返回true。

!![]; // -> true

而 + 号会将真值转换为其数字示意: 1，所以 +!![] 返回 1。

true == “true”

双等运算符（==）查看其两个操作数是否相等，并返回一个布尔值后果。

依据形象的双等比拟规定，这两个值在比拟时都被转换为数字。

true == "true" ==> Number(true) == Number("true") ==> 1 == NaN

所以，ture =="true" 返回 false。

010 – 03

这里有一个小小的技巧：如果一个数字以 0 结尾，那么在 JavaScript 中它就被当作一个八进制数字。所以：

010 - 03 ==> 8 - 3 ==> 5

另外：

• 如果一个数字以 0b 结尾，那么它在 JavaScript 中被视为二进制数字。
• 如果一个数字以 0x 结尾，它在 JavaScript 中被当作一个十六进制数字。

“”–“”

这看起来是一个谬误的语法，但它的确工作失常。

空字符串能够被转换为布尔值 false 或数字值 0。所以 -"" 为 0

null + 0

正如咱们之前所说，null是一个虚值。它将被转换为布尔值 false 或数字值0。所以后果返回 0。

0/0

这是一个非法的数学表达式。方程 0 / 0 没有任何有意义的数字答案，输入的后果只是NaN。

1/0 === 10 1000**

尽管 1/0 和之前一样也是一个非法的数学表达式。然而当除数不是 0 时，JavaScript 认为这个表达式的后果是Infinity。

而 10**1000 是一个很大数字，JS 无奈正确示意这个数字。(JavaScript 中最高的整数值是 2^53-1)。所以10 * 1000 也被当作无限大(Infinity)。

无穷大总是等于另一个无穷大，所以 1/0 === 10 ** 1000 返回 true。

true++

这没有什么特地的，这只是一个语法错误。

“”- 1

尽管加法运算符（+）同时用于数字和字符串，但减法运算符（-）对字符串没有用途，所以 JavaScript 将其解释为数字之间的操作。一个空的字符串会被类型强制为 0。

""- 1 ==> Number("") - 1 ==> 0 - 1 ==> -1

所以 "" — 1 返回 -1

(null – 1) – “1”

正如下面所说。

null ==>  0
(null - 1) ==> -1
"1" ==> 1

所以 (null — 1) —“1” 返回 -2

38 4343 2342+ (“true” – 0)

你可能会狐疑 JS 是如此疯狂，以至于它将字符串 “true” 转换为布尔值 true 的数字示意。然而，它并没有那么疯狂。理论产生的状况是，它试图将字符串转换为数字，但失败了。

Number("true"); // -> NaN

在 JavaScript 的数字运算中，只有有一个值是 NaN，运算的最终后果就肯定是 NaN。38 * 4343 * 2342只是一个烟雾弹。

5 + !5 + !!5

正如下面所说。

• 0、空字符串 ””、null 和 undefined 都是虚值。
• 非零的数字是真值。

所以：

!5 ==> 0
!!5 ==> 1

[] + [1] + 2

试图在数组之间应用加法运算符（+）时，它们会被转换为字符串。

[] ==> ''[1] ==>'1'[] + [1] ==>'1''1' + 2 ==> '12'

所以后果是 ’12’。

1 + 2 + “3”

JavaScript 从左到右执行这些操作。当数字 3 与字符串 3 相加时，字符串连贯将优先进行。

1 + 2; // -> 3
3 + "3"; // -> "33"

总结

坦率地说，这些挑战并没有为我胶们编码技能提供任何价值，所以不应该在理论我的项目中写这种代码

然而，把这些技巧作为敌人和共事之间的一些装 13，不是一件十分乏味的事件吗？

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

作者：Marina Mosti 译者：前端小智 起源：medium

原文：https://medium.com/frontend-c…

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。