Exercício fácil: Unindo Arrays em JavaScript

Você sabe o que é um array?

Arrays são objetos semelhantes a listas. O tamanho de um array pode ser alterado a qualquer momento e os dados podem ser armazenados em posições não necessariamente seguindo uma ordem contínua. Eles possuem índices, que devem ser em números inteiros. Utilizando a notação de colchetes, você pode acessar ou definir os valores dos elementos dentro do array.

União de Arrays:

Requisitos:

Existem várias maneiras de adicionar novos elementos à um vetor em JavaScript. Neste exercício, serão utilizados as funções concat() e push().

Concat: Cria um novo array contendo uma cópia de si e dos argumentos passados.

arr.concat(valor1, valor2, ..., valorN)

// Onde: arr é o vetor que será concatenado
// Concat: função de concatenação
// Valores: argumentos

Push: Adiciona um ou mais elementos ao final do array e retorna o comprimento deste array.

arr.push(elemento1, ..., elementoN)

// Onde: arr é o vetor que será utilizado
// Push: função push para inserção de elementos no vetor
// Elementos: Argumentos/Elementos que serão inseridos no vetor

Para descobrir outras funções de união de vetores, acesse o artigo a seguir: Adicionando elementos em uma lista array JavaScript

Exercício:

Parte 1:

Crie três vetores, chamados vetorInteiro, vetorString e vetorDouble. Cada um destes vetores deverá conter quatro valores, sendo o primeiro com valores inteiros, o segundo com strings e o terceiro com valores decimais.

Declarados os vetores, utilize a função de união concat() de duas maneiras diferentes para unir os vetores, e mostre o resultado no console. Todos os elementos do vetor resultado deverão aparecer no console.

Se você não sabe quais são os modos de usar a função concat, acesse este artigo para descobrir: Duas maneiras de unir vetores em JavaScript

Parte 2:

Crie dois vetores chamados vetorPilha e vetorAdiciona. Utilize o método Push para adicionar elementos do vetorAdiciona ao vetorPilha. Inicialmente, o vetorPilha conterá cinco elementos inteiros: [1, 2, 3, 4, 5]. Você deverá adicionar os valores contidos no vetorAdiciona [6, 7, 8, 9,10] e mostrá-los no console. É importante lembrar que o método Push retorna somente o tamanho do Vetor, então, justifique por quê motivo isso acontece e imprima no console o vetor com os elementos adicionados.

Você pode fazer o download das respostas destes exercícios aqui: [download id=”2547″]

Gostou deste exercício? Comente os seus resultados abaixo!

 

Duas maneiras de unir vetores em JavaScript:

Você sabe como unir vetores?

Este artigo mostrará duas maneiras de unir vetores e retornar um novo vetor.

Serão utilizados os operadores Spread e Concat.

// Duas formas de unir vetores
const circ = [‘círculo’, ‘esfera’];
const quadr = [‘quadrado’, ‘cubo’];

// Usando o Concat para unir os vetores:
cons unirVet = [].concat(circ, quadr);

// Usando o Spread para unir os vetores:
const unirSpread = [...circ, ...quadr];

// E o resultado será:
console.log(unirSpread);

// [‘círculo’, ‘esfera’, ‘quadrado’, ‘cubo’]

Você também pode escrever o método Concat deste modo:

const circ = [‘círculo’, ‘esfera’];
const quadr = [‘quadrado’, ‘cubo’];

const unirVetor = circ.concat(quadr);
console.log(unirVetor);

E o resultado será:
// [‘círculo’, ‘esfera’, ‘quadrado’, ‘cubo’]

console.log(circ); // [‘círculo’, ‘esfera’];
console.log(quadr); // [‘quadrado’, ‘cubo’];

Este modo não altera o vetor existente.

Comparando os dois modos do concat:
// Versão 1
cons unirVet = [].concat(circ, quadr);

// Versão 2
const unirVetor = circ.concat(quadr);

A versão 1 cria uma nova matriz e não manipula uma matriz existente. Visualmente falando, a versão 2 parece adicionar a matriz de quadrados à matriz de círculos.

A diferença entre Spread e Concat:

Spread:

O Spread quebra um array ou uma string em múltiplos elementos. Se você possui um array e quer criar um array com o existente fazendo parte dele, você pode usar o Spread.

let umaString = "Olá Mundo";

console.log(umaString); // exibe a string

console.log(...umaString); // exibe cada caracter

let umVetor = [11,22,33,44,55,66]; //cria um vetor

console.log(umVetor); // mostra conteúdo o vetor

console.log(...umVetor); // mostra o conteúdo de cada índice do vetor

Concat:

Já o Concat cria um novo vetor unindo os elementos que foram passados como parâmetro, não alterando a si mesmo ou aos argumentos passados, mas criando um novo vetor contendo uma cópia de si e dos argumentos.

A cópia é uma referência aos objetos. Se o objeto original for modificado, as mudanças serão visíveis no original e na cópia.

Strings e numbers (diferente dos objetos String e Number), o concat copia os valores de strings e numbers para o novo vetor, mas qualquer alteração no novo vetor não refletirá no original.

// Cria uma função que concatenará
// o vetor e a variável
function combinaVetor(vetor1, vetor2){ 
    return [].concat(vetor1, vetor2);
} 

// Crie um vetor
const ehVetor = ['carro', 'moto', 'onibus'];

// Crie uma variável
const notVetor = 7;

// Chamada da função
combinaVetor(ehVetor, notVetor);

// [“carro”, “moto”, “onibus”, 7]

Unindo arrays com Push:

Quando você utilizar o método Push, você não criará um novo array, mas sim manipulando um existente:

const meninos = ["joao", "josé"];
const meninas = ["maria", "vanessa"];
const alunos = meninos.push(...meninas);

console.log(alunos); //Quando você usa o push, ele retornará o tamanho do vetor unido.
console.log(meninos); 
["joao", "josé", "maria", "vanessa"] // Retorna o vetor meninos modificado 

console.log(meninas);
 ["maria", "vanessa"]

Gostou deste artigo? Comente abaixo e compartilhe com seus amigos!