Instituto Federal de Mato Grosso do SulAgosto/2022

IFMS marca

04. Arrays

Algoritmos 2

Prof. Rodrigo Duran

Nesta aula vamos:


  • Aprender a manipular arrays e seus métodos

    Vamos observar como variáveis podem armazenar mais de um valor (elemento) utilizando arrays e como manipular esses arrays utilizando tanto índices quanto métodos dos arrays em JavaScript.

Variáveis: só pode haver um?

Etiquetals

Uma variável Um local nomeado para um único valor na memória do computador só pode armazenar um valor (em um dado momento)... certo?


Declarando uma variável inteira e inicializando com 0
let numero = 0

Declarando uma variável String e inicializando-a
let name = "Algoritmos 2"

Alterando o valor da variável
numero = 3
console.log(numero)
Coleções

Coleções

Entretanto, em várias situações é desejável que o computador manipule informações que são relacionadas entre si. Por exemplo:

  • Medições de temperatura no decorrer do ano
  • Variação populacional de uma cidade durante uma década
  • Lista de compras, listas de tarefas
  • Suas notas na disciplina de Algoritmos 2.

Para armazenar esse tipo de informação, nós utilizamos coleções. Uma coleção pode conter, por exemplo, todos os seus amigos no WhatsApp. Um valor armazenado em uma coleção é chamado de elemento. Um elemento pode ser um único contato na sua lista de contatos, por exemplo.

Array

Criando Arrays


Um dos tipos de coleções em JavaScript é o arrayuma coleção de determinado tamanho, incluindo tamanho 0 (sem elementos), que referencia a ordem de seus elementos por um índice.. Para criar um array basta declarar uma variável inicializando-a com os valores entre [ ]. Cada elemento dentro do array é separado por virgulas.

Declarando um array de inteiros
let MeusNumeros = [1, 2 , 3, 4]

Declarando um array de strings
let Contatinhos = ["José", "Vitor", "André", "Fabio"]

Declarando um array vazio
let Vazio = []

Imprimindo Arrays


Você pode imprimir uma variável array

let frutas = ["Banana", "Laranja", "Maçã", "Manga"]
console.log(frutas)
["Banana", "Laranja", "Maçã", "Manga"]

Ou imprimir cada um de seus elementos

console.log(frutas[1])
Laranja
console.log(frutas[3])
Manga
console.log(frutas[4])
Undefined

Manipulando Arrays


Os elementos de um array podem ser manipulados como uma variável

let numeros = [1, 3, 5 ,7, 9]
console.log(numeros[0])
1

console.log(numeros[0]+numeros[1])
4

console.log(numeros[2]+ 20)
25

Visualizando Arrays


QUIZ!

O array está corretamente criado?

let coisas = ["Meias" "Tênis" "Rolha"]
console.log(coisas)

QUIZ!

O array está corretamente criado?

let impar = {1, 3, 5, 7, 9}
console.log(impar)

QUIZ!

O que será impresso no console pelo programa abaixo?

let pares = [2, 8, 0, 4, 6, 10]
console.log(pares)

  1. pares
  2. 2
  3. []
  4. 10
  5. 2, 8, 0, 4, 6, 10

QUIZ!

O que será impresso no console pelo programa abaixo?

let pares = [2, 8, 0, -1, 6, 10]
let x = pares[2+2]
console.log(x)

  1. Undefined
  2. 8
  3. 6
  4. -1
  5. 0

Manipulando Arrays


Você pode alterar, adicionar ou remover elementos de um array...

let contatinhos = ["José", "Vitor", "André", "Fabio"]
contatinhos[1] = "Paulo"
["José", "Paulo", "André", "Fabio"]

contatinhos.push("Michael")
["José", "Paulo", "André", "Fabio", "Michael"]

console.log(contatinhos.pop())
Michael

console.log(contatinhos.shift())
José

console.log(contatinhos)
["Paulo", "André", "Fabio"]

Visualizando Arrays


QUIZ!

O que será impresso no console pelo programa abaixo?

let avengers = ["Captain America", "Hulk", "Thor", "Black Widow", "Hawkeye", "Ironman"]
avengers[3] = "Scarlet Witch"
console.log(avengers)

  1. ["Captain America", "Hulk", 3, "Black Widow", "Hawkeye", "Ironman"]
  2. ["Captain America", "Hulk", "Scarlet Witch", "Black Widow", "Hawkeye", "Ironman"]
  3. ["Captain America", "Hulk", "Thor", "Scarlet Witch", "Hawkeye", "Ironman"]
  4. ["Captain America", "Hulk", "Thor", 3, "Hawkeye", "Ironman"]

QUIZ!

O que será impresso no console pelo programa abaixo?

let avengers = ["Captain America", "Hulk", "Thor", "Black Widow", "Hawkeye", "Ironman"]
console.log(avengers.pop())

  1. ["Hulk", "Thor", "Black Widow", "Hawkeye", "Ironman"]
  2. ["Captain America", "Hulk", "Thor", "Black Widow", "Hawkeye"]
  3. ["Captain America", "Thor", "Black Widow", "Hawkeye", "Ironman"]
  4. ["Hulk", "Thor", "Black Widow", "Hawkeye"]

QUIZ!

O que será impresso no console pelo programa abaixo?

let avengers = ["Captain America", "Hulk", "Thor", "Black Widow", "Hawkeye", "Ironman"]
avengers.push("Spiderman")
console.log(avengers)

  1. ["Spiderman", "Captain America", "Hulk", "Thor", "Black Widow", "Hawkeye", "Ironman"]
  2. ["Captain America", "Hulk", "Thor", "Black Widow", "Hawkeye", "Ironman", "Spiderman"]
  3. ["Captain America", "Spiderman", "Hulk", "Thor", "Black Widow", "Hawkeye", "Ironman"]
  4. ["Captain America", "Hulk", "Thor", "Black Widow", "Hawkeye", "Spiderman", "Ironman"]

