Jakie jest wyjaśnienie tych dziwacznych zachowań JavaScript wymienionych w rozmowie " Wat " dla CodeMash 2012?

To jest bardziej komentarz niż odpowiedź, ale z jakiegoś powodu nie mogę skomentować twojego pytania. Chciałem poprawić Twój kod JSFiddle. Jednak opublikowałem to na haker News i ktoś zasugerował, że odświeżam go tutaj.

Problem w kodzie JSFiddle polega na tym, że ({}) (otwieranie nawiasów w nawiasach) nie jest tym samym co {} (otwieranie nawiasów jako początek linii kodu). Więc kiedy piszesz out({} + []) zmuszasz {} do bycia czymś, czym nie jest, kiedy piszesz {} + []. Jest to część ogólnej " wat " - ness Javascript.

Podstawową ideą było proste JavaScript chciał umożliwić obie te formy:

if (u)
    v;

if (x) {
    y;
    z;
}

Na szczęście w wielu przypadkach eval() powieli pełną zawartość JavaScript. Kod JSFiddle powinien brzmieć:

function out(code) {
    function format(x) {
        return typeof x === "string" ?
            JSON.stringify(x) : x;
    }   
    document.writeln('>>> ' + code);
    document.writeln(format(eval(code)));
}
document.writeln("<pre>");
out('[] + []');
out('[] + {}');
out('{} + []');
out('{} + {}');
out('Array(16).join("wat" + 1)');
out('Array(16).join("wat - 1")');
out('Array(16).join("wat" - 1) + " Batman!"');
document.writeln("</pre>");

[także to jest pierwszy raz, kiedy piszę dokument.writeln w wielu wielu wielu lat, i czuję się trochę brudny pisząc wszystko, co dotyczy obu dokumentów.writeln () i eval ().]

Popieram rozwiązanie @ Ventero. Jeśli chcesz, możesz przejść do szczegółów, jak + konwertuje swoje operandy.

Pierwszy krok (§9.1): konwertuje oba operandy na primitives (primitives values are undefined, null, wartości logiczne, liczby, łańcuchy; wszystkie inne wartości są obiektami, w tym tablicami i funkcjami). Jeśli operand jest już prymitywny, jesteś skończony. Jeśli nie, jest to obiekt obj i wykonywane są następujące kroki:

1. Call obj.valueOf(). Jeśli zwróci prymityw, jesteś skończony. Bezpośrednie instancje Object i tablic zwracają się same, więc to jeszcze nie koniec.
2. Call obj.toString(). Jeśli zwróci prymityw, jesteś skończony. {} i [] obie zwracają ciąg znaków, więc gotowe.
3. w przeciwnym razie rzuć TypeError.

Dla dat, Krok 1 i 2 są zamieniane. Można zaobserwować zachowanie konwersji w następujący sposób:

var obj = {
    valueOf: function () {
        console.log("valueOf");
        return {}; // not a primitive
    },
    toString: function () {
        console.log("toString");
        return {}; // not a primitive
    }
}

Interakcja (Number() najpierw zamienia się na prymitywną, potem na liczbę):

> Number(obj)
valueOf
toString
TypeError: Cannot convert object to primitive value

Drugi etap (§11.6.1): jeśli jeden z operandów jest łańcuchem, drugi operand jest również konwertowany na łańcuch, a wynik jest wytwarzany przez połączenie dwóch łańcuchów. W przeciwnym razie oba operandy są konwertowane na liczby, a wynik jest wytwarzany przez dodanie ich.

Bardziej szczegółowe wyjaśnienie procesu konwersji: "Co to jest {} + {} w JavaScript?"

[[31]}możemy odnieść się do specyfikacji i to jest świetne i najdokładniejsze, ale większość przypadków można również wyjaśnić w bardziej zrozumiały sposób za pomocą następujących stwierdzeń:]}

• Operatory + i - działają tylko z prymitywnymi wartościami. Dokładniej +(dodawanie) działa z łańcuchami lub liczbami, a +(unary) i - (odejmowanie i unary) działa tylko z liczbami.
• wszystkie natywne funkcje lub operatory, które oczekują prymitywnej wartości jako argumentu, najpierw przekonwertuje ten argument na żądany typ prymitywny. Odbywa się to za pomocą valueOf lub toString, które są dostępne na dowolnym obiekcie. To jest powód, dla którego takie funkcje lub operatory nie rzucają błędów podczas wywoływania na obiektach.

