在前端开发中，有时候我们可能会看到一些奇怪的代码，其中包括一些让人不解的操作符和语法结构。在这篇文章中，我们将探讨一个著名的 JavaScript 表达式 ([![]]+[][[]])[+!+[]+[+[]]]，并解释它为什么会计算出字母"i"。
解析表达式
首先，让我们来分解这个表达式：([![]]+[][[]])[+!+[]+[+[]]]。
第一部分 - ![]
![] 是 JavaScript 中的一个常见的“真假值”技巧。[] 是一个空数组对象，JavaScript 会把它转换成布尔值 false。因此，![] 的结果是 true。
第二部分 - [![]]+[][[]]
接下来的部分是 [![]]+[][[]]。在这里，我们可以利用运算符优先级将它们分开：
----- - --------
第一个部分 [![]] 将上面我们提到的"真假值"转换为了字符串 "true"。第二个部分 [][[]] 是一个取出未定义元素的操作，等同于 undefined。因此，这个表达式会被计算成 "trueundefined"。
第三部分 - +!+[]+[+[]]
接下来是 [+!+[]+[+[]]]。让我们再一次将它们分开：
----- - -----
这个部分可以再次被分解为两个子表达式：
+!+[]，其中!+[]的结果是false，因为+[]将空数组转换为数字0，而!0等于true，然后+true等于1。[+[]]表示为一个只包含数字0的数组。当用+操作符和数组结合使用时，该数组会被转换成数字0。
因此，最终的结果是 1 + 0，也就是 1。
结果
现在，我们可以将上面的三个部分组合在一起。此时计算出的值是：
------------------
由于字符串的索引从 0 开始，因此这里返回的是字符 "r"。所以我们得到了一个非常奇怪的表达式，它计算出的值是字母 "r"。
代码示例
以下是一个具有注释的完整的 JavaScript 代码示例，用于演示上述过程。
-- ------- ----- --- - --- -- -- --- ---------------- ------ ----- ---- - ----- - --- -- -- ------ ------- --------------- --------------- ----- ---- - -- - ----- -- -- ---------------- - ----- --- - ----- - ------ -- ---- --------------- ---------- --- ----- ------ - --------- -------------------- -- -- ---
总结
虽然 ([![]]+[][[]])[+!+[]+[+[]]] 看起来很奇怪，但它实际上只是一些常见的 JavaScript 技巧和操作符的组合。通过仔细分解每个部分并理解它们的运行机制，我们可以轻松地计算出表达式的值，并深入了解一些有趣的编程技巧。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27079