let introduction = ["Hello", "I" , "am", "Sarah"];let greeting = introduction[0];let name = introduction[3];console.log(greeting);//"Hello"console.log(name);//"Sarah"Podemos ver que, quando queremos extrair dados de uma matriz, tivemos que fazer a mesma coisa repetidamente. A atribuição de desestruturação do ES6 facilita a extração desses dados. Como é isso? Primeiro, discutiremos a atribuição de desestruturação de matrizes. Em seguida, passaremos à destruição de objetos. Vamos começar.
Reestruturação básica de matrizes
Se queremos extrair dados usando matrizes, é bastante simples usar a atribuição de desestruturação. Vamos nos referir ao nosso primeiro exemplo de matrizes. Em vez de passar por esse processo repetitivo, faremos isso.
let introduction = ["Hello", "I" , "am", "Sarah"];let [greeting, pronoun] = introduction;console.log(greeting);//"Hello"console.log(pronoun);//"I"Também podemos fazer isso com o mesmo resultado.
let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];console.log(greeting);//"Hello"console.log(pronoun);//"I"Declarando variáveis antes da atribuição
As variáveis podem ser declaradas antes de serem atribuídas assim.
let greeting, pronoun;[greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];console.log(greeting);//"Hello"console.log(pronoun);//"I"Observe que as variáveis estão definidas da esquerda para a direita. Portanto, a primeira variável obtém o primeiro item na matriz, a segunda variável obtém a segunda variável na matriz e assim por diante.
Ignorando itens em uma matriz
E se quisermos obter o primeiro e o último item da nossa matriz em vez do primeiro e do segundo itens e desejar atribuir apenas duas variáveis? Isso também pode ser feito. Veja o exemplo abaixo.
let [greeting,,,name] = ["Hello", "I" , "am", "Sarah"];console.log(greeting);//"Hello"console.log(name);//"Sarah"O que acabou de acontecer? Observe a matriz no lado esquerdo da atribuição de variável. Observe que, em vez de ter apenas uma vírgula, tínhamos três. O separador de vírgula é usado para ignorar valores em uma matriz. Portanto, se você quiser pular um item em uma matriz, use uma vírgula.
Vamos fazer outro. Eu acho divertido. Vamos pular o primeiro e o terceiro item da lista. Como faremos isso?
let [,pronoun,,name] = ["Hello", "I" , "am", "Sarah"];console.log(pronoun);//"I"console.log(name);//"Sarah"Então o separador de vírgulas faz a mágica. Portanto, se queremos pular todos os itens, fazemos isso.
let [,,,,] = ["Hello", "I" , "am", "Sarah"];
Atribuindo o restante de uma matriz
E se quisermos atribuir parte da matriz a variáveis e o restante dos itens de uma matriz a uma variável específica? Nós vamos fazer isso.
let [greeting,...intro] = ["Hello", "I" , "am", "Sarah"];console.log(greeting);//"Hello"console.log(intro);//["I", "am", "Sarah"]Usando esse padrão, você pode descompactar e atribuir a parte restante de uma matriz a uma variável.
Destruindo a atribuição com funções
Também podemos extrair dados de uma matriz retornada de uma função. Digamos que temos uma função que retorna uma matriz como o exemplo abaixo.
function getArray() { return ["Hello", "I" , "am", "Sarah"];} let [greeting,pronoun] = getArray();console.log(greeting);//"Hello"console.log(pronoun);//"I"Nós obtemos os mesmos resultados.
Usando valores padrão
Os valores padrão podem ser atribuídos às variáveis caso o valor extraído da matriz seja undefined.
let [greeting = "hi",name = "Sarah"] = ["hello"];console.log(greeting);//"Hello"console.log(name);//"Sarah"assim name volta a “Sarah” porque não está definido na matriz.
Trocando valores usando a atribuição de reestruturação
Mais uma coisa. Podemos usar a atribuição de desestruturação para trocar os valores das variáveis.
let a = 3;let b = 6;[a,b] = [b,a];console.log(a);//6console.log(b);//3Em seguida, vamos seguir para a Destruição de Objetos.
Destruição de Objetos
Primeiro, vamos ver por que é necessário destruir o objeto. Queremos extrair dados de um objeto e atribuir a novas variáveis. Antes do ES6, como isso será feito?
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};let name = person.name;let country = person.country;let job = person.job;console.log(name);//"Sarah"console.log(country);//"Nigeria"console.log(job);//Developer"Veja como é tedioso extrair esses dados. Temos que fazer repetidamente a mesma coisa. O ES6 vem com a desestruturação para salvar o dia. Vamos pular direto para ele.
Reestruturação básica de objetos
Vamos repetir o exemplo acima com ES6. Em vez de atribuí-lo um por um, podemos usar um objeto à esquerda para extrair os dados.
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};let {name, country, job} = person;console.log(name);//"Sarah"console.log(country);//"Nigeria"console.log(job);//Developer"Você obterá os mesmos resultados. Também é válido atribuir variáveis a um objeto que não é declarado.
let {name, country, job} = {name: "Sarah", country: "Nigeria", job: "Developer"};console.log(name);//"Sarah"console.log(country);//"Nigeria"console.log(job);//Developer"Variáveis declaradas antes de serem atribuídas
Variáveis nos objetos podem ser declaradas antes de serem atribuídas com a desestruturação. Vamos tentar isso.
let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let name, country, job;{name, country, job} = person;console.log(name);// Error : "Unexpected token ="Esperar!! O que acabou de acontecer? Ooh, esquecemos de adicionar () antes dos colchetes.
o ( ) ao redor da instrução de atribuição é necessária sintaxe ao usar a atribuição de destruição de objeto literal sem uma declaração. Isso ocorre porque o {} no lado esquerdo é considerado um bloco e não um objeto literal. Então, vamos entender isso agora.
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};let name, country, job;({name, country, job} = person);console.log(name);//"Sarah"console.log(job);//"Developer"Também é importante observar que, ao usar essa sintaxe, o () deve ser precedido por ponto e vírgula. Senão, pode ser usado para executar uma função da linha anterior.
Observe que as variáveis no objeto no lado esquerdo devem ter o mesmo nome que uma chave de propriedade no objeto person. Se os nomes forem diferentes, teremos undefined. Veja isso.
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};let {name, friends, job} = person;console.log(name);//"Sarah"console.log(friends);//undefinedSe queremos usar um novo nome de variável … bem, podemos.
Usando um novo nome de variável
Se quisermos atribuir valores de um objeto a uma nova variável em vez de usar o nome da propriedade, faremos isso.
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};let {name: foo, job: bar} = person;console.log(foo);//"Sarah"console.log(bar);//"Developer"Portanto, os valores extraídos são passados para as novas variáveis foo e bar.
Usando valores padrão
Os valores padrão também podem ser usados na destruição de objetos, apenas no caso de uma variável undefined em um objeto do qual deseja extrair dados.
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};let {name = "myName", friend = "Annie"} = person;console.log(name);//"Sarah"console.log(friend);//"Annie"Portanto, se o valor não for indefinido, a variável armazenará o valor extraído do objeto, como no caso de name. Senão, ele usava o valor padrão como fazia para friend.
Também podemos definir valores padrão ao atribuir valores a uma nova variável.
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};let {name:foo = "myName", friend: bar = "Annie"} = person;console.log(foo);//"Sarah"console.log(bar);//"Annie"assim name foi extraído de person e atribuído a uma variável diferente. friend por outro lado, era undefined no person, então a nova variável bar foi atribuído o valor padrão.
Nome da propriedade computada
O nome da propriedade computada é outro recurso literal do objeto que também funciona para a destruição. Você pode especificar o nome de uma propriedade por meio de uma expressão, se colocar entre colchetes.
let prop = "name";let {[prop] : foo} = {name: "Sarah", country: "Nigeria", job: "Developer"};console.log(foo);//"Sarah"Combinando matrizes com objetos
Matrizes também podem ser usadas com objetos na destruição de objetos. Um exemplo é dado abaixo.
let person = {name: "Sarah", country: "Nigeria", friends: ["Annie", "Becky"]};let {name:foo, friends: bar} = person;console.log(foo);//"Sarah"console.log(bar);//["Annie", "Becky"]Aninhando na Reestruturação de Objetos
Os objetos também podem ser aninhados durante a desestruturação.
let person = { name: "Sarah", place: { country: "Nigeria", city: "Lagos" }, friends : ["Annie", "Becky"]};let {name:foo, place: { country : bar, city : x} } = person;console.log(foo);//"Sarah"console.log(bar);//"Nigeria"Descanse em Reestruturação de Objetos
A sintaxe restante também pode ser usada para selecionar chaves de propriedade que ainda não foram identificadas pelo padrão de desestruturação. Essas chaves e seus valores são copiados para um novo objeto. Veja o exemplo abaixo.
let person = {name: "Sarah", country: "Nigeria", job: "Developer" friends: ["Annie", "Becky"]};let {name, friends, ...others} = person;console.log(name);//"Sarah"console.log(friends);//["Annie", "Becky"]console.log(others);// {country: "Nigeria", job: "Developer"}Aqui, as propriedades restantes cujas chaves não fazem parte dos nomes das variáveis listadas foram atribuídas à variável others. A sintaxe restante aqui é ...others. others pode ser renomeado para qualquer variável que você desejar.
Uma última coisa, vamos ver como a Destruição de Objetos pode ser usada em funções.
Reestruturação de objetos e funções
A Reestruturação de Objetos pode ser usada para atribuir parâmetros a funções. Podemos usar um exemplo aqui.
function person({name: x, job: y} = {}) { console.log(x);}person({name: "Michelle"});//"Michelle"person();//undefinedperson(friend);//Error : friend is not definedObserve o {} no lado direito do objeto de parâmetros. Isso nos permite chamar uma função sem passar argumentos. É por isso que conseguimos undefined. Se o removermos, receberemos uma mensagem de erro.
Também podemos atribuir valores padrão aos parâmetros.
function person({name: x = "Sarah", job: y = "Developer"} = {}) { console.log(x);}person({name});//"Sarah"Podemos fazer muitas coisas com Array e Object Destructuring, como vimos nos exemplos acima.
Obrigado pela leitura. 🙂