Aula4 Arrays Com Solucao

Arrays em JavaScript
Disciplina de Programação II
Sistemas e Mídias Digitais
Prof. Henrique Pequeno
Monitor: Dante Araújo
Arrays
• Um array(vetor) é uma lista de dados ( variáveis).
• Essas variáveis compartilham o mesmo nome.
• Código mais curto
• Maior legibilidade
• Facilidade de atualização
Quando utilizar?
• Se temos um número pequeno de variáveis, de mesmo tipo, podemos
utilizar a declaração individual de variáveis. Porém, se em um
programa há um grande número de variáveis, isso pode requerer o
uso de arrays para um melhor gerenciamento destas variáveis.
Criando arrays
• Cada item de um array é denominado um elemento
• Cada elemento é referenciado segundo um índice
• Em JS, o primeiro índice de um array é zero.
• Não é necessário declarar à priori o tamanho de um array
• let x = [];
• Declaração de um array
• Ex.:
var x = []; // Declare the array
function setup() {
createCanvas(200, 200);
x[0] = 12; // Assign the first value
x[1] = 2; // Assign the second value
}
Declarando e atribuindo valores a um array
var x = [12, 2];
function setup() {
}
Obs1.: Evite criar um array dentro de uma função draw(), senão ficará sendo criado
um array a cada recarregamento de frame
Obs2.: Em JS um mesmo array pode conter dados de tipos heterogêneos (boolean,
number, string, etc). É possível mesclar esses tipos.
Ex.: var y = ["cat", 10, false, 50];
Estrutura de um array
Funcionamento de um array
var x = [-20, 20];
function setup() {
noStroke();
}
function draw() {
background(0);
x[0] += 0.5; // Increase the first element
x[1] += 0.5; // Increase the second element
arc(x[0], 30, 40, 40, 0.52, 5.76);
arc(x[1], 90, 40, 40, 0.52, 5.76);
}
Propriedade length de arrays
var x = [12, 20]; // Declare and assign the array
print(x.length); // Prints 2 to the console
var y = ["cat", 10, false, 50]; // Declare and assign the array
print(y.length); // Prints 4 to the console
var z = []; // Declare an empty array

print(z.length); // Prints 0 to the console
z[0] = 20; // Assign an element to the array
print(z.length); // Prints 1 to the console
z[1] = 4; // Assign an element to the array
print(z.length); // Prints 2 to the console”
Repetições com arrays
var gray = [];
function setup() {
for (var i = 0; i < width; i++) {
gray[i] = random(0, 255);
}
}
function draw() {
background(204);
for (var i = 0; i < gray.length; i++) {
stroke(gray[i]);
line(i, 0, i, height);
}
}
Como acessar itens de um array?
var arr = [15, 40, 243, 53];
var firstItem = arr[0];
console.log(firstItem);
Obs.: se houver a tentativa de acessar um elemento inexistente, será

