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
另外:
""--""
这看起来是一个错误的语法,但它确实工作正常。
空字符串可以被转换为布尔值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
正如上面所说。
所以:
!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,不是一件非常有趣的事情吗?
作者:Marina Mosti 译者:前端小智 来源:medium
原文:https://medium.com/frontend-canteen/20-useless-but-funny-challange-for-javascript-developer-9eea39bb8efb
要想回答上述问题,必须理解js在执行==时候的一些数据转换规则和成文的规定。ECMA-262对==的约定如下,细心的你发现上面ToNumber对于Object的转换里有这么一句ToPrimitive(input argument, hint Number)
今天在看lodash的源码中slice这个函数实现的时候发现了里面有这么一行代码:>> 和 >>>有什么不一样、移位0有什么意义、Uint32类型是如何转换的
后缀表达式,又称逆波兰式,指的是不包含括号,运算符放在两个运算对象的后面,所有的计算按运算符出现的顺序,严格从左向右进行(不再考虑运算符的优先规则)。
[]==![] 感叹号!的优先级最高,因此先计算![], 其结果为 false, 所以表达式被转换成: []==false.遇到Boolean类型,需要先转换成Number类型,所以表达是变成 []==0,0是基础类型,[]是引用类型
以博客写文章为例,有的时候我们不经意间写的字符串带标签,然后浏览器将其解析了,实际上我们并不希望其被解析,于是可通过核心代码解决该问题。
三元表达式怎么用?三元表达式怎么就有用了?代码量会减少这是事实,配合箭头函数写函数式代码,哪个更易读这个就是主观判断了,见仁见智:
三元表达式,语法:* var 变量=表达式1?表达式2:表达式3;* 执行过程:* 表达式1的结果是true还是false,如果是true则执行表达式2,然后把结果给变量
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!