QUIZ!

O que será impresso no console pelo programa abaixo?

let avengers = ["Captain America", "Hulk", "Thor", "Black Widow", "Hawkeye", "Ironman"]
avengers.push("Spiderman")
avengers.shift()
avengers.push("Vision")
avengers.pop()
console.log(avengers)

  1. ["Spiderman", "Captain America", "Hulk", "Thor", "Black Widow", "Hawkeye"]
  2. ["Hulk", "Thor", "Black Widow", "Hawkeye", "Ironman", "Vision"]
  3. ["Hulk", "Thor", "Black Widow", "Hawkeye", "Ironman", "Spiderman", "Vision"]
  4. ["Hulk", "Thor", "Black Widow", "Hawkeye", "Ironman", "Spiderman"]

Propriedades e funcões úteis


Tamanho de um array

let legumes = ["cebola", "alho", "quiabo"]
console.log(legumes.length)
3

Inidice de um determinado elemento

let indice = legumes.indexOf("alho")
console.log(indice)
1
let indice2 = legumes.indexOf("cenoura")
console.log(indice2)
-1

Removendo um elemento de uma posição específica

O primeiro parâmentro diz qual posicão do array será removida. O segundo parâmetro diz quantos elementos serão removidos
legumes.splice(1,1)
console.log(legumes)
["cebola", "quiabo"]

Repartindo um array

O parâmetro diz a partir de onde o novo array começa a ser copiado. O array original permance inalterado.
let legumes = ["cebola", "alho", "quiabo", "cenoura"]
refogar = legumes.slice(2)
console.log(legumes, refogar)
["cebola", "alho", "quiabo", "cenoura"]
["quiabo", "cenoura"]

QUIZ!

O que será impresso no console pelo programa abaixo?

let avengers = ["Captain America", "Hulk", "Thor", "Black Widow", "Hawkeye", "Ironman"]
avengers.splice(1,2)
console.log(avengers)

  1. ["Captain America", "Hulk", "Hawkeye", "Ironman"]
  2. ["Thor", "Black Widow", "Hawkeye", "Ironman"]
  3. ["Captain America", "Black Widow", "Hawkeye", "Ironman"]
  4. ["Captain America", "Thor", "Black Widow", "Hawkeye", "Ironman"]

QUIZ!

O que será impresso no console pelo programa abaixo?

let avengers = ["Captain America", "Hulk", "Thor", "Black Widow", "Hawkeye", "Ironman"]
let westcoastavengers = avengers.slice(3)
console.log(westcoastavengers)

  1. ["Black Widow", "Hawkeye", "Ironman"]
  2. ["Hawkeye", "Ironman"]
  3. ["Thor", "Black Widow", "Hawkeye", "Ironman"]

Propriedades e funcões úteis


Criando um array a partir de uma string

O parâmetro diz qual é a string (caracter) que será usado para subdividir a string original
let pacote = "Rodrigo|IFMS|Londrina|PR"
let informacao = pacote.split("|")
console.log(informacao)
["Rodrigo", "IFMS", "Londrina", "PR"]

Copiando uma variável array para outra variável

let numeros = [1, 2, 3, 5]
nnum = [...numeros]
console.log(nnum)
[1, 2, 3, 5]

Note que uma simples atribuição não copia uma variável array para outra variável!

nnum = numeros
numeros.push(6)
console.log(numeros, nnum)
[1, 2, 3, 5, 6] [1, 2, 3, 5, 6]

Acessando o primeiro elemento do Array

O índice dos arrays sempre começa com 0 e não 1!
let frutas = ["abacaxi", "morango", "banana", "kiwi"]
primeiro = frutas[0]
console.log(primeiro)
abacaxi

Acessando o último elemento do Array

Se o array tem tamanho X, seu último elemento estará no índice X-1
let frutas = ["abacaxi", "morango", "banana", "kiwi"]
ultimo = frutas[frutas.length-1]
console.log(ultimo)
kiwi

Concatenando (merge) dois arrays

let frutas = ["abacaxi", "morango", "banana", "kiwi"]
let legumes = ["cebola", "alho", "aipo"]
let compras = frutas.concat(legumes)
console.log(compras)
["abacaxi", "morango", "banana", "kiwi", "cebola", "alho", "aipo"]

QUIZ!

O que será impresso no console pelo programa abaixo?

let mxyzptlk = "msgpisegredopialgpi2"
let decode = mxyzptlk.split("pi")
console.log(decode)

  1. "msg pi segredo pi alg pi 2"
  2. "msg segredo alg 2"
  3. [msg, pi, segredo, pi, alg, pi, 2]
  4. [msg, segredo, alg, 2]

QUIZ!

Substitua o ? pelo código correspondente para copiar o array chave no array copia

let chave = [12,37,1578,1,-3]
let copia = ?
console.log(copia)

Template: Procurar e remover


Templates são planos (ou estereótipos) que serão frequentemente utilizados para solucionar um determinado problema em um determinado contexto.

No caso do template de procurar e remover temos como um problema remover um item qualquer de uma coleção espera-se como resultado o array sem o item desejado ou uma mensagem de erro caso o item não exista dentro do array.

Plano procurar e remover
Martin Fowler

“ Qualquer tolo pode escrever um código compreensível para um computador. Bons programadores escrevem códigos que humanos possam entende-los. ”

Martin Fowler