Arrays em JavaScript

Introdução

Neste laboratório, você explorará uma das estruturas de dados mais fundamentais em JavaScript: o array. Um array é uma variável especial que pode conter mais de um valor por vez. Arrays são usados para armazenar coleções ordenadas de dados, como uma lista de itens, números ou strings.

Você aprenderá a:

• Criar um array.
• Acessar e modificar elementos de um array.
• Adicionar e remover elementos usando métodos comuns de array.
• Iterar sobre um array para processar seus elementos.

Ao longo deste laboratório, você trabalhará dentro do WebIDE. Você escreverá seu código JavaScript no arquivo script.js. Para ver os resultados do seu código, você usará o console do desenvolvedor do navegador, que pode ser acessado na aba "Web 8080".

Criar literal de array com colchetes

Nesta etapa, você aprenderá a forma mais comum de criar um array em JavaScript: usando um literal de array. Um literal de array é uma lista de zero ou mais expressões, cada uma representando um elemento do array, entre colchetes ([]).

Primeiro, localize o arquivo script.js no explorador de arquivos no lado esquerdo do WebIDE. Clique nele para abri-lo no editor.

Agora, adicione o seguinte código ao script.js para criar um array de frutas e exibi-lo no console.

const fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits);

Após adicionar o código, salve o arquivo (você pode usar Ctrl+S ou Cmd+S). Para ver a saída, mude para a aba "Web 8080" na parte superior da tela. Pode ser necessário abrir o console do desenvolvedor do seu navegador (geralmente pressionando F12 ou clicando com o botão direito na página e selecionando "Inspecionar", depois navegando para a aba "Console"). Você deverá ver o array impresso no console.

["Apple", "Banana", "Cherry"];

Acessar elemento do array por índice

Nesta etapa, você aprenderá como acessar elementos individuais dentro de um array. Arrays em JavaScript são indexados a partir de zero, o que significa que o primeiro elemento está no índice 0, o segundo no índice 1, e assim por diante. Você pode acessar um elemento referindo-se ao seu número de índice entre colchetes.

Vamos continuar editando o arquivo script.js. Adicione as seguintes linhas abaixo do seu código existente para acessar e exibir o primeiro elemento do array fruits.

// Acessa o primeiro elemento (índice 0)
const firstFruit = fruits[0];
console.log("A primeira fruta é:", firstFruit);

// Acessa o terceiro elemento (índice 2)
console.log("A terceira fruta é:", fruits[2]);

Salve o arquivo script.js e atualize a aba "Web 8080". Verifique o console do desenvolvedor. Você verá a nova saída, além da saída da etapa anterior.

The first fruit is: Apple
The third fruit is: Cherry

Adicionar elemento com o método push

Nesta etapa, você aprenderá como adicionar um novo elemento ao final de um array existente. A maneira mais fácil de fazer isso é com o método push(). Este método adiciona um ou mais elementos ao final de um array e retorna o novo comprimento do array.

Adicione o seguinte código ao final do seu arquivo script.js para adicionar "Orange" ao seu array fruits.

// Adiciona um novo elemento ao final do array
fruits.push("Orange");

console.log("Array após push:", fruits);

Salve o arquivo e verifique o console na aba "Web 8080". Você verá que o array fruits agora contém quatro elementos.

Array after push: [ "Apple", "Banana", "Cherry", "Orange" ]

Remover último elemento com o método pop

Nesta etapa, você aprenderá como remover o último elemento de um array usando o método pop(). Este método remove o último elemento de um array e retorna esse elemento. Esta ação altera o comprimento do array.

Adicione o seguinte código ao final do seu arquivo script.js. Isso removerá o último elemento que você acabou de adicionar e exibirá tanto o elemento removido quanto o array atualizado.

// Remove o último elemento do array
const removedFruit = fruits.pop();

console.log("Fruta removida:", removedFruit);
console.log("Array após pop:", fruits);

Salve o arquivo e observe a saída do console na aba "Web 8080". Você verá que "Orange" foi removido e o array voltou aos seus três elementos originais.

Removed fruit: Orange
Array after pop: [ "Apple", "Banana", "Cherry" ]

Iterar array usando loop for

Nesta etapa, você aprenderá como percorrer todos os elementos de um array. Uma maneira comum de fazer isso é usando um loop for. Você pode usar a propriedade length do array para determinar quantas vezes o loop deve ser executado.

Adicione o seguinte loop for ao final de script.js para imprimir cada fruta no array no console em uma nova linha.

console.log("Iterando pelo array com um loop for:");

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

O loop começa com i = 0 e continua enquanto i for menor que o comprimento do array fruits. Em cada iteração, ele imprime o elemento no índice atual i.

Salve o arquivo e verifique o console na aba "Web 8080". Você verá cada fruta listada individualmente.

Iterating through the array with a for loop:
Apple
Banana
Cherry

Resumo

Parabéns por completar o laboratório de Arrays em JavaScript!

Neste laboratório, você aprendeu as operações essenciais para trabalhar com arrays em JavaScript. Você praticou:

• Criar um array usando a sintaxe literal [].
• Acessar elementos pelo seu índice baseado em zero, como array[0].
• Adicionar um elemento ao final de um array com o método push().
• Remover o último elemento de um array com o método pop().
• Iterar sobre cada elemento em um array usando um loop for e a propriedade length.

Arrays são um pilar da programação em JavaScript. Existem muitos outros métodos poderosos para explorar, como forEach(), map() e filter(), que podem tornar seu código ainda mais conciso e expressivo. Continue praticando para dominar esta estrutura de dados fundamental.