Cosa fanno le parentesi graffe all'interno degli elenchi dei parametri delle funzioni in es6?

122

Continuo a vedere funzioni che assomigliano a questa in una base di codice su cui sto lavorando:

const func = ({ param1, param2 }) => {
  //do stuff
}

Cosa sta facendo esattamente? Faccio fatica a trovarlo su google, perché non sono nemmeno sicuro di come si chiami, o di come descriverlo in una ricerca su google.

javascript ecmascript-6

— nathan
fonte

possibile duplicato della sintassi del parametro oggetto per le funzioni javascript?

— Bergi

117

È destrutturante , ma contenuto nei parametri. L'equivalente senza la destrutturazione sarebbe:

const func = o => {
    var param1 = o.param1;
    var param2 = o.param2;
    //do stuff
}

— James Thorpe
fonte

12

Solo per assicurarmi di aver capito correttamente, in pratica questo significa che un oggetto contenente quelle proprietà verrebbe passato alla funzione, e quindi all'interno della funzione, è possibile accedere automaticamente alle proprietà semplicemente usando il loro nome?

— Nathan

7

@ Nathan Sì, vedi in particolare la sezione sulla destrutturazione degli oggetti . Si noti tuttavia che gli aggiornamenti alle variabili non aggiorneranno le proprietà dell'oggetto originale - non è come se stessero creando un riferimento al valore originale.

— James Thorpe

@JamesThorpe sarebbe meglio collegarsi a developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

— lsborg

11

Questo è passare un oggetto come proprietà.

È fondamentalmente una scorciatoia per

let param1 = someObject.param1
let param2 = someObject.param2

Un altro modo di utilizzare questa tecnica senza parametri è il seguente, consideriamo quindi per un secondo che qualcheOggetto contiene queste proprietà.

let {param1, param2} = someObject;

— Oz Lodriguez
fonte

3

È un compito destrutturante di oggetti. Come me, potresti averlo trovato sorprendente perché la sintassi di destrutturazione degli oggetti ES6 assomiglia, ma NON si comporta come la costruzione letterale dell'oggetto.

Supporta la forma molto concisa in cui ti sei imbattuto, oltre a rinominare i campi e gli argomenti predefiniti:

Essenzialmente, è {oldkeyname: newkeyname = defaultvalue, ...}. ':' NON è il separatore chiave / valore; '=' è.

Alcune conseguenze di questa decisione di progettazione del linguaggio sono che potresti dover fare cose come

; ({A, b} = some_object);

Le parentesi extra impediscono alle parentesi graffe di sinistra di analizzare come un blocco e il punto e virgola iniziale impedisce alle parentesi di essere analizzate come una chiamata di funzione a una funzione nella riga precedente.

Per maggiori informazioni, vedere: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Attenzione, gli errori chiave durante l'assegnazione della destrutturazione degli oggetti NON vengono generati; ti ritroverai con valori "undefined", sia che si tratti di un errore chiave o di qualche altro errore che è stato silenziosamente propagato come "undefined".

> var {rsienstr: foo, q: bar} = {p:1, q:undefined};
undefined
> foo
undefined
> bar
undefined
>

— Andrew Wagner
fonte