Criar e Manipular Arrays em JavaScript

Introdução

Neste laboratório, os alunos explorarão os conceitos fundamentais de criação e manipulação de arrays (vetores) em JavaScript. O laboratório oferece uma introdução abrangente à inicialização de arrays, acesso a elementos de array e execução de operações básicas em arrays por meio de exercícios práticos de codificação. Os participantes aprenderão como criar arrays usando diferentes métodos, incluindo a notação de colchetes e o construtor Array, e entenderão como trabalhar com arrays contendo vários tipos de dados.

O laboratório cobre habilidades-chave, como definir arrays com números, strings (cadeias de caracteres) e elementos mistos, acessar elementos individuais de array usando índices e demonstrar técnicas básicas de manipulação de array. Ao trabalhar com exemplos práticos, os alunos obterão experiência prática na criação, acesso e interação com arrays, que são estruturas de dados essenciais na programação JavaScript.

Entenda a Definição e Inicialização de Arrays

Nesta etapa, você aprenderá sobre arrays em JavaScript, que são estruturas de dados fundamentais usadas para armazenar múltiplos valores em uma única variável. Arrays permitem que você colete e organize dados relacionados de forma eficiente.

Vamos começar criando um array simples em JavaScript. Abra o WebIDE e crie um novo arquivo chamado arrays.js no diretório ~/project.

// Creating an array of numbers
let numbers = [1, 2, 3, 4, 5];

// Creating an array of strings
let fruits = ["apple", "banana", "orange"];

// Creating an empty array
let emptyArray = [];

// Creating an array with mixed data types
let mixedArray = [42, "hello", true, null];

console.log("Numbers array:", numbers);
console.log("Fruits array:", fruits);
console.log("Empty array:", emptyArray);
console.log("Mixed array:", mixedArray);

Quando você executar este código, verá a seguinte saída de exemplo:

Numbers array: [1, 2, 3, 4, 5]
Fruits array: ['apple', 'banana', 'orange']
Empty array: []
Mixed array: [42, 'hello', true, null]

Pontos-chave sobre a inicialização de arrays:

• Arrays são criados usando colchetes []
• Arrays podem conter elementos de diferentes tipos
• Arrays podem estar vazios ou pré-preenchidos
• O primeiro elemento de um array está sempre no índice 0

Você também pode criar arrays usando o construtor Array:

// Using Array constructor
let numbersConstructor = new Array(1, 2, 3, 4, 5);
console.log("Array using constructor:", numbersConstructor);

Acessar Elementos de Array Usando Índices

Nesta etapa, você aprenderá como acessar elementos individuais em um array usando seu índice. Em JavaScript, os índices de array começam em 0, o que significa que o primeiro elemento está no índice 0, o segundo no índice 1 e assim por diante.

Abra o arquivo arrays.js no diretório ~/project e adicione o seguinte código:

// Create an array of colors
let colors = ["red", "green", "blue", "yellow", "purple"];

// Accessing array elements by index
console.log("First color:", colors[0]); // First element
console.log("Third color:", colors[2]); // Third element
console.log("Last color:", colors[colors.length - 1]); // Last element

// Modifying array elements
colors[1] = "orange"; // Change the second element
console.log("Modified colors array:", colors);

// Demonstrating index range
console.log("Array length:", colors.length);

Quando você executar este código, verá a seguinte saída de exemplo:

First color: red
Third color: blue
Last color: purple
Modified colors array: ['red', 'orange', 'blue', 'yellow', 'purple']
Array length: 5

Pontos-chave sobre indexação de array:

• Índices começam em 0
• Use colchetes [] para acessar elementos
• array.length dá o número total de elementos
• Você pode modificar elementos atribuindo um novo valor a um índice específico
• Para acessar o último elemento, use array[array.length - 1]

Tente acessar elementos fora do intervalo do array para ver o que acontece:

console.log("Accessing out-of-range index:", colors[10]); // Returns undefined

Criar um Array de Frutas

Nesta etapa, você criará um array de frutas e aprenderá a trabalhar com ele. Abra o arquivo arrays.js no diretório ~/project e adicione o seguinte código:

// Create an array of fruits
let fruits = ["apple", "banana", "orange", "mango", "strawberry"];

// Display the entire fruits array
console.log("Fruits array:", fruits);

// Add a new fruit to the end of the array
fruits.push("grape");
console.log("Fruits after adding grape:", fruits);

// Create an array with different types of fruits
let tropicalFruits = ["pineapple", "coconut", "papaya"];

// Combine two fruit arrays
let allFruits = fruits.concat(tropicalFruits);
console.log("All fruits:", allFruits);

// Check the number of fruits
console.log("Total number of fruits:", allFruits.length);

Quando você executar este código, verá a seguinte saída de exemplo:

