Destruição de matriz e objeto em JavaScript


A atribuição de desestruturação é um recurso interessante que acompanha o ES6. A reestruturação é uma expressão JavaScript que possibilita descompactar valores de matrizes ou propriedades de objetos em variáveis ​​distintas. Ou seja, podemos extrair dados de matrizes e objetos e atribuí-los a variáveis. Por que isso é necessário?

Imagine se queremos extrair dados de uma matriz. Anteriormente, como isso será feito?

XBOX em Oferta

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);//6
console.log(b);//3

Em 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);//undefined

Se 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();//undefined
person(friend);//Error : friend is not defined

Observe 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. 🙂



Fonte

Leave a Reply

Your email address will not be published. Required fields are marked *