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
undefinedse 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 elementofilter(): Cria um novo array com elementos que passam em um testereduce(): 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.
