O que as chaves dentro das listas de parâmetros de função fazem em ES6?

122

Continuo vendo funções semelhantes a esta em uma base de código em que estou trabalhando:

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

O que exatamente isso está fazendo? Estou tendo dificuldade em encontrá-lo no google, porque nem tenho certeza de como se chama, ou como descrevê-lo em uma pesquisa no google.

javascript ecmascript-6 Nathan
fonte
possível duplicata da sintaxe de parâmetro
Bergi

Respostas:

117

É desestruturante , mas contido nos parâmetros. O equivalente sem a desestruturação seria:

const func = o => {
    var param1 = o.param1;
    var param2 = o.param2;
    //do stuff
}
James Thorpe
fonte
12
Apenas para ter certeza de que estou entendendo corretamente, basicamente isso significa que um objeto contendo essas propriedades seria passado para a função e, dentro da função, as propriedades podem ser acessadas automaticamente apenas usando seu nome?
Nathan
7
@Nathan Sim, veja especificamente a seção sobre a desestruturação de objetos . Observe, entretanto, que as atualizações das variáveis ​​não atualizam as propriedades do objeto original - não é como se estivessem criando uma referência ao valor original.
James Thorpe
@JamesThorpe, seria melhor vincular a developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
lsborg
11

Isso é passar um objeto como uma propriedade.

É basicamente um atalho para

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

Outra maneira de usar essa técnica sem parâmetros é a seguinte, vamos considerar então por um segundo que someObject contém essas propriedades.

let {param1, param2} = someObject;
Oz Lodriguez
fonte
3

É uma atribuição de desestruturação do objeto. Como eu, você pode ter achado surpreendente porque a sintaxe de desestruturação de objeto ES6 se parece, mas NÃO se comporta como a construção literal de objeto.

Ele suporta a forma muito concisa que você encontrou, bem como renomear os campos e argumentos padrão:

Essencialmente, é {oldkeyname: newkeyname = defaultvalue, ...}. ':' NÃO é o separador de chave / valor; '=' é.

Algumas consequências dessa decisão de design de linguagem é que você pode ter que fazer coisas como

; ({a, b} = algum_objeto);

Os parênteses extras evitam que as chaves esquerdas sejam analisadas como um bloco, e o ponto-e-vírgula inicial evita que os parênteses sejam analisados ​​como uma chamada de função para uma função na linha anterior.

Para obter mais informações, consulte: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Cuidado, os principais erros durante a atribuição da desestruturação do objeto NÃO ocorrem; você acaba com valores "indefinidos", seja um erro de chave ou algum outro erro que foi propagado silenciosamente como "indefinido".

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