当前位置: 首页 > Web前端 > HTML5

简单的说,通过JS的隐式转换,关键时刻可以救你一命

时间:2023-04-05 17:25:08 HTML5

就是说JavaScript在比较的时候会进行隐式转换。如果您对隐式转换不是特别熟悉,那么结果往往出乎您的意料。我们来看这行代码(![]+[])[+!![]--+!![]--+!![]]+({}+[])[+!![]]+(![]+[])[+!![]--+!![]--+!![]]这行代码的结果可能出乎你的意料。结果是sos,这也是文章起这样一个标题的原因。这行代码看似乱七八糟,但相信看完这篇文章,你一定能自己写出这样的代码。解释相信我,这行代码很简单,其实并不复杂,我们先把这行代码分解一下(![]+[])[+!![]--+!![]--+!![]]//s+({}+[])[+!![]]//o+(![]+[])[+!![]--+!![]--+!![]]//s我们将这一行分解为3行。先看第一行(![]+[])[+!![]--+!![]--+!![]]这一行可以分为两部分(![]+[])[+!![]--+!![]--+!![]]让我们继续看两个独立的部分(![]+[])看看这是什么意思。友情提示:[]转换为Boolean值为真[]转换为字符串为""如果想知道为什么,推荐阅读下面两篇文章。简单的说,JavaScript中的tostring()和valueOf()方法就是简单的讲!![]==true和[]==true导致思考![]为false(![]+[])会变成这样(false+"")结果为"false",字符串类型![+!![]--+!![]--+!![]]这是什么意思?我们可以看到+!![]是什么,它实际上出现了3次+!![],!优先级最高,先算!![],!![]是[]的布尔转换,最后结果为true,最后在前面加上一个+,就变成了+true这样,一个隐式转换就是执行把true转换成数字,也就是1,嗯,+!![]就是1的意思,我们用1来代替代码,看看[1--1--1]是什么样子的,相信大家都能算出来这么简单的正数减负数减负数的结果,最后的结果都是[3]好吧,我们把第一行的这两个部分放在一起看看“false”[3],现在就很明显了!字符串的第三个字符,所以会有s继续看第二行({}+[]])[+!![]]我们同样拆分成两部分({}+[]])[+!![]]第一部分({}+[])()中的{}不是语法上的花括号,也不是语句块,而是一个空对象,添加toString()方法时会调用它,所以它将转换为“[objectObject]”,字符串类型![],也会调用toString()方法,所以[],会被转换为"",是一个空字符串。这两个结果放在一起就是“[objectObject]”+“”,最后的结果就是“[objectObject]”。第二部分[+!![]]我们已经知道+!![]表示1,所以最后的结果是[1]OK,我们把第二行的两部分放在一起看“[objectObject]”[1],这样我们就可以看清楚了,o最后还有第三行,和第一行一模一样,好吧,我们用+把这三行的结果拼接起来就是"sos”。总结最后用一张图来总结一下。相信现在,你应该明白上面的代码了吧。写这段代码的时候,主要是想了解一下隐式转换。标题是个笑话。我希望你永远不会真正遇到这样的问题代码关键时刻。最后推荐两篇相关文章,希望对大家有所帮助。简而言之,JavaScript中的tostring()和valueOf()方法简而言之!![]==true和[]==true引发思考