retornado o valor undefined
Exemplo1 – Uso de poucas variáveis
var x1 = -20;
var x2 = 20;
function setup() {
noStroke();
}
function draw() {
background(0);
x1 += 0.5;
x2 += 0.5;
arc(x1, 30, 40, 40, 0.52, 5.76);
arc(x2, 90, 40, 40, 0.52, 5.76);
}
Exemplo2 – Uso de muitas variáveis
var x1 = -10; background(0);
var x2 = 10; x1 += 0.5;
var x3 = 35; x2 += 0.5;
var x4 = 18; x3 += 0.5;
var x5 = 30; x4 += 0.5;
x5 += 0.5;
function setup() { arc(x1, 20, 20, 20, 0.52, 5.76);
createCanvas(240, 120); arc(x2, 40, 20, 20, 0.52, 5.76);
noStroke(); arc(x3, 60, 20, 20, 0.52, 5.76);
} arc(x4, 80, 20, 20, 0.52, 5.76);
arc(x5, 100, 20, 20, 0.52, 5.76);
function draw() { }
Arrays, e não variáveis isoladas
var x = []; function draw() {
function setup() { background(0);
createCanvas(240, 120); let y;
noStroke(); for (let j = 0; j < x.length; j++) {
fill(255, 200); x[j] += 0.5;
for (let i = 0; i < 3000; i++) { y = j * 0.4;
x[i] = random(-1000,240); arc(x[j], y, 12, 12, 0.52, 5.76);
} }
} }
Funções para manipular arrays: pop();
• pop(): remove e retorna o último elemento de um array
• Ex.:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The pop() Method</h2>
<p>pop() returns the element it removed:</p>
<p id="demo"></p>
<p id="vetor"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let removed = fruits.pop();
document.getElementById("demo").innerHTML = removed;
document.getElementById("vetor").innerHTML = fruits;
</script>
</body>
</html>
Exemplo pop()
let numbers = [1, 2, 3, 4, 5]; pop()
print("Elemento removido:", removido);
function setup() { print("Array após pop():", numbers);
createCanvas(400, 200); print("Array original:", numbers.length);
}
//imprimindo o tamanho original do array
print("Array original:", numbers.length); function draw() {
background(220);
// Usando a função pop() para remover o último // Desenhe algo na tela, se necessário.
elemento
}
function removeElemento(){
let removido = removeElemento();
return numbers.pop();
// Imprimindo o elemento removido e o array após
}
Funções para manipular arrays: push();
• push(): método que adiciona um novo item ao final de um array
• Ex.:
<!DOCTYPE html>
<html>
<body>
<h2>The push() Method</h2>
<p>push() adds new items to the end of an array:</p>
<p id="demo"></p>
<script>
fruits.push("Kiwi", "Lemon");
document.getElementById("demo").innerHTML = fruits;
</script>
</body>
</html>
Exemplo da função push em p5.js
let numbers = []; // Array vazio
function setup() {
noLoop();
// Adicionando números ao array usando push()

numbers.push(10);
numbers.push(20);
numbers.push(30);
// Imprimindo o array após adicionar os números

print("Array após push():", numbers);
}
function draw() {
background(220);
}
Exercício 1:
• Faça um programa, utilizando arrays, que quando clicar no canvas
será criada uma elipse. As elipses vão sendo empilhadas a cada
clique, e serão desempilhadas(removidas) quando a tecla de espaço
for pressionada.
• Dica: utilize os métodos array.pop(),array.push() e a função redraw()
Funções para manipular arrays: map();
• map(): submete todos os elementos do array a uma função, gerando um novo array, sem alterações no array original.
• Ex.:
<!DOCTYPE html>
<html>
<body>
<p>Multiply every element in the array with 10:</p>
<p id="demo"></p>
<script>
const numbers = [65, 44, 12, 4];
const newArr = numbers.map(myFunction);
document.getElementById("demo").innerHTML = newArr;
function myFunction(num) {
return num * 10;
}
</script>
</body>
</html>
Exercício Resolvido
• Construa um programa que calcule a raiz quadrada de todos os
elementos de um array. Utilize o método map();
Resolução
<!DOCTYPE html>
<html>
<body>
<p>The Array.map() method creates a new array from the results of calling a function for every element.</p>
<p id="demo"></p>
<script>
const numbers = [4, 9, 16, 25];
document.getElementById("demo").innerHTML = numbers.map(Math.sqrt);
</script>
</body>
</html>
Exercício 2:
Faça um programa em p5.js que, dado um vetor original contendo
diâmetros de elipses, duplique em um segundo vetor os valores de
cada elemento do vetor original. Desenhe no canvas as elipses de cada
vetor, as distinguindo pelas cores vermelha e azul. O background,
obviamente, deve ser branco 
Funções para manipular arrays: shift();
• shift():método que retorna e remove o primeiro elemento de um array.
• Sintaxe: array.shift()
Ex:
<!DOCTYPE html>
<html>
<body>
<h2>The shift() Method</h2>
<p>shift() returns the removed array element:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = fruits.shift();
</script>
</body>
</html>
Exercício 3
• Crie uma animação simples onde círculos são gerados(tamanhos e
cores aleatórias) na parte superior da tela e, gradualmente, deslocam-
se para baixo. Use um array para armazenar os círculos em
movimento, e a função shift() será usada para remover os círculos
que desaparecem da tela(ultrapassarem o limite do canvas).
• Obs.: utilize vetor de vetor (matriz) para armazenar as posições, o
diâmetro e a cor de cada círculo.
Funções para manipular arrays: unshift();
• unshift(): método para adicionar elemento(s) no início de um array.
• Ex.:
<!DOCTYPE html>
<html>
<body>
<h2>The unshift() Method</h2>
<p>unshift() adds new items to the beginning of an array:</p>
<p id="demo"></p>
<script>
fruits.unshift("Lemon", "Pineapple");
document.getElementById("demo").innerHTML = fruits;
</script>
</body>
</html>
Exercício 4
• Faça um programa que crie uma fila de atendimento. Logo, o primeiro
indivíduo a entrar na filha será o primeiro a ser atendido (deixar a
fila). Utilize a função shift() para reproduzir essa situação.
• Obs.: cada elemento na fila deve ser representado por um cubo.
Funções para manipular arrays: slice();
• slice():
• método que retorna elementos selecionados de um array, gerando um novo
array com esses elementos;
• preserva o array original.
• A seleção demandará o informe dos índices de início e fim referentes ao array
original. No entanto, o índice final é não inclusivo.
Funções para manipular arrays: slice();
• slice():
Ex.:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>slice()</h2>
<p>Array.slice() returns selected array elements as a new array:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);
document.getElementById("demo").innerHTML = citrus;
</script>
</body>
</html>
Exercício 5
• Dado que você possui uma matriz de informações de alunos, onde
cada elemento é um vetor com nome, idade e nota. Crie um
programa em p5.js que permita ao usuário definir uma faixa de
índices e exibir os alunos correspondentes a essa faixa utilizando a
função slice(). O usuário deve ser capaz de definir o índice de início e
o índice de fim para selecionar os alunos a serem exibidos. Utilize a
instrução prompt();
Funções para manipular arrays: splice();
• O método splice é uma função integrada em JavaScript que
permite modificar o conteúdo de um array, adicionando ou
removendo elementos em posições específicas.
• O método splice modifica o array original e também retorna
um novo array contendo os elementos removidos, se
houver. Se nenhum elemento for removido, o método
retornará um array vazio.
• Sintaxe:
• array.splice(inicio, quantidade, elemento1, elemento2, ...);
• Onde:
• array: O array original que você deseja modificar.
• inicio: O índice onde as operações de inserção ou remoção começarão.
• quantidade (opcional): O número de elementos a serem removidos a partir
do índice inicio. Se este parâmetro for omitido ou for maior que a
quantidade de elementos a serem removidos, todos os elementos a partir
do índice inicio até o final do array serão removidos.
• elemento1, elemento2, ... (opcional): Elementos que serão inseridos no
array a partir do índice inicio. Você pode especificar um ou mais elementos
para inserção.
• Exemplo1: Inserindo elementos em uma posição específica
let frutas = ["maçã", "banana", "uva"];
frutas.splice(1, 0, "laranja", "kiwi");
// O array frutas agora será ["maçã", "laranja", "kiwi", "banana", "uva"]
• Exemplo2: Removendo elementos a partir de uma posição

