if (!+[]+!+[] == 2) 条件在 JavaScript 中是如何工作的？

一个Array空等于false

[] == false

相反的false是true

!false == true

true等于 1false等于 0

true == 1
false == 0

然后

true + true == 2

function probar(){
    console.log([] == false);
    console.log(!false == true);
    console.log(true == 1)
    console.log(false == 0)
    console.log(true + true == 2)
}

<button onClick="probar()">probar</button>

JSFuck是一种基于JavaScript原子部分的深奥且具有教育意义的编程风格。

要记住的一些规则：

• 转换!为值之前Booleano

  console.log(![])   // return false
  

• 在我们+ 转换为数字之前

  console.log(+[])  // return 0
  

• 加法[]转换为字符串

  console.log([]+[])  // return  ""
  

为什么显示的消息是一样的？

• !+[]通过将加号放在它变成数字之前， 0+[] = 0的否定(!)是1。

然后当执行总和 !+[] + !+[]时1+1 = 2

参考

• http://www.jsfuck.com/
• http://patriciopalladino.com/blog/2012/08/09/non-alphanumeric-javascript.html
• http://www.jazcash.com/a-javascript-journey-with-only-six-characters/

下面用¹表示的链接对应于ECMAScript® 2016 语言规范的部分。第一种情况的目的是使用“拉”方法而不是传统的“推”方法来提供对参考标准的具体参考。

下面列出的是对应于每个主要部分的参考

!+[]+!+[] == 2

哪个是

• []用于初始化数组类型的对象字面量的表达式，相当于new Array().
• +[]具有一元运算符 + 的矩阵。
• !+[]具有一元运算符 + 和非逻辑一元运算符的矩阵。
• !+[] + !+[]加了两个!+[]。
• !+[] + !+[] == 2两者相加的抽象比较!+[]。

让我们开始吧

• Array Initializer表示它初始化一个没有元素的[]数组字面量。数组的长度属性 ( length) 为零。原始值是一个空字符串。有关更多详细信息，请参阅基于 ECMAScript 2016（第 7 版）的 [] 的原始值是什么？.

• 在Unary + operator ¹中，表明它将+其操作数转换为数字类型。在 的情况下+ []，操作数是一个空字符串（[].join() === ''在 Chrome 控制台中测试返回true）并将其转换为数字会转换为0.

  • 查看答案 基于 ECMAScript 2016（版本 7）的 [] 的原始值是什么？

• 在逻辑运算符 not ¹中表示!将其操作数转换为布尔类型，如果操作数的布尔值为 false，则返回 true，如果操作数的布尔值为 true，则返回 false。

• 在ToBoolean ¹中，表示当值为零（-0或+0）时，返回 false（false）。

• 在加法运算符 ( + ) ¹中表明，当操作数的类型不是文本字符串时，它们将转换为数字。

• ToNumber ¹表示当值为真时，返回一（ ），当值为假时，返回零（ ）。10

• En Applying the Additive Operators to Numbers¹ se indica que cuando + se aplica a dos operandos numéricos, realiza la adición de estos.

• En Abstract equality comparison¹ se indica que cuando los dos elementos a la izquierda y derecha son iguales, devuelve verdadero (true)y en caso contrario devuelve falso (false).

Entonces

• +[] es una operación unitaria que devuelve cero (0)

• !0 es una operación unitaria que devuelve verdadero (true)

• true + true es una operación que, primero convierte cada operando a 1 y luego devuelve su adición la cual es 2

• 2 == 2 es una comparación de igualdad abstracta que devuelve verdadero (true)

A continuación un pequeño experimento para que el lector compruebe si stack-snippet y su navegador operan conforme a la especificación referida.

document.write(+[]);
document.write('<br/>'); //Separador
document.write(!+[]);
document.write('<br/>'); //Separador
document.write(!+[]+!+[]);

为了补充答案，让我们考虑以下系列中记录的附加元素：

