Neste tutorial, você aprenderá sobre a atribuição de desestruturação do JavaScript com a ajuda de exemplos.
Desestruturação de JavaScript
A atribuição de desestruturação introduzida no ES6 torna mais fácil atribuir valores de array e propriedades de objeto a variáveis distintas. Por exemplo,
antes do ES6:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
De ES6:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment let ( name, age, gender ) = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Nota : A ordem do nome não importa na desestruturação do objeto.
Por exemplo, você pode escrever o programa acima como:
let ( age, gender, name ) = person; console.log(name); // Sara
Nota : Ao desestruturar objetos, você deve usar o mesmo nome para a variável que a chave do objeto correspondente.
Por exemplo,
let (name1, age, gender) = person; console.log(name1); // undefined
Se quiser atribuir nomes de variáveis diferentes para a chave do objeto, você pode usar:
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // using different variable names let ( name: name1, age: age1, gender:gender1 ) = person; console.log(name1); // Sara console.log(age1); // 25 console.log(gender1); // female
Array Destructuring
Você também pode executar a desestruturação da matriz de maneira semelhante. Por exemplo,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, y, z) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Atribuir valores padrão
Você pode atribuir os valores padrão para variáveis ao usar a desestruturação. Por exemplo,
let arrValue = (10); // assigning default value 5 and 7 let (x = 5, y = 7) = arrValue; console.log(x); // 10 console.log(y); // 7
No programa acima, arrValue tem apenas um elemento. Conseqüentemente,
- a variável x será 10
- a variável y assume o valor padrão 7
Na desestruturação de objetos, você pode passar os valores padrão de maneira semelhante. Por exemplo,
const person = ( name: 'Jack', ) // assign default value 26 to age if undefined const ( name, age = 26) = person; console.log(name); // Jack console.log(age); // 26
Variáveis de troca
Neste exemplo, duas variáveis são trocadas usando a sintaxe de atribuição de desestruturação.
// program to swap variables let x = 4; let y = 7; // swapping variables (x, y) = (y, x); console.log(x); // 7 console.log(y); // 4
Pular itens
Você pode pular itens indesejados em uma matriz sem atribuí-los a variáveis locais. Por exemplo,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, , z) = arrValue; console.log(x); // one console.log(z); // three
No programa acima, o segundo elemento é omitido usando o separador de vírgula ,.
Atribuir os elementos restantes a uma única variável
Você pode atribuir os elementos restantes de uma matriz a uma variável usando a sintaxe de propagação … . Por exemplo,
const arrValue = ('one', 'two', 'three', 'four'); // destructuring assignment in arrays // assigning remaining elements to y const (x,… y) = arrValue; console.log(x); // one console.log(y); // ("two", "three", "four")
Aqui, oneé atribuído à variável x. E o resto dos elementos da matriz são atribuídos à variável y.
Você também pode atribuir o restante das propriedades do objeto a uma única variável. Por exemplo,
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // assigning remaining properties to rest let ( name,… rest ) = person; console.log(name); // Sara console.log(rest); // (age: 25, gender: "female")
Nota : A variável com a sintaxe de propagação não pode ter uma vírgula final ,. Você deve usar este elemento rest (variável com sintaxe de propagação) como a última variável.
Por exemplo,
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Atribuição de desestruturação aninhada
Você pode executar a desestruturação aninhada para elementos da matriz. Por exemplo,
// nested array elements const arrValue = ('one', ('two', 'three')); // nested destructuring assignment in arrays const (x, (y, z)) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Aqui, as variáveis y e z são atribuídas a elementos aninhados twoe three.
Para executar a atribuição de desestruturação aninhada, você deve colocar as variáveis em uma estrutura de array (colocando dentro ()).
Você também pode executar a desestruturação aninhada das propriedades do objeto. Por exemplo,
const person = ( name: 'Jack', age: 26, hobbies: ( read: true, playGame: true ) ) // nested destructuring const (name, hobbies: (read, playGame)) = person; console.log(name); // Jack console.log(read); // true console.log(playGame); // true
A fim de executar a atribuição de desestruturação aninhada para objetos, você deve incluir as variáveis em uma estrutura de objeto (colocando dentro ()).
Nota : O recurso de atribuição de desestruturação foi introduzido no ES6 . Alguns navegadores podem não suportar o uso da atribuição de desestruturação. Visite o suporte para destruição de Javascript para saber mais.
