É uma expressão que permite extrair dados de um Array ou Object em variáveis distintas.
Guia do artigo:
Visão geral
Este recurso permite extrair de um Array ou Object valores e transformar em uma variável ou constante, no exemplo abaixo utilizamos o destructuring para converter objetos de um Array em uma constante:
const getVencedoresTorneio = () => [
{ id: 1, nome: 'Tiago' },
{ id: 2, nome: 'Pedro' },
{ id: 3, nome: 'Maria' }
]
const notifica = (...nomes) => console.log(
`vencedores do torneio:\n%s`,
nomes.map((v, k) => `${++k}º lugar - $`).join('\n')
)
const [ usuarioA, usuarioB ] = getVencedoresTorneio()
notifica(usuarioA.nome, usuarioB.nome)
// vencedores do torneio:
// 1º lugar - Tiago
// 2º lugar - PedroSintaxe
const [ itemA, itemB ] = [ valorA, valorB ]
const ({ itemA itemB } = { itemA: 1, itemB: 2 })Na prática
Exemplo 1
É comum a necessidade de recuperar um item armazenado em um Array e atribuí-lo a uma variável. Nestes casos podemos fazer como no exemplo abaixo:
const totais = [ 10, 20, 30 ]
const [ valorA, valorB, valorC ] = totais
console.log(valorA) // 10
console.log(valorB) // 20
console.log(valorC) // 30Exemplo 2
É possível extrair items de um Array e armazenar o resto:
const [ valorA, valorB, ..valorC ] = [ 10, 20, 30, 40, 50, 60 ]
console.log(valorA) // 10
console.log(valorB) // 20
console.log(valorC) // [ 30, 40, 50, 60 ]Exemplo 3
Podemos pré-definir valores quando não exista determinado elemento em um Array, para que quando seja feita a extração deste resultado para uma variável ele receba um valor padrão:
const [ itemA = 5, itemB = 10 ] = [ 20 ]
console.log(itemA) // 20
console.log(itemB) // 10Exemplo 4
Podemos extrair valores de objetos literais utilizando o nome de suas propriedades, como no exemplo abaixo:
const usuario = { nome: 'Pedro', idade: 18 }
const { nome, idade } = usuario
console.log(nome) // Pedro
console.log(idade) // 185. Valores pré-determinados em objetos
Podemos também utilizar os valores pré definidos em objetos assim como é feito nos Arrays:
const usuario = { idade: 18, temFilhos: true }
const { nome = 'Jonas', idade, temFilhos } = usuario
console.log(nome) // Jonas
console.log(idade) // 18
console.log(temFilhos) // true6. Extraindo valores de objetos
Podemos capturar os resultados que não tenham sido extraídos como variáveis:
const usuario = { nome: 'Pedro', idade: 18, temFilhos: true }
const { nome, ...outrosDados } = usuario
console.log(nome) // Pedro
console.log(outrosDados) // { idade: 18, temFilhos: true }Perceba que ao colocar reticências precedendo a variável outrosDados todos os valores existentes no objeto, exceto o nome, que havia sido extraído, foram adicionados a ela como um novo objeto.
Compatibilidade
| Node.JS ( V8) | 6.4.0 |
| Safari ( WebKit) | 11.1 |
| Chrome ( V8) | 68 |
| Microsoft Edge ( ChakraCore) | 17 |
| Firefox ( Gecko) | 61 |
Nota: O Opera utiliza atualmente grande parte do código do Chrome como base para o seu próprio desenvolvimento e por isso ele não é mencionado nesta listagem.