Fruits array: ['apple', 'banana', 'orange', 'mango', 'strawberry']
Fruits after adding grape: ['apple', 'banana', 'orange', 'mango', 'strawberry', 'grape']
All fruits: ['apple', 'banana', 'orange', 'mango', 'strawberry', 'grape', 'pineapple', 'coconut', 'papaya']
Total number of fruits: 9

Pontos-chave sobre a criação e manipulação de arrays de frutas:

• Arrays podem ser criados com múltiplos elementos
• Você pode adicionar novos elementos usando push()
• Arrays podem ser combinados usando concat()
• A propriedade length mostra o número total de elementos

Imprimir Elementos do Array na Página Web

Nesta etapa, você aprenderá como exibir elementos de array em uma página web usando HTML e JavaScript. Primeiro, crie um arquivo HTML chamado fruits.html no diretório ~/project:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fruits Array Display</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      #fruits-list {
        background-color: #f4f4f4;
        padding: 20px;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>My Fruits Collection</h1>
    <div id="fruits-list"></div>

    <script>
      // Create an array of fruits
      let fruits = ["Apple", "Banana", "Orange", "Mango", "Strawberry"];

      // Get the fruits list container
      let fruitsList = document.getElementById("fruits-list");

      // Create an unordered list to display fruits
      let ul = document.createElement("ul");

      // Loop through the fruits array and create list items
      fruits.forEach(function (fruit) {
        let li = document.createElement("li");
        li.textContent = fruit;
        ul.appendChild(li);
      });

      // Add the list to the page
      fruitsList.appendChild(ul);
    </script>
  </body>
</html>

Este exemplo demonstra vários conceitos-chave:

• Criando uma estrutura HTML
• Usando JavaScript para manipular o DOM (Document Object Model)
• Exibindo elementos de array em uma página web
• Usando forEach() para iterar pelos elementos do array

Quando você abrir este arquivo HTML em um navegador web, verá uma lista de frutas exibida na página.

Método alternativo usando innerHTML:

// Alternative method to display fruits
let fruitsList = document.getElementById("fruits-list");
fruitsList.innerHTML = fruits.map((fruit) => `<li>${fruit}</li>`).join("");

Explorar Operações Básicas em Arrays

Nesta etapa, você aprenderá sobre operações comuns com arrays em JavaScript. Abra o arquivo arrays.js no diretório ~/project e adicione o seguinte código:

// Create an array of numbers
let numbers = [5, 2, 8, 1, 9, 3];

// Adding elements
numbers.push(10); // Add element to the end
numbers.unshift(0); // Add element to the beginning
console.log("After adding elements:", numbers);

// Removing elements
let lastNumber = numbers.pop(); // Remove last element
let firstNumber = numbers.shift(); // Remove first element
console.log("After removing elements:", numbers);

// Sorting the array
numbers.sort((a, b) => a - b); // Ascending order
console.log("Sorted array:", numbers);

// Reversing the array
numbers.reverse();
console.log("Reversed array:", numbers);

// Finding elements
let index = numbers.indexOf(8);
console.log("Index of 8:", index);

// Slicing the array
let slicedNumbers = numbers.slice(1, 4);
console.log("Sliced array:", slicedNumbers);

// Filtering the array
let evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log("Even numbers:", evenNumbers);

// Mapping the array
let squaredNumbers = numbers.map((num) => num * num);
console.log("Squared numbers:", squaredNumbers);

Quando você executar este código, verá a seguinte saída de exemplo:

After adding elements: [0, 5, 2, 8, 1, 9, 3, 10]
After removing elements: [5, 2, 8, 1, 9, 3, 10]
Sorted array: [1, 2, 3, 5, 8, 9, 10]
Reversed array: [10, 9, 8, 5, 3, 2, 1]
Index of 8: 2
Sliced array: [9, 8, 5]
Even numbers: [10, 8, 2]
Squared numbers: [100, 81, 64, 25, 9, 4, 1]

Operações-chave com arrays demonstradas:

• push() e unshift() para adicionar elementos
• pop() e shift() para remover elementos
• sort() para ordenar elementos
• reverse() para inverter a ordem do array
• indexOf() para encontrar a posição de um elemento
• slice() para extrair uma porção de um array
• filter() para criar um novo array com elementos específicos
• map() para transformar elementos do array

Resumo

Neste laboratório, os participantes exploraram os fundamentos de como trabalhar com arrays em JavaScript, aprendendo a criar, inicializar e manipular estruturas de dados de array. O laboratório abordou conceitos-chave, como a definição de arrays usando colchetes e o construtor Array, demonstrando a capacidade de criar arrays com diferentes tipos de elementos, incluindo números, strings e tipos de dados mistos.

Os participantes adquiriram habilidades práticas no acesso a elementos de array por meio de indexação, compreendendo que os índices de array começam em 0, e aprenderam a realizar operações básicas com arrays. A abordagem prática permitiu que os alunos praticassem a criação de arrays, registrassem seu conteúdo e explorassem a flexibilidade dos arrays JavaScript no armazenamento e organização eficiente de dados.