específica
let numeros = [1, 2, 3, 4, 5];
numeros.splice(2, 2);
// O array numeros agora será [1, 2, 5]
• Exemplo3: Substituindo elementos existentes

let cores = ["vermelho", "verde", "azul"];
cores.splice(1, 1, "amarelo");
// O array cores agora será ["vermelho", "amarelo", "azul"]
Pausa para meditação!!!
• Método indexOf()
• Usado para buscar o índice do primeiro elemento do array que corresponde
ao valor especificado como parâmetro.
• Ex.:
let listaDeConvidados = ["Alice", "Bob", "Carol", "David"];
let nomeExistente = "Bob";
let indiceExistente = listaDeConvidados.indexOf(nomeExistente);
Resultado: indiceExistente receberá o valor 1, pois esta é a posição do primeiro elemento
do vetor listaDeConvidados que atende ao valor presente em nomeExistente.
• Caso não encontre um valor no vetor, o método retornará o valor “-1”

• Desenvolva um programa que atue como um gerenciador
de uma lista de convidados. O programa deve permitir que
o usuário adicione um novo convidado à lista, remova um
convidado com base no nome e substitua o nome de um
convidado existente por um novo nome (edite). Utilize o
método splice() para realizar cada uma dessas operações.
Resolução
https://editor.p5js.org/henrique-
linen/sketches/s77QQDlez
Vetores multidimensionais(matrizes)
• Vetores (ou arrays) multidimensionais consistem em uma
estrutura de dados que permite armazenar informações em
múltiplas dimensões.
• São especialmente úteis para representar dados tabulares,
matrizes, tabelas e estruturas de dados complexas.
• Usos comuns:
• Tabelas de classificação em jogos.
• Matrizes para representar imagens.
• Dados tabulares em aplicações da web.
• Estruturas de dados complexas etc.
Vetores multidimensionais(matrizes)
• Declarando uma matriz 2x3 (2 linhas e 3 colunas)
let matriz = [[1, 2, 3],[4, 5, 6]];
• Acessando os elementos de uma matriz

