Aula 10: Guia Completo sobre Arrays em JavaScript

Hello World!!

E aí, devs! Seguimos com nosso aprendizado em JavaScript… Hoje vamos aprender juntos um pouco sobre arrays. Estou trazendo aqui conceitos, exemplos e maneiras de usá-los. Então, vamos parar de enrolação e bora codar!

O que são Arrays em JavaScript?

Os arrays são estruturas de dados utilizadas para armazenar uma coleção de elementos dentro de uma mesma variável. Em JavaScript, um array pode conter diferentes tipos de dados, como números, strings, booleanos, objetos e até outros arrays.

Para que serve um Array?

Os arrays são muito utilizados para armazenar e manipular listas de dados de maneira eficiente. Com eles, é possível:

• Guardar múltiplos valores em uma única variável.
• Acessar elementos através de índices.
• Modificar, adicionar ou remover itens facilmente.
• Percorrer a lista de elementos com laços de repetição.

Criando um Array

Explicação:

1. Criamos uma variável chamada filmes e atribímos a ela um array contendo três strings.
2. As strings representam os títulos de filmes dentro do array.
3. Utilizamos console.log(filmes); para exibir o array completo no console.

Índice em Arrays

Os arrays em JavaScript utilizam indexação baseada em zero, ou seja, o primeiro elemento está na posição 0, o segundo na posição 1 e assim por diante.

Explicação:

1. Criamos um array numeros com quatro elementos.
2. numeros[0] acessa o primeiro elemento (10).
3. numeros[1] acessa o segundo elemento (20), e assim sucessivamente.
4. O índice sempre começa em 0, então para acessar o último elemento basta usar numeros.length - 1.

Arrays Multidimensionais

Os arrays multidimensionais são arrays que contêm outros arrays como elementos. Eles são úteis quando queremos estruturar dados em forma de tabela ou matriz.

Criando um Array Multidimensional

Explicação:

1. Criamos um array filmes, que contém outros arrays dentro dele.
2. Cada array interno representa um filme e contém informações como título, personagem principal e gênero.
3. O método console.table(filmes); exibe os dados em formato de tabela no console, facilitando a visualização.

Acessando um Elemento Específico

Explicação:

1. filmes[0] acessa o primeiro array interno, que representa “Matrix”.
2. filmes[0][1] acessa o segundo elemento dentro desse array, que é “Neo”.

Iterando sobre um Array

A iteração permite percorrer um array e executar operações em cada elemento.

Usando for

Explicação:

1. Criamos um array numeros contendo quatro valores numéricos.
2. Utilizamos um loop for para percorrer o array.
3. i < numeros.length garante que o loop percorra todos os elementos do array.
4. console.log(numeros[i]); exibe cada elemento no console.

Usando forEach

Explicação:

1. O método forEach percorre automaticamente cada elemento do array.
2. A função de callback recebe numero, que representa cada elemento do array durante a iteração.
3. console.log(numero); exibe cada elemento individualmente.

Métodos de Arrays

Os métodos de arrays são funções embutidas que permitem manipular os elementos do array de maneira eficiente. Eles servem para adicionar, remover, buscar, modificar ou transformar os elementos de um array sem precisar escrever código complexo.

Com esses métodos, podemos realizar operações como:

• Inserir ou remover elementos.
• Encontrar a posição de um determinado item.
• Criar cópias ou modificar partes do array.
• Iterar e transformar os valores armazenados.

push() – Adicionar elemento ao final

Explicação:

1. Criamos um array frutas com dois elementos.
2. push("Laranja") adiciona “Laranja” ao final do array.
3. console.log(frutas); exibe o array atualizado.

pop() – Remover o último elemento

Explicação:

1. pop() remove o último elemento do array.
2. console.log(frutas); exibe o array sem “Laranja”.

indexOf() – Encontrar a posição de um elemento

Explicação:

1. indexOf("Banana") retorna a posição de “Banana” dentro do array.
2. Se o elemento não existir, o retorno é 1.

slice() – Copiar parte do array

Explicação:

1. slice(0, 2) cria uma cópia do array contendo os elementos entre os índices 0 e 1.
2. console.log(novasFrutas); exibe a cópia do array original.

splice() – Remover ou substituir elementos

Explicação:

1. splice(1, 1, "Pêssego") remove um elemento na posição 1 e adiciona “Pêssego” no lugar.
2. console.log(frutas); exibe o array atualizado.

Exploração Adicional de Métodos de Arrays

Os métodos apresentados aqui são apenas alguns exemplos do que você pode fazer com arrays em JavaScript. Existem muitos outros métodos disponíveis para manipulação e transformação de arrays, como map(), filter(), reduce(), entre outros.

Para aprofundar seus conhecimentos, recomendo que explore mais métodos na documentação oficial do MDN e pratique com exercícios para consolidar o aprendizado:

Documentação Oficial do MDN sobre Arrays:
Métodos de Array no MDN

Finalizando

Então, por hoje é isso! Espero que esta aula tenha ajudado e conseguido compartilhar um pouco do que aprendi sobre arrays com vocês. Fiquem ligados na próxima semana, pois vamos começar a estudar objetos em JavaScript.

Segue o link do repositório desta aula no GitHub:
https://github.com/guilherme-silvam/js-aulas-guilhermemachadodev/tree/main/aula-10-guilhermemachadodev

Bora codar!