ECMA-262 7ᵗʰ 版/2016 年 6 月 ECMAScript® 2016 语言规范： https ://www.ecma-international.org/ecma-262/7.0/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures。

普通语言中的 JavaScript - Tony de Araujo： https ://www.amazon.com/dp/B00NQERIEI/ref=rdr_kindle_ext_tmb

JavaScript 对象函数和数组解释 - Tony de Araujo： https ://www.amazon.com/JavaScript-Objects-Functions-Arrays-Explained-ebook/dp/B00GDEPBZQ

Nicholas C. Zakas 面向 Web 开发人员的专业 JavaScript。 https://www.amazon.es/Professional-JavaScript-Developers-Wrox-Guides/dp/1118026691

1) JavaScript 原始数据和复杂数据：

JavaScript 基于 ECMAScript 的数据类型，分为原始和复杂或引用：

原始数据：

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-primitive-value

• 字符串：unicode、ascii 和字母数字字符。

• 数字：整数，浮点数。

• 布尔值：真假。

• 空：空。

• 未定义：未定义。

复杂数据：

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-terms-and-definitions-object

• 对象：数组、无序列表（键值、映射）、函数、对象。

2）数据的布尔值：

https://www.ecma-international.org/ecma-262/7.0/index.html#table-10

原始数据：

var string="Hola soy una string";将返回true。

var integer=123;将返回true。

var trueVariable = true;将返回true。

var float = 4.98;将返回真。

复杂数据：

var arraySinElementos = [];将返回true。

var arrayConElementos = [0,1,2];将返回true。

例外：

根据上述表格，我们可以通过应用找到以下数据类型的布尔值ToBoolean()：

• Boolean false：将返回false。

• 数字零：将返回 false。

• 未定义：将返回 false。

• Null：将返回 false。

2) 逻辑运算符的值：

我们定义了主要的逻辑值：

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-terms-and-definitions-boolean-value

true == 1;

false == 0;

逻辑运算符not (!)：应用接收值的倒数。

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-logical-not-operator

它的操作如下：

resultado = !expresion;

!expresion == !(ToBoolean(expresion))

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-logical-not-operator-runtime-semantics-evaluation

表达式将使用 a 进行评估ToBoolean()，它将遵循下表：

https://www.ecma-international.org/ecma-262/7.0/index.html#table-10

应用逆我们将有：

• 在是表达式的情况下，true它将返回false。

• 在存在的情况下，将被false退回true。

• 如果它不为零 ( !==0)，则结果为零。

• 如果为 0，则结​​果为 1。

• 如果可能，字符串将转换为数字。

• 空字符串转换为true.

• 逻辑值 null 或 not 执行确定的动作false，因为不知道条件是否为真。

3）一元加运算符（+表达式）和加法加运算符（表达式+表达式）：

加号 (+) 运算符可以作为一元和加法运算符找到：

• 如果考虑添加：

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-addition-operator-plus

• 如果我们认为它是一元的，它将具有以下属性和操作：

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-unary-plus-operator-runtime-semantics-evaluation

expresión unaria: +expresión unaria
expresión unaria: ToNumber(expresión unaria)

此函数将应用于ToNumber()表达式：

https://www.ecma-international.org/ecma-262/7.0/index.html#table-11

如果它用于非数字值，它将应用函数ToNumber()，在我们的例子中，我们有一个array[]将输入引用数据或Object.

换句话说，它将ToNumber()应用于 a object，因此使用ToPrimitive().

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-tonumber

4）功能ToPrimitive()：

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-toprimitive

这个函数可以在类型转换部分找到：

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-type-conversion

它将用于将对象转换Object为原始值，以便以后可以通过以下方式对其进行评估：

`ToString()` y `valueOf()`.
`valueOf()` y `ToString()`.

分别。

在这种情况下，作为 Object Object: 适用：

Type(input)

遵循以下评估顺序：

汇总表：

Si PreferredType | no fue pasado | hint = "default".
Si PreferredType | fue pasado    | hint = "string".
Si PreferredType | fue pasado    | hint = "number".
Luego retornar   | OrdinaryToPrimitive(input, hint).

转换进行：

Afirmacion: Type(O) es Object. // Se cumple pues es array[] es un Object.

Afirmacion: Type(hint) es String y su valor es "string" ó "number".

在这种情况下，它是一个string vacio.

https://www.ecma-international.org/ecma-262/7.0/index.html#table-12

履行：

Si hint = string.

应用“ toString()”，然后“ valueOf()”

• 字符串（）：

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-tostring

ToPrimitive(argument, hint String). // 之前设置的

• 的价值（）：

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-object.prototype.valueof

申请我们有：

ToString( array[] ) == ( "" ) // Paréntesis para mejor entendimiento

( "" ).valueOf() == ( "" )

• 所以：

  +[] == ToNumber(数组[])。

  ToNumber(array[]) == ("").valueOf().

  ("").valueOf == ("")。

现在让我们使用我们的逻辑运算符 not (!) 来获得：

( "" ) == false.

5）接下来是时候更换了：

if (!+[]+!+[]==2) {
document.write('Somos iguales');
}
else {
document.write('Somos distintos');
}

解决：

if (!("")+!("")==2) {
document.write('Somos iguales');
}
else {
document.write('Somos distintos');
}

结尾：

if (true+true==2) {
document.write('Somos iguales');
}
else {
document.write('Somos distintos');
}

HTML: Somos iguales

Veo que esta pregunta ha generado un grupo de respuestas muy valiosas y es este tipo de preguntas y respuestas las que más nutren a nuestra comunidad. Intentaré aportar mi granito de arena a este maravilloso hilo.

Voy a aclarar ciertos aspectos que no están aclarados. Quien lea las respuestas notará que hay algunas que se contradicen. He visto un comentario de @toledano en la respuesta de @Dev.Joel y otra de @Dev.Joel en la respuesta de @JorgeArturoJuarez básicamente preguntándose por qué [] == false es true y por otro lado ![] es false y me parece que es debido a varias de las respuestas que son algo ambiguas, como la respuesta marcada como correcta que mostraba que [] era igual a false.

Lo primero que hay que saber es que toda instancia de un objeto está definida de por sí y por lo tanto es verdadera:

var a = [];
var b = new String("");
var c = new Boolean(false);

if (a && b && c) {

  console.log("todos son verdaderos");
  console.log(!a, !b, !c);
  
}

No se deben confundir las instancias de un objeto con los valores primitivos:

var a = "";
var b = false;
var c;

if (a || b || c) {

  console.log("¿hay alguna verdadera?");
  
} else {

  console.log("ninguna es verdaera");
  console.log(!a, !b, !c);
  
}

Sin embargo al usar los operadores de comparación (exceptuando === y !==) y los operandos tener un tipado diferente, JavaScript intenta convertir ambos operandos a un tipo apropiado para realizar la comparación, y generalmente esta conversión es numérica. Es por eso que ocurre lo siguiente sin importar que sean instancias de objetos y sean verdaderas:

var a = [];
var b = new String("");
var c = new Boolean(false);

//---Estas comparaciones son verdaderas
console.log(a == false);
console.log(b == false);
console.log(c == false);

//---Esto se debe a que
console.log(+a, +b, +c, +false);

Teniendo esto en cuenta se podrá entender por qué [] == false da true y ![] da false.

En cuanto a la pregunta principal, ya todo está más que explicado en las anteriores respuestas, aquí lo resumo:

1. Al aplicar el operador unario + a una instancia de Array vacía el resultado es 0 (ya que internamente le aplica la operación abstracta ToNumber).
2. Al aplicar el operador lógico ! a 0 el resultado es true (ya que este operador devuelve false si la expresión puede ser evaluada a true y en caso contrario devuelve true)
3. Al sumar dos valores booleanos con valor true el resultado será 2 (ya que al no tratarse de cadenas de caracteres, en vez de concatenar, el operador intentará convertir los operandos a número antes de sumarlos)