Dlaczego {. . . .0} oceniać do {}?


80

Właśnie znalazłem {....0}w kodzie przyjaciela. Ocena tego w konsoli zwraca {}(pusty obiekt).

Dlaczego? Jakie jest znaczenie 4 kropek w JavaScript?


11
Oglądano prawie 2500 razy w ciągu 6 godzin? Wygląda na to, że Twój znajomy używa operatora spreadu w innym kontekście.
Jeremy Harris,

Jest to bardziej pytanie „jak analizowane jest to wyrażenie”. Wpisz to w konsoli JS, a zauważysz, że czwarta kropka ma inny kolor ... ten sam kolor co zero.
Salman A


@JeremyHarris magia HNQ
Pac0

Odpowiedzi:


90

Cztery kropki właściwie nie mają znaczenia. ...jest operatorem rozprzestrzeniania i .0jest skrótem od 0.0.

Dlatego umieszczenie 0 (lub dowolnej liczby) w obiekcie daje pusty obiekt {}.


9
Spreading 0 (or any number) yields an empty objectniekoniecznie jeśli rozłożysz liczbę w jakimkolwiek innym miejscu poza obiektem, spowoduje to wyświetlenie błędu, np. [... 0] zgłosi błąd.
Hitesh Kumar

2
@HiteshKumar Rozprzestrzenianie obiektów niepodlegających iteracji wewnątrz tablicy rzeczywiście spowoduje błąd, ale nie ma to nic wspólnego z tym pytaniem. Mam na myśli wspomniany rozkład obiektów. :)
NikxDa

2
NikxDa Myślę, że @HiteshKumar poruszył ważną kwestię. Lepiej jest mówić bardziej szczegółowo o przypadkach, w których twoje stwierdzenia są prawdziwe. Spreading 0 (or any number) in object literal yields an empty objectZawiera więcej przydatnych informacji ..
Mgła

1
@Mist Zaktualizowałem odpowiedź. Myślę, że nie jest to potrzebne, ale może być dobre dla wyjaśnienia. Dziękuję za aktualizację!
NikxDa

1
@NikxDa thanks. Lubię myśleć o takich stwierdzeniach, aby były bardziej „kompletne”, gdy masz możliwość wycięcia ich z kontekstu, wklejenia w innym miejscu i nadal zawierają wszystkie informacje i są edukacyjne i informacyjne.
Mgła

56

Trzy kropki w literale obiektu to właściwość spreadu , np .:

  const a = { b: 1, c: 1 };
  const d = { ...a, e: 1 }; // { b: 1, c: 1, e: 1 }

Ostatnia kropka z 0 to literał liczbowy, .0czyli to samo, co 0.0. Dlatego to:

 { ...(0.0) }

przenosi wszystkie właściwości obiektu liczbowego do obiektu, jednak ponieważ liczby nie mają żadnych (własnych) właściwości, otrzymujesz pusty obiekt.


Doprowadzasz mnie do myślenia - mogę rozłożyć dowolną zmienną, a własne klucze zostaną przeniesione do nowego obiektu? Działa, Function (function x() {}), (x.k = 'v'), ({...x})// {k: 'v'}ale nie działaNumber (x = 10), (x.k = 'v'), ({...x}) // {}
Mgła

3
@mist, ponieważ liczby (i inne prymitywy) są „pakowane” w obiekty, gdy pracujesz z nimi jako obiektami, i „rozpakowywane” bezpośrednio potem. Dlatego x.księ zgubisz.
Jonas Wilms,

Co dokładnie oznacza „w pudełku”? Np. Kiedy użyłem operatora kropki (właściwość), pracowałem z liczbą jako obiektem. Jeśli mam rację, to tylko jeden przypadek. Czy są inne przypadki, gdy dzieje się „boks”? Czy dotyczy to tylko liczb? Czy jest jakiś powód, czy coś? Myślę, że dotyczy to innego pytania i powinienem to dokładniej przestudiować. Czy możesz wskazać mi jakąś książkę czy coś?
Mgła

1
Dzięki! Rozumiem, dlaczego mój klucz z numerem nie działa. Yayy boxing!
Mgła

3
Liczby nie mają żadnych własnych wyliczalnych właściwości. Ale mają właściwości.
Patrick Roberts,

6

Mówiąc {...}prościej, operator spreadu w javascript rozszerza jeden obiekt / tablicę o inny.

Tak więc, gdy babelifier próbuje rozszerzyć jeden o drugi, musi zidentyfikować, czy próbuje rozszerzyć tablicę, czy obiekt.

W przypadku arrayiteruje po elementach.

W przypadku objectiteruje po kluczach.

W tym scenariuszu babelyfier próbuje wyodrębnić klucze number, sprawdzając own property callbrakujące obiekty, numberwięc zwraca pusty obiekt.


0

Operator rozprzestrzeniania {...}umożliwia rozszerzanie elementów iteracyjnych. Oznacza to, że typy danych, które można zdefiniować w postaci key-valuepar, można rozszerzyć. W kategoriach Objectnazywamy parę klucz-wartość jako właściwość Object i jest to wartość, podczas gdy w kategoriach arraysmożemy myśleć o indeksie jako o kluczu, a element w tablicy jako o wartości.

let obj = { a: 4, b: 1};
let obj2 = { ...obj, c: 2, d: 4}; // {a: 4, b: 1, c: 2, d: 4}

let arr1 = ['1', '2'];
let obj3 = { ...arr1, ...['3']}; // {0: "3", 1: "2"}

Jeśli chodzi o tablicę, jako klucz przyjmuje indeks, więc tutaj zastępuje element „1” arr1z „3”, ponieważ oba mają ten sam indeks w innej tablicy.

W przypadku łańcuchów zbyt operator zwraca niepusty obiekt. Ponieważ łańcuch jest tablicą znaków, traktuje ciąg jako tablicę.

let obj4 = {...'hi',...'hello'}   // {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}
let obj5 = {...'y',...'x'}   // {0: "x" }

Ale w przypadku innych pierwotnych typów danych zwraca pusty obiekt

z liczbami

let obj6 = { ...0.0, ...55} // {}

z Boolean

let obj7 = { ...true, ...false} // {}

Podsumowując, te typy danych, które mogą być traktowane jako pary klucz-wartość, gdy są używane z operatorem spread, {...}zwracają niepusty obiekt, w przeciwnym razie zwraca pusty obiekt{}

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.