Sintaxe Spread em Arrays
Parte da seção Lógica & Fluxo do Journey de JavaScript da Coddy — lição 48 de 65.
A sintaxe spread (...) permite que um iterável, como um array, seja expandido em locais onde zero ou mais argumentos ou elementos são esperados. Ela fornece uma maneira concisa de realizar operações como combinar arrays ou copiar arrays.
Aqui estão alguns casos de uso comuns:
1. Combinando arrays:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]2. Criando uma cópia superficial (shallow copy) de um array:
const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]3. Adicionando elementos a um array:
const numbers = [1, 2, 3];
const moreNumbers = [0, ...numbers, 4];
console.log(moreNumbers); // [0, 1, 2, 3, 4]4. Passando elementos de um array como argumentos de função:
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6Desafio
FácilCrie uma função chamada mergeArr que recebe dois arrays de números como argumentos. A função deve:
- Mesclar os dois arrays usando o operador spread
- Remover quaisquer números duplicados
- Retornar o array resultante
Folha de consulta
A sintaxe de espalhamento (spread syntax) (...) permite que um iterável seja expandido em locais onde zero ou mais argumentos ou elementos são esperados.
Combinando arrays:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]Criando uma cópia superficial (shallow copy):
const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]Adicionando elementos a um array:
const numbers = [1, 2, 3];
const moreNumbers = [0, ...numbers, 4];
console.log(moreNumbers); // [0, 1, 2, 3, 4]Passando elementos de um array como argumentos de função:
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6Experimente você mesmo
function mergeArr(arr1, arr2) {
// Escreva seu código aqui
}
Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Lógica & Fluxo
1Strings em Profundidade
Fundamentos de StringsIterar sobre StringsTemplate LiteralsMétodos de StringRecapitulação - String Weaver4JSON Parte 2
Iterar sobre JSONJSON AninhadoEncadeamento Opcional em JSONCópia Rasa e ProfundaRecapitulação - Loja de BicicletasRecapitulação - Sistema Solar7Sistema de Gerenciamento de Biblioteca
Visão Geral do ProjetoAdicionando Livros10Gerenciar Sistema de Festival
Visão Geral do ProjetoAdicionar Filmes e Locais2Arrays Multidimensionais
Fundamentos de Arrays 2DAcessando Elementos de Arrays 2DLoops Aninhados com Arrays 2DRecapitulação - Arrays 2DAdição e Subtração de MatrizesArrays IrregularesArrays 3D e AlémPadrões Comuns de Arrays 2DRecapitulação - Tudo Sobre Arrays5Sets Parte 1
O que é um Set?Iterando sobre SetsAdicionando um elementoRemovendo um elementoVerificando se um elemento existeTamanho e Is EmptyCopy e ClearRecapitulação - O básico de Sets8Tópicos Interessantes sobre Arrays
Desestruturação de ArraysSintaxe Spread em ArraysArrays EsparsosRecapitulação - Workshop de Arrays3JSON Parte 1
O que é um JSON?Verificar se a Chave ExisteMétodos de ObjetoO Spread Operator Parte 1O Spread Operator Parte 2Remover ChavesRecapitulação - Manipular Chaves JSON