微信搜索【伟大的走向世界】,第一时间与大家分享前端行业动态、学习路径等。本文GitHubhttps://github.com/qq44924588...已收录,有完整的测试站点、资料和我的一线厂商访谈系列文章。JavaScript是一种容错能力很强的编程语言,很多在其他编程语言中不合法的表达式在JavaScript中会工作得很好。这导致了很多奇怪的代码。你想挑战它吗?挑战在这个挑战中,您将看到20个古怪的表达式,并且必须猜测它们的输出。1.true+false2.**1.**3.[1,2,3]+[4,5,6]4.0.2+0.1===0.35.10,26.!!""7.+!![]8.true=="true"9.010-0310.""--""11.null+012.0/013.1/0===10**100014.true++15.""-116.(null-1)-"1"17.38*4343*2342+("true"—0)18.5+!5+!!519.[]+[1]+220.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()方法。当数组需要显示为文本时,JavaScript在内部使用toString()方法用逗号连接其元素。[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,反之亦然。如果我们使用!两次,也就是!!,它将一个普通值转换成一个布尔值。所以!”“返回错误。+!![]数组都是真值,甚至是空数组。所以!![]将返回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。所以-""是0null+0我们之前说过,null是一个falsy值。它将被转换为布尔值false或数值0。因此结果返回0。0/0是非法数学表达式。方程0/0没有任何有意义的数值答案,输出只是NaN。1/0===101000**虽然1/0和之前一样是非法的数学表达式。但是当除数不为0时,JavaScript认为这个表达式的结果是Infinity。而10**1000是一个很大的数字,JS无法正确表示这个数字。(JavaScript中的最大整数值为2^53-1)。所以10*1000也算无穷大。无穷大总是等于另一个无穷大,所以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"==>1so(null—1)—"1"返回-23843432342+("true"-0)你可能怀疑JS太疯狂了,它将字符串“true”转换为布尔值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;//->33+"3";//->"33"总结坦率地说,这些挑战对我们的编码技能没有任何价值,所以我们不应该在实际项目中编写这些代码但是使用这些技巧不是很有趣吗?在朋友和同事之间玩?代码部署后可能存在的bug,无法实时获知。事后为了解决这些bug,花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。作者:MarinaMosti译者:FrontendXiaozhi来源:medium原文:https://medium.com/frontend-c...交流有梦,有干货,微信搜索【大千世界】关注这个凌晨还在刷碗清洁智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi,里面有完整的测试站点、资料和我的一线厂商访谈系列文章。
