Resumo : neste tutorial, você aprenderá como usar a atribuição de desestruturação ES6 que permite desestruturar um array em variáveis individuais.
ES6 fornece um novo recurso chamado destruição de atribuição que permite desestruturar propriedades de um objeto ou elementos de um array em variáveis individuais.
Vamos começar com a desestruturação do array.
Introdução à desestruturação de array JavaScript
Supondo que você tenha uma função que retorne um array de números da seguinte forma:
function getScores() {
return [70, 80, 90];
}Linguagem de código: JavaScript ( javascript )O seguinte invoca a getScores()função e atribui o valor retornado a uma variável:
let scores = getScores();Linguagem de código: JavaScript ( javascript )Para obter a pontuação individual, você precisa fazer assim:
let x = scores[0],
y = scores[1],
z = scores[2];Linguagem de código: JavaScript ( javascript )Antes do ES6, não havia uma maneira direta de atribuir os elementos do array retornado a múltiplas variáveis, como x, ye z.
Felizmente, a partir do ES6, você pode usar a atribuição de destruição da seguinte maneira:
let [x, y, z] = getScores();
console.log(x); // 70
console.log(y); // 80
console.log(z); // 90Linguagem de código: JavaScript ( javascript )As variáveis x, ye zassumirão os valores do primeiro, segundo e terceiro elementos da matriz retornada.
Observe que os colchetes []se parecem com a sintaxe da matriz, mas não são.
Se a getScores()função retornar um array de dois elementos, a terceira variável será undefined, assim:
function getScores() {
return [70, 80];
}
let [x, y, z] = getScores();
console.log(x); // 70
console.log(y); // 80
console.log(z); // undefinedLinguagem de código: JavaScript ( javascript )Caso a getScores()função retorne um array com mais de três elementos, os elementos restantes são descartados. Por exemplo:
function getScores() {
return [70, 80, 90, 100];
}
let [x, y, z] = getScores();
console.log(x); // 70
console.log(y); // 80
console.log(z); // 90Linguagem de código: JavaScript ( javascript )Sintaxe de atribuição e descanso de desestruturação de array
É possível pegar todos os elementos restantes de um array e colocá-los em um novo array usando a sintaxe rest (...) :
let [x, y ,...args] = getScores();
console.log(x); // 70
console.log(y); // 80
console.log(args); // [90, 100]Linguagem de código: JavaScript ( javascript )As variáveis xe yrecebem valores dos dois primeiros elementos da matriz retornada. E a argsvariável recebe todos os argumentos restantes, que são os dois últimos elementos do array retornado.
Observe que é possível desestruturar um array na atribuição que o separa da declaração da variável. Por exemplo:
let a, b;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20Linguagem de código: JavaScript ( javascript )Configurando valores padrão
Veja o exemplo a seguir:
function getItems() {
return [10, 20];
}
let items = getItems();
let thirdItem = items[2] != undefined ? items[2] : 0;
console.log(thirdItem); // 0Linguagem de código: JavaScript ( javascript )Como funciona:
- Primeiro, declare a
getItems()função que retorna um array de dois números. - Em seguida, atribua a variável items ao array retornado da função getItems().
- Por fim, verifique se o terceiro elemento existe no array. Caso contrário, atribua o valor 0 à
thirdItemvariável.
Será mais simples com a atribuição de desestruturação com um valor padrão:
let [, , thirdItem = 0] = getItems();
console.log(thirdItem); // 0Linguagem de código: JavaScript ( javascript )Se o valor retirado do array for undefined, você pode atribuir à variável um valor padrão, como este:
let a, b;
[a = 1, b = 2] = [10];
console.log(a); // 10
console.log(b); // 2Linguagem de código: JavaScript ( javascript )Se a getItems()função não retornar um array e você esperar um array, a atribuição de destruição resultará em um erro. Por exemplo:
function getItems() {
return null;
}
let [x = 1, y = 2] = getItems();Linguagem de código: JavaScript ( javascript )Erro:
Uncaught TypeError: getItems is not a function or its return value is not iterableLinguagem de código: JavaScript ( javascript )Uma maneira típica de resolver isso é reverter o valor retornado da getItems()função para um array vazio como este:
function getItems() {
return null;
}
let [a = 10, b = 20] = getItems() || [];
console.log(a); // 10
console.log(b); // 20Linguagem de código: JavaScript ( javascript )Desestruturação de array aninhado
A função a seguir retorna um array que contém um elemento que é outro array ou array aninhado:
function getProfile() {
return [
'John',
'Doe',
['Red', 'Green', 'Blue']
];
}Linguagem de código: JavaScript ( javascript )Como o terceiro elemento do array retornado é outro array, você precisa usar a sintaxe de desestruturação de array aninhado para desestruturá-lo, assim:
let [
firstName,
lastName,
[
color1,
color2,
color3
]
] = getProfile();
console.log(color1, color2, color3); // Red Green BlueLinguagem de código: JavaScript ( javascript )Aplicativos de atribuição de desestruturação de array
Vamos ver alguns exemplos práticos de uso da sintaxe de atribuição de desestruturação de array.
1) Trocando variáveis
A desestruturação do array facilita a troca de valores de variáveis sem usar uma variável temporária:
let a = 10,
b = 20;
[a, b] = [b, a];
console.log(a); // 20
console.log(b); // 10Linguagem de código: JavaScript ( javascript )2) Funções que retornam vários valores
Em JavaScript, uma função pode retornar um valor. No entanto, você pode retornar uma matriz que contenha vários valores, por exemplo:
function stat(a, b) {
return [
a + b,
(a + b) / 2,
a - b
]
}Linguagem de código: JavaScript ( javascript )E então você usa a sintaxe de atribuição de desestruturação de array para desestruturar os elementos do array de retorno em variáveis:
let [sum, average, difference] = stat(20, 10);
console.log(sum, average, difference); // 30, 15, 10Linguagem de código: JavaScript ( javascript )Neste tutorial, você aprendeu como usar a atribuição de desestruturação ES6 para desestruturar elementos em um array em variáveis individuais.
