Destrukturyzacja obiektów bez var

Dlaczego destrukturyzacja obiektów generuje błąd, jeśli przed nim nie ma varsłowa kluczowego?

{a, b} = {a: 1, b: 2};

rzuca SyntaxError: expected expression, got '='

Poniższe trzy przykłady działają bez problemów

var {a, b} = {a: 1, b: 2};
var [c, d] = [1, 2];
    [e, f] = [1, 2];

Pytanie dodatkowe: dlaczego nie potrzebujemy vardo niszczenia macierzy?

Napotkałem problem, robiąc coś takiego

function () {
  var {a, b} = objectReturningFunction();

  // Now a and b are local variables in the function, right?
  // So why can't I assign values to them?

  {a, b} = objectReturningFunction();
}

Problem wynika z tego {...}, że operatory mają wiele znaczeń w JavaScript.

Kiedy {pojawia się na początku instrukcji , zawsze będzie reprezentować blok , do którego nie można przypisać. Jeśli pojawi się później w instrukcji jako wyrażenie , będzie reprezentować Object.

varPomaga uczynić to rozróżnienie, ponieważ nie może być stosowana przez oświadczenie , jak będzie grupowanie nawias :

( {a, b} = objectReturningFunction() );

Z ich dokumentów: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destruifying_assignment#Assignment_without_declaration

Uwagi: Nawiasy (...) wokół instrukcji przypisania są wymagane, gdy używa się przypisania destrukturyzacji literału obiektu bez deklaracji.

{a, b} = {a: 1, b: 2} nie jest poprawną samodzielną składnią, ponieważ {a, b} po lewej stronie jest traktowane jako blok, a nie literał obiektowy.

Jednak ({a, b} = {a: 1, b: 2}) jest poprawne, podobnie jak var {a, b} = {a: 1, b: 2}

Twoje wyrażenie (...) musi być poprzedzone średnikiem lub może zostać użyte do wykonania funkcji w poprzednim wierszu.

Jeśli piszesz Javascript bez średników , składnia „przypisanie bez deklaracji” powinna być poprzedzona średnikiem, aby działała przewidywalnie

let a, b

;({a, b} = objectReturningFunction()) // <-- note the preceding ;

Chciałem tylko to podkreślić, ponieważ mnie to zaskoczyło i mam nadzieję, że może zaoszczędzić innym trochę czasu na zastanawianiu się, dlaczego to nie działa i / lub daje dziwne wyniki z elementami formatującymi kod, takimi jak prettier.

Rzeczywiście, jest to rzeczywiście tam, w zaakceptowanej odpowiedzi (ostatnia linia cytowanych dokumentów), ale łatwe do przeoczenia, zwłaszcza bez przykładu!

Oto inny sposób:

let {} = {a, b} = objectReturningFunction()

Plusy:

• Nie potrzeba nawiasów
• Nie potrzeba średników
• Dodatkowe zadanie jest gwarantowanym brakiem możliwości (biorąc pod uwagę, że nie dzieje się nic dziwnego)

Cons:

• Wygląda trochę dziwnie, chociaż moim zdaniem nie dziwniej niż !(){...}() IIFE .
• Może być niejasne, dlaczego tam jest. Gwarantuje to, że przy pierwszym spotkaniu zrzuci ludzi, więc odradzałbym używanie go jako jednorazowego.