一行神奇的js代码，我当时就惊呆了。这不就是传说中的ZB魔法吗...哈哈的笑 写这篇文章的原因是之前看到一个js代码，如下:然后让大家运行一下，结果有点意外，“sb” 太骚了，太傻了！如果有人诋毁前台看不起js，你可以把这段代码发给他~不过话说回来，这是什么原理？为什么一堆符号运算的结果可以是两个字符，而且恰好是一个sb！实际上，依靠js类型转换的几个基本原则，本文将揭示“sb”是如何制成的。 我相信如果你能把这个说清楚，以后遇到类型转换之类的问题就能瞬间秒杀。 第一，js运算符的优先级。首先要应用的知识是js操作符的优先级。因为这么长的操作让人眼花缭乱，所以首先要按照优先级把它分成N段，然后一段一段的破。 根据这个规则，我们把这一串运算分为以下16个子表达式:运算符用红色标注，可能不是所有人都能实现。中括号[]其实也是一个运算符，用来按索引访问数组项。此外，它还可以访问字符串的子字符，有点类似于charAt方法，比如:' abcd'[1] // returns' b。 并且括号具有最高优先级。 二、js类型转换的前置解决方案结束，接下来就是使用JavaScript类型转换知识。 先说什么时候需要类型转换。 当运算符两边的操作数类型不一致或者运算符不是基本类型(也叫原类型)时，就需要进行类型转换。 先用运算符把类分类:负号-，乘号*，肯定是数学运算，所以需要把操作数转换成数字类型。 加号+可能是字符串串联，也可能是数学运算，所以可能转换成数字或者字符串一元运算，比如+[]，只有一个操作数，转换成数字类型。我们来看看转换规则。 1.对于ToPrimitive类型，通过top priminality():top priminality(input，preferred type？)可选参数PreferredType为数字或字符串。 返回值是任何原始值。 如果PreferredType是Number，执行顺序如下:如果输入是原语，则返回，否则，输入是Object。 调用obj.valueOf() 如果结果是原始的，则返回 否则，调用obj.toString()。如果结果是原语，否则返回，抛出TypeError。如果PreferredType是String，则步骤2和3互换。如果PreferredType不为，则Date实例设置为String，其余为Number。 2.通过ToNumber()将值转换为Number，直接看ECMA 9.3的表规则如下:3。通过ToString()把值转换成字符串，直接看ECMA 9.8的表规则如下:规则就这些。接下来练习一下，按照我们上面划分的子表达式，一步一步的执行这段神奇的代码。 开始~三。循序渐进。我们先来看最简单的子表达式16:+[]只有一个操作数[]，这个操作数一定是转换成了number。根据上面的规则2，[]是数组，对象类型，也就是object。 所以先调用toPrimitive转换成原来的类型，PreferredType是number。该参数表示更“倾向于”被转换的类型，这里必须是数字。 然后先调用数组的valueOf方法，数组在调用valueOf时会返回自身，如下:此时我们得到一个空字符串“”，还没有结束。看到上面规则2中的描述，继续调用toNumber，会转换成号码类型，如下:Done！子表达式16转换，+[]，最后得到0。 再看子表达式15: [~+"]空字符串" "前面是两个一元运算符，但只有一个操作数，所以最后要转换的类型是number。 看看规则2，一个空字符串调用一个Number得到0。 接下来是~，这是什么东西？它是一个按位运算符，它的作用可以记为取数负再减一，所以~0是-1。 别忘了，这个子表达式是用括号括起来的，所以最后的值是[-1]，也就是里面只有一个元素-1的数组。 接下来看子表达式13，很简单。填入15和16，就变成这样了:–[-1][0]。取数组的第0个元素，然后从中减去。结果是-2，没那么容易！继续，子表达式14: [~+[]]其实应用15，和16的原理是非常了不起的。答案[-1]继续找子表达式9，现在变成了:-2*[-1]，略有不同，不过没关系。让我们遵守规则。运算符是乘法符号*，当然，我们做数学运算。过程如下:1)，调用toPrimitive，发现是对象类型2)，调用valueOf，返回本身[-1]3)，因为不是原类型，继续调用toString，返回“-1”4)，-1”是原类型，然后调用toNumber，返回-15)，乘以-2，返回。+[]，我不多说了。答案1。从右到左是一元计算。 有了9和10，我们就来了子表达式4，此刻已经长成了这样:2+1，好了，我就不多说了。 继续看表情7:！(~+[])，~+[]=-1，这个根据上面已经知道了，那个！-1是什么？这里，我们来说说这个感叹号。意思是逻辑否定，它会把表达式转换成布尔类型。转换规则与js的Truthy和Falsy规则相同。所有数字后面跟数字的除了0都是假的，所有字符串后面跟字符串的除了空字符串都是假的。 这里！-1当然是假的。 接下来的表达式3: false+{}有点关键。 如果一个Boolean和一个object一起添加，那么这个{}应该先转换成原来的类型。过程如下:1)，调用toPrimitive，发现是对象类型2)，调用valueOf，返回本身{}，3)，不是原类型。调用toString，返回“[object Object]”4)，给“[Object Object]”加false。False首先转换成字符串“false”5)，相加的结果是“false[object Object]”。知道了表达式3和4，我们就可以看表达式1了。这时是这样的:“假[object object]”[3]。因为这个[]可以接受字符串的子字符，比如charAt，所以我们得到了结果“S”IV。最后，经过以上艰难的过程，我们得到了字符“S”，也就是图片的左半部分，剩下的“B”。同样的原理也可以算出来，这里就不一一论证了，留给大家去实践。 回头看这个过程其实并不复杂，只是有少量的重复性工作。只要掌握了运算的优先级，就可以把大字符串分解成小字符串，然后利用类型变换的知识，一个一个的去求解。 反正看到这里你还觉得神奇吗？如果有人看不起js，请把这段代码发给他。如果他想知道答案，请把这篇文章发给他~我是做前台开发的。如果你也想学习前台开发技术，可以加入我的前台学习交流裙:851 231 348。也可以关注我的微信微信官方账号:【前台学员】一套自己根据多年开发经验录制的web前台强化讲座视频和学习方法，以及少量的前台学习手册、前台面试问题和端对端问题。 需要的话可以自己下载。