Manipule Arrays com Métodos de Array JavaScript

Introdução

Neste laboratório, os alunos explorarão técnicas essenciais de manipulação de arrays JavaScript através de uma experiência de aprendizagem prática e abrangente. O laboratório cobre métodos de array chave, como slice(), unshift(), shift(), ordenação e transformação de arrays, fornecendo habilidades práticas para gerenciar e modificar estruturas de dados de array.

Os participantes aprenderão como extrair elementos de array usando slice(), adicionar elementos ao início de um array com unshift(), remover o primeiro elemento usando shift(), e realizar ordenação e inversão de arrays. Ao trabalhar com exemplos práticos de codificação, os alunos obterão uma sólida compreensão de como manipular arrays de forma eficaz em JavaScript, aprimorando suas capacidades de programação e habilidades de resolução de problemas.

Fatiar Elementos de Array

Nesta etapa, você aprenderá como usar o método slice() para extrair uma porção de um array em JavaScript. O método slice() permite criar um novo array selecionando elementos de um array existente sem modificar o array original.

Vamos começar criando um array de exemplo e praticando como fatiar seus elementos. Abra o WebIDE e crie um novo arquivo chamado array-slice.js no diretório ~/project.

// Create an array of fruits
const fruits = ["apple", "banana", "cherry", "date", "elderberry"];

// Slice the first three elements
const slicedFruits1 = fruits.slice(0, 3);
console.log("First three fruits:", slicedFruits1);

// Slice from index 2 to the end
const slicedFruits2 = fruits.slice(2);
console.log("Fruits from index 2:", slicedFruits2);

// Slice the last two elements using negative index
const slicedFruits3 = fruits.slice(-2);
console.log("Last two fruits:", slicedFruits3);

Agora, execute o script para ver os resultados:

node ~/project/array-slice.js

Exemplo de saída:

First three fruits: [ 'apple', 'banana', 'cherry' ]
Fruits from index 2: [ 'cherry', 'date', 'elderberry' ]
Last two fruits: [ 'date', 'elderberry' ]

Pontos-chave sobre slice():

• O primeiro argumento é o índice inicial (inclusivo)
• O segundo argumento é o índice final (exclusivo)
• Se nenhum índice final for fornecido, ele fatia até o final do array
• Índices negativos contam a partir do final do array
• O array original permanece inalterado

Adicionar Elementos ao Início do Array com unshift()

Nesta etapa, você aprenderá como usar o método unshift() para adicionar um ou mais elementos ao início de um array em JavaScript. O método unshift() modifica o array original inserindo elementos no início e retorna o novo comprimento do array.

Crie um novo arquivo chamado array-unshift.js no diretório ~/project e adicione o seguinte código:

// Create an initial array of fruits
let fruits = ["banana", "cherry", "date"];
console.log("Original array:", fruits);

// Add a single element to the beginning of the array
fruits.unshift("apple");
console.log("After adding one element:", fruits);

// Add multiple elements to the beginning of the array
fruits.unshift("grape", "kiwi");
console.log("After adding multiple elements:", fruits);

// Store the new length of the array
let newLength = fruits.unshift("orange");
console.log("New array length:", newLength);
console.log("Final array:", fruits);

Agora, execute o script para ver os resultados:

node ~/project/array-unshift.js

Exemplo de saída:

Original array: [ 'banana', 'cherry', 'date' ]
After adding one element: [ 'apple', 'banana', 'cherry', 'date' ]
After adding multiple elements: [ 'grape', 'kiwi', 'apple', 'banana', 'cherry', 'date' ]
New array length: 7
Final array: [ 'orange', 'grape', 'kiwi', 'apple', 'banana', 'cherry', 'date' ]

Pontos-chave sobre unshift():

• Adiciona um ou mais elementos ao início de um array
• Modifica o array original
• Retorna o novo comprimento do array
• Pode adicionar múltiplos elementos em uma única chamada
• Desloca os elementos existentes para índices mais altos

Remover o Primeiro Elemento com shift()

Nesta etapa, você aprenderá como usar o método shift() para remover o primeiro elemento de um array em JavaScript. O método shift() modifica o array original removendo o primeiro elemento e retorna esse elemento removido.

Crie um novo arquivo chamado array-shift.js no diretório ~/project e adicione o seguinte código:

// Create an initial array of programming languages
let languages = ["JavaScript", "Python", "Java", "C++", "Ruby"];
console.log("Original array:", languages);

// Remove and store the first element
let removedLanguage = languages.shift();
console.log("Removed language:", removedLanguage);
console.log("Array after shift:", languages);

// Remove multiple elements by calling shift() multiple times
let secondRemovedLanguage = languages.shift();
console.log("Second removed language:", secondRemovedLanguage);
console.log("Array after second shift:", languages);

// Demonstrate what happens with an empty array
let emptyArray = [];
let result = emptyArray.shift();
console.log("Shifting from an empty array:", result);
console.log("Empty array remains:", emptyArray);

Agora, execute o script para ver os resultados:

node ~/project/array-shift.js

Exemplo de saída:

Original array: [ 'JavaScript', 'Python', 'Java', 'C++', 'Ruby' ]
Removed language: JavaScript
Array after shift: [ 'Python', 'Java', 'C++', 'Ruby' ]
Second removed language: Python
Array after second shift: [ 'Java', 'C++', 'Ruby' ]
Shifting from an empty array: undefined
Empty array remains: []

Pontos-chave sobre shift():

• Remove o primeiro elemento de um array
• Modifica o array original
• Retorna o elemento removido
• Retorna undefined se o array estiver vazio
• Reduz o comprimento do array em 1

Ordenar e Inverter Elementos de um Array

Nesta etapa, você aprenderá como usar os métodos sort() e reverse() para manipular elementos de array em JavaScript. Esses métodos fornecem maneiras simples de organizar e reordenar o conteúdo de um array.

Crie um novo arquivo chamado array-sort-reverse.js no diretório ~/project e adicione o seguinte código:

// Create arrays for sorting demonstration
let numbers = [5, 2, 9, 1, 7];
let fruits = ["banana", "apple", "cherry", "date"];

// Default sorting (lexicographic for strings, ascending for numbers)
console.log("Original numbers:", numbers);
numbers.sort();
console.log("Default sort:", numbers);

// Numeric sorting requires a comparison function
numbers = [5, 2, 9, 1, 7];
numbers.sort((a, b) => a - b);
console.log("Numeric sort:", numbers);

// Reverse sorting
console.log("\nOriginal fruits:", fruits);
fruits.sort().reverse();
console.log("Sorted and reversed:", fruits);

// Reverse an array without sorting
let colors = ["red", "green", "blue", "yellow"];
console.log("\nOriginal colors:", colors);
colors.reverse();
console.log("Reversed colors:", colors);

Agora, execute o script para ver os resultados:

node ~/project/array-sort-reverse.js

Exemplo de saída:

Original numbers: [ 5, 2, 9, 1, 7 ]
Default sort: [ 1, 2, 5, 7, 9 ]
Numeric sort: [ 1, 2, 5, 7, 9 ]

Original fruits: [ 'banana', 'apple', 'cherry', 'date' ]
Sorted and reversed: [ 'date', 'cherry', 'banana', 'apple' ]

Original colors: [ 'red', 'green', 'blue', 'yellow' ]
Reversed colors: [ 'yellow', 'blue', 'green', 'red' ]

Pontos-chave sobre sort() e reverse():

• sort() modifica o array original
• O sort() padrão converte elementos em strings e os ordena lexicograficamente
• Use uma função de comparação para ordenação numérica ou personalizada
• reverse() inverte a ordem dos elementos no array
• Ambos os métodos funcionam in-place, alterando o array original

Transformar e Analisar Arrays

Nesta etapa, você explorará métodos de array poderosos como map(), filter() e reduce() para transformar e analisar elementos de array em JavaScript. Esses métodos fornecem maneiras elegantes de manipular e extrair informações de arrays.

Crie um novo arquivo chamado array-transform.js no diretório ~/project e adicione o seguinte código:

// Sample array of student scores
const scores = [85, 92, 78, 65, 90, 55, 88];

// Use map() to create a new array with modified values
const adjustedScores = scores.map((score) => score + 5);
console.log("Original scores:", scores);
console.log("Adjusted scores:", adjustedScores);

// Use filter() to create an array of passing scores (above 70)
const passingScores = scores.filter((score) => score >= 70);
console.log("Passing scores:", passingScores);

// Use reduce() to calculate the total sum of scores
const totalScore = scores.reduce((sum, score) => sum + score, 0);
const averageScore = totalScore / scores.length;
console.log("Total score:", totalScore);
console.log("Average score:", averageScore.toFixed(2));

// Combine methods: find average of passing scores
const averagePassingScore =
  passingScores.reduce((sum, score) => sum + score, 0) / passingScores.length;
console.log("Average passing score:", averagePassingScore.toFixed(2));

// Transform an array of names
const names = ["alice", "bob", "charlie"];
const capitalizedNames = names.map(
  (name) => name.charAt(0).toUpperCase() + name.slice(1)
);
console.log("Original names:", names);
console.log("Capitalized names:", capitalizedNames);

Agora, execute o script para ver os resultados:

node ~/project/array-transform.js

Exemplo de saída:

Original scores: [ 85, 92, 78, 65, 90, 55, 88 ]
Adjusted scores: [ 90, 97, 83, 70, 95, 60, 93 ]
Passing scores: [ 85, 92, 78, 90, 88 ]
Total score: 553
Average score: 79.00
Average passing score: 86.60
Original names: [ 'alice', 'bob', 'charlie' ]
Capitalized names: [ 'Alice', 'Bob', 'Charlie' ]

Pontos-chave sobre métodos de transformação de array:

• map(): Cria um novo array transformando cada elemento
• filter(): Cria um novo array com elementos que passam em um teste
• reduce(): Reduz o array a um único valor através de uma função de callback
• Esses métodos não modificam o array original
• Podem ser encadeados para transformações complexas

Resumo

Neste laboratório, os participantes exploraram várias técnicas de manipulação de arrays JavaScript usando métodos embutidos. O laboratório focou em aprender como fatiar (slice) elementos de array usando o método slice(), que permite extrair porções específicas de um array sem modificar o array original. Os participantes praticaram a criação de novos arrays selecionando elementos usando diferentes intervalos de índices, incluindo índices positivos e negativos.

O laboratório também introduziu métodos como unshift() para adicionar elementos ao início de um array, shift() para remover o primeiro elemento, e técnicas para ordenar e inverter elementos de array. Através de exercícios práticos de codificação, os alunos ganharam experiência prática na transformação e análise de arrays, compreendendo como esses métodos podem modificar e extrair dados de forma eficiente de estruturas de array em JavaScript.