Możemy więc powiedzieć, że:

• [] + [] jest taka sama jak String([]) + String([]), która jest taka sama jak '' + ''. Wspomniałem powyżej, że + (addition) jest również poprawne dla liczb, ale nie ma poprawnej reprezentacji liczb tablicy w JavaScript, więc dodawanie łańcuchów jest używane zamiast tego.
• [] + {} jest taki sam jak String([]) + String({}) który jest taki sam jak '' + '[object Object]'
• {} + []. Ten zasługuje na więcej wyjaśnień (patrz odpowiedź Ventero). W takim przypadku nawiasy klamrowe są traktowane nie jako obiekt, ale jako pusty blok, więc okazuje się, że jest taki sam jak +[]. Unary + działa tylko z liczbami, więc implementacja próbuje uzyskać liczbę z []. Najpierw próbuje valueOf, która w przypadku tablic zwraca ten sam obiekt, a następnie próbuje ostateczności: konwersja toString wynik do liczby. Możemy zapisać go jako +Number(String([])), który jest taki sam jak +Number(''), który jest taki sam jak +0.
• Array(16).join("wat" - 1) odejmowanie - działa tylko z liczbami, więc jest takie samo jak: Array(16).join(Number("wat") - 1), ponieważ "wat" nie może być przekonwertowana na poprawną liczbę. Otrzymujemy NaN, a każda operacja arytmetyczna na NaN daje wynik z NaN, więc mamy: Array(16).join(NaN).

Aby wzmocnić to, co zostało wcześniej udostępnione.

Przyczyna tego zachowania jest częściowo spowodowana słabym typem JavaScript. Na przykład wyrażenie 1 + "2" jest niejednoznaczne, ponieważ istnieją dwie możliwe interpretacje oparte na typach operandów (int, string) i (int int):

• użytkownik zamierza połączyć dwa ciągi znaków, wynik: "12"
• użytkownik zamierza dodać dwie liczby, wynik: 3

Tak więc przy różnych typach wejść, wyjście możliwości rosną.

Algorytm dodawania

1. wymuszanie operandów na prymitywnych wartościach

Podstawowe elementy JavaScript to string, number, null, undefined i boolean (Symbol pojawi się wkrótce w ES6). Każda inna wartość jest obiektem (np. tablice, funkcje i Obiekty). Proces przymusu konwertowania obiektów na prymitywne wartości jest opisany w następujący sposób:

• Jeśli zwracana jest pierwotna wartość when object.wywołanie valueOf (), a następnie zwrócenie tego wartość, w przeciwnym razie Kontynuuj

• Jeśli zwracana jest pierwotna wartość when object.wywołana jest metoda toString (), następnie zwraca tę wartość, w przeciwnym razie continue

• Throw a TypeError

Uwaga: Dla wartości date należy wywołać ToString przed valueOf.

1. Jeśli dowolna wartość operandu jest ciągiem znaków, wykonaj konkatenację

2. W przeciwnym razie przekonwertuj oba operandy na ich wartość liczbową, a następnie dodaj te wartości

Znajomość różnych wartości przymusu typów w JavaScript pomaga uprościć mylące wyjścia. Zobacz tabelę przymusu poniżej

+-----------------+-------------------+---------------+
| Primitive Value |   String value    | Numeric value |
+-----------------+-------------------+---------------+
| null            | “null”            | 0             |
| undefined       | “undefined”       | NaN           |
| true            | “true”            | 1             |
| false           | “false”           | 0             |
| 123             | “123”             | 123           |
| []              | “”                | 0             |
| {}              | “[object Object]” | NaN           |
+-----------------+-------------------+---------------+

Dobrze jest również wiedzieć, że Operator + JavaScript jest lewostronnie asocjacyjny, ponieważ to określa, jakie dane wyjściowe będą dotyczyć więcej niż jednej operacji+.

Tak więc 1 + " 2 "DA " 12", ponieważ każdy dodatek zawierający łańcuch zawsze będzie domyślnie połączony łańcuchem.

Ty więcej przykładów można przeczytać w ten post na blogu (zastrzeżenie, które napisałem).