• Ex.:
let valor = matriz[0][2]; // Acessa o elemento na primeira linha, terceira coluna (3)
• Iterando
• Ex.:
for (let i = 0; i < matriz.length; i++) {
for (let j = 0; j < matriz[i].length; j++) {
console.log(matriz[i][j]);
}
}
Exercício Resolvido:
Gerenciando uma Tabela de Notas
• Enunciado:
Suponha que você está criando um programa para gerenciar as notas de alunos em
uma escola. Crie um vetor multidimensional para armazenar as notas dos alunos.
• Algoritmo:
1. Declare um vetor multidimensional chamado notas que armazena as notas dos
alunos de uma turma. Cada aluno possui três notas.
2. Acesse e exiba as notas do primeiro aluno (primeira linha) e da segunda prova
(segunda coluna).
3. Utilize um loop para iterar sobre o vetor notas e exibir as notas de todos os alunos
da turma.
4. Permita ao usuário adicionar as notas de um novo aluno à turma. Use o método
push para inserir as notas no final do vetor.
5. Permita ao usuário remover as notas de um aluno da turma com base no índice do
aluno. Use o método splice para realizar a remoção.
Exercício 6
• Utilizando vetores multidimensionais(matrizes), faça um programa
que, dado uma matriz contendo o nome e a nota de alunos(as), possa
informar quem é o aluno(a) de maior nota.
Exercício 7
• Faça um programa que calcule a soma dos elementos de uma matriz.
A matriz pode ser de valores fixos ou informada pelo usuário.
Exercitando
let angles = [30, 10, 45, 35, 60, 38, 75, 67]; fill(gray);
function setup() { arc( width / 2, height / 2,diameter,
createCanvas(720, 400); diameter,
noStroke(); lastAngle,
noLoop(); // Run once and stop lastAngle + radians(angles[i])
} );
function draw() { lastAngle += radians(angles[i]);
background(100); }
pieChart(300, angles); }
}
function pieChart(diameter, data) {
let lastAngle = 0;
for (let i = 0; i < data.length; i++) {
let gray = map(i, 0, data.length, 0, 255);
Arrays como Strings
• Strings são usadas para representar texto ou sequências de
caracteres em JavaScript. Elas são uma parte fundamental
da linguagem e são amplamente utilizadas em
programação web para manipular texto, exibir informações
ao usuário e muito mais.
• Declarando uma string
let saudacao = 'Olá, mundo!';
let nome = "Alice";
• Concatenação de strings
let primeiroNome = "John";
let sobrenome = "Doe";
let nomeCompleto = primeiroNome + " " + sobrenome; // "John Doe"
Arrays como Strings
• Descobrindo o tamanho de uma string
let frase = "Isso é uma string!";
let tamanho = frase.length; // 18
• Acessando um carctere específico de uma string
let palavra = "JavaScript";
let primeiroCaractere = palavra[0]; // "J"
let quartoCaractere = palavra[3]; // "a"
Métodos de manipulação de strings
• toUpperCase(), toLowerCase(), slice(), split(), replace(), indexOf().
• Ex. toUpperCase() e toLowerCase():
let texto = "Exemplo de Texto";
let textoMaiusculo = texto.toUpperCase(); // "EXEMPLO DE TEXTO"
let textoMinusculo = texto.toLowerCase(); // "exemplo de texto”
• Ex. slice()
let frase = "Isso é uma frase de exemplo.";
let parte = frase.slice(5, 10); // "é uma"
Métodos de manipulação de strings
• split() - O método split() divide uma string em um array de substrings com base em um separador
especificado
• Ex.:
let lista = "maçã,banana,uva,morango";
let frutas = lista.split(","); // ["maçã", "banana", "uva", "morango"]
• replace() - O método replace() substitui parte de uma string por outra string.
• Ex.:
let texto = "Olá, mundo!";
let novoTexto = texto.replace("mundo", "amigo"); // "Olá, amigo!”
• indexOf() – retorna o índice da primeira ocorrência de uma substring em uma string. Retorna -1 se
a substring não for encontrada.
• Ex.:
let frase = "Esta é uma frase de exemplo.";
let indice = frase.indexOf("frase"); // 11
let naoEncontrado = frase.indexOf("banana"); // -1 (não encontrado)
• Crie um programa que exiba uma animação em que cada
elemento de um vetor multidimensional, é compost de uma
string e uma cor associada(RGB). O seu objetivo, portanto, é
criar uma tela de animação que exibirá, em um loop, cada
palavra da lista e a cor correspondente de fundo.
Resolução
let data = [
['I', [63, 184, 175]], function draw() {
['love', [127, 199, 175]], let currentIndex = frameCount % data.length;
['programming', [218, 216, 167]], let currentData = data[currentIndex];
['with', [255, 158, 157]], let currentWord = currentData[0];
['JavaScript', [255, 61, 127]] let currentColor = currentData[1];
];
background(currentColor);
function setup() { fill(255);
createCanvas(800, 300); textSize(45);
textAlign(CENTER, CENTER); text(currentWord, width / 2, height / 2);
frameRate(3); // using a lower frame rate to slow down the text }
}
Exercício 8
• Crie um programa que permita ao usuário inserir nomes em
um array e, em seguida, ordene esses nomes em ordem
alfabética. Por fim, exiba a lista de nomes ordenados.
Rastreando movimentos do mouse com
arrays
• Dois arrays para armazenarem, respectivamente, as coordenadas x e y
do mouse
• Novos valores são armazenados no início do array. Antes disto, cada
valor já armazenado é deslocado em uma posição p/ a direita no
array.
Exemplo
var num = 60; // Copy array values from back to front
var x = []; for (var i = num-1; i > 0; i--) {
var y = []; x[i] = x[i-1];
y[i] = y[i-1];
function setup() { }
createCanvas(240, 120); x[0] = mouseX; // Set the first element
noStroke(); y[0] = mouseY; // Set the first element
for (var i = 0; i < num; i++) { for (var i = 0; i < num; i++) {
x[i] = 0; fill(i * 4);
y[i] = 0; ellipse(x[i], y[i], 40, 40);
} }
} }
function draw() {
background(0);
Arrays de Objetos
Exemplo: bugs[i] = new JitterBug(x, y, r);
var bugs = []; }
function setup() { }
createCanvas(240, 120); function draw() {
background(204); for (var i = 0; i < bugs.length; i++) {
for (var i = 0; i < 33; i++) { bugs[i].move();
var x = random(width); bugs[i].display();
var y = random(height); }
var r = i + 2; }
Arrays de Objetos (cont.)
function JitterBug(tempX, tempY, this.y += random(-this.speed,
tempDiameter) { this.speed);
};
this.x = tempX;
this.y = tempY; this.display = function() {
this.diameter = tempDiameter; ellipse(this.x, this.y, this.diameter,
this.speed = 2.5; this.diameter);
};
this.move = function() {
this.x += random(-this.speed, }
this.speed);

Aula4 Arrays Com Solucao

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula4 Arrays Com Solucao

Enviado por

Direitos autorais:

Formatos disponíveis

Arrays em JavaScript

var z = []; // Declare an empty array

Obs.: se houver a tentativa de acessar um elemento inexistente, será

<p>pop() returns the element it removed:</p>

<p>push() adds new items to the end of an array:</p>

// Adicionando números ao array usando push()

// Imprimindo o array após adicionar os números

<p>Multiply every element in the array with 10:</p>

const numbers = [4, 9, 16, 25];

<p>unshift() adds new items to the beginning of an array:</p>

• Exemplo2: Removendo elementos a partir de uma posição

• Exemplo3: Substituindo elementos existentes

• Caso não encontre um valor no vetor, o método retornará o valor “-1”

• Acessando os elementos de uma matriz

Você também pode gostar