T12_LM3: Arrays (2013-2014)

JavaScript: Arrays
Carlos Santos

LabMM 3 - NTC - DeCA - UA

Aula 12, 24-10-2013

Lembram-se do Nelo e da Idália?

“Resmas de gajas”

Se o Nelo tiver que armazenar o nome da esposa?
var esposa = “Idália”;!
!

• Limitações:
• uma variável só permite armazenar uma unidade de informação;

• por unidade de informação entende-se, um conjunto de dados que, por si
só, constituem uma unidade lógica. Por exemplo:

• “Herman José” é uma string cujo conteúdo pode ser considerado uma
unidade de informação;

• “Herman José, Nilton, Nuno Markl, Bruno Nogueira” também é uma
string mas o seu conteúdo não é uma unidade de informação.

Como é que o Nelo pode armazenar o nome das
resmas de gajas?
var gaja1 = “Asdrubal”;!
var gaja2 = “Porfírio”;!
...!
var gajaN = “Zacarias”; // Não é uma solução adequada!!
• Problemas com esta solução:
• o acesso sistemático à informação pode ser muito complexo;

• adicionar e/ou eliminar elementos implica alterações na própria estrutura
de dados do algoritmo;

• por vezes, esta solução pode parecer a mais simples mas, na maioria dos
casos, acaba por implicar problemas complexos.

Arrays em Javascript
• Um array é uma estrutura de dados complexa onde podemos armazenar
múltiplas unidades de informação de um modo lógico e acessível.
• um array é identiﬁcado por um nome/identiﬁcador com características
semelhantes às de uma variável;

• cada unidade de informação, um elemento, é armazenada num espaço
próprio, acessível através de um índice, que indica a respetiva posição no
array;

• os elementos podem ser de qualquer tipo de dados, inclusivamente tipos
de dados complexos;

• o número de elementos de um array é gerido dinamicamente, permitindo
aumentar ou diminuir a sua capacidade durante a execução do algoritmo.

Arrays: estrutura
Identiﬁcador

meuArray
0

Índice

“nome”

1

4324

2

1.54324

3

false

Elementos

Arrays: operações base: declaração
• Declaração de um array vazio (sem elementos)

• var nomeArray = new Array();!
• var nomeArray = [];!
• var nomeArray = new Array(5); //declara um array
inicialmente dimensionado para 5 elementos!
• Declaração de um array com elementos iniciais
• var arrayLetras = new Array(“a”, ”b”, ”c”);!

“a”

5

• var arrayNumeros = [5, 23, 13, 12];

“b”

23

“c”

13
12

Arrays: operações base: escrita
• Escrita

• nomeArray[índice] = valor;!
• Exemplos
• arrayLetras[1] = “x”;!

“a”

!

“x”

!

“c”

• arrayLetras[3] = “d”;

“a”
“x”
“c”
“d”

Arrays: operações base: escrita
• Exemplos
• arrayLetras[5] = “z”;

“a”
“x”
“c”
“d”
undefined

“z”

Arrays: operações base: leitura
• Escrita

• var elemento = nomeArray[índice];!
• Exemplos
• var letraEscolhida = arrayLetras[1]; //??!
• alert(arrayLetras[0]); //??!
• arrayLetras[1] = arrayLetras[2]; //??

“a”
“x”
“c”
“d”
undefined

“z”

De regresso às resmas de gajas do Nelo
• Criar um array para ajudar o Nelo a guardar o nome das gajas atuais:
Asdrubal, Porfirio e Zacarias:

var gajasNelo = new Array(“Asdrubal”,“Porfirio”,“Zacarias”);!
0

“Porfirio”

2

!

“Asdrubal”

1

!

“Zacarias”

• O Nelo chateou-se com o Asdrubal e arranjou logo o “Jair” para o substituir.
Pelo meio ainda ficou com o “Marcão”:

gajasNelo[0] = “Jair”;!
gajasNelo[3] = “Marcão”;

0

“Jair”

1

“Porfirio”

2

“Zacarias”

3

“Marcão”

De volta às resmas de gajas do Nelo
• O Nelo é muito esquecido e por isso temos de gerar uma mensagem de
alerta que diga:

• “Nelo, mulher, as tuas gajas são: ..., ..., ..., ...”
!
var msg = “Nelo, mulher, as tuas gajas são: “;!
msg = msg + gajasNelo[0] + “, “;!

0

“Jair”


1

“Porﬁrio”


2

“Zacarias”

msg = msg + gajasNelo[3];!

3

“Marcão”

alert (msg); //??!

Sistematizar o acesso a um array
msg = msg + gajasNelo[3];!
alert (msg); //??!

!
// Versão com ciclo for!
for (cont = 0; cont <=3; cont++) {!
msg = msg + gajasNelo[cont] + “, “;!
}!
alert (msg); // Será que o resultado final é exatamente igual?

Estrutura de repetição: for-in
variável que no decorrer da
execução do ciclo vai tomar
todos os valores dos índices
do objeto

array que se pretende iterar
todos os elementos

for ( index in nomeArray )!
{!
// código a executar!
}!

Estrutura de repetição: for-in (exemplo)
for (cont = 0; cont <= gajasNelo.length - 1; cont++) {!
}!
alert (msg);!
!

// versão com for-in!
var gajasNelo = new Array("Jair", "Marcolino", "Marco");!
for (var indexGaja in gajasNelo) {!
msg = msg + gajasNelo[indexGaja] + ", ";!
}!
alert (msg);

Informação e métodos úteis num Array()
• Quantos elementos tem o array neste momento?

• Como adicionar um elemento no ﬁnal de um array?

• Como adicionar um elemento no início de um array?

• Como apagar um elemento do array e não deixar um espaço vazio?

• ...

Objetos
no dia-a-dia
Um objeto é uma “coisa”
deﬁnida por um conjunto de:
propriedades
- modelo

- espaçoDeArmazenamento

!
métodos/funções
- ligar(nr. telefone)

- play(album)

Objetos em programação (versão light)
• são também uma “coisa” definida por um conjunto de propriedades e
métodos que podem ser reutilizados livremente na execução de um
programa.

• as características de um objeto são definidas pela sua classe, que podem
ser:

• built-in

• user defined

• a instanciação de um novo objeto é conseguida através da invocação do
operador new.

Operador new
• Instanciação de um array

• var nomeArray = new Array();

classe Array()

objeto nomeArray

!

!

propriedades Array

new

propriedades Array

!

!

métodos Array

métodos Array

JavaScript: objeto Array: propriedades
• length: devolve o número atual de elementos de um array

// Exemplo: Versão alterada com ciclo for!
for (cont = 0; cont <= gajasNelo.length - 1; cont++) {!
}!
alert (msg);

0

“Jair”

1

“Porﬁrio”

2

“Zacarias”

3

“Marcão”

gajasNelo.length -> 4

JavaScript: objeto Array: métodos
• Os mais comuns... mas existem mais!
Método
concat()
join()
pop()
push()
reverse()

Descrição
Joins two or more arrays, and returns a copy of the joined arrays
Joins all elements of an array into a string
Removes the last element of an array, and returns that element
Adds new elements to the end of an array, and returns the new length
Reverses the order of the elements in an array

shift()

Removes the ﬁrst element of an array, and returns that element

slice()

Selects a part of an array, and returns the new array

sort()

Sorts the elements of an array

splice

Adds/Removes elements from an array

toString()
unshift()

Converts an array to a string, and returns the result
Adds new elements to the beginning of an array, and returns the new length
http://www.w3schools.com/jsref/jsref_obj_array.asp

Array: métodos: concat()
var parents = ["Jani", "Tove"];!
var children = ["Cecilie", "Lone"];!
var family = parents.concat(children);!
document.write(family);!
// ??!
!

var brothers = ["Stale", "Kai Jim", "Borge"];!
var family = parents.concat(brothers, children);!
// ??

Os exemplos desta secção são retirados do w3schools

Array: métodos: concat()
var family = parents.concat(children);!
// Jani,Tove,Cecilie,Lone!
!

var brothers = ["Stale", "Kai Jim", "Borge"];!
var family = parents.concat(brothers, children);!
// Jani,Tove,Stale,Kai Jim,Borge,Cecilie,Lone

Array: métodos: join()
var fruits = ["Banana", "Orange", "Apple", "Mango"];!
document.write(fruits.join() + " ");!
document.write(fruits.join("+") + " ");!
document.write(fruits.join(" and "));!
!

// ??!
// ??!
// ??

Array: métodos: join()
document.write(fruits.join() + " ");!
document.write(fruits.join("+") + " ");!
document.write(fruits.join(" and "));!
!

// Banana,Orange,Apple,Mango!
// Banana+Orange+Apple+Mango!
// Banana and Orange and Apple and Mango

Array: métodos: pop()
document.write(fruits.pop() + " ");!
document.write(fruits + " ");!
document.write(fruits);!
!

// ??!
// ??!
// ??!
// ??

Array: métodos: pop()
!

// Mango!
// Banana,Orange,Apple!
// Apple!
// Banana,Orange

Array: métodos: push()
document.write(fruits.push("Kiwi") + " ");!
document.write(fruits.push("Lemon","Pineapple")+" ");!
!

// ??!
// ??!
// ??

Array: métodos: push()
document.write(fruits.push("Kiwi") + " ");!
document.write(fruits.push("Lemon","Pineapple")+" ");!
!

// 5!
// 7!
// Banana,Orange,Apple,Mango,Kiwi,Lemon,Pineapple

Array: métodos: reverse()
document.write(fruits.reverse());!
!

// ??

Array: métodos: reverse()
document.write(fruits.reverse());!
!

// Mango,Apple,Orange,Banana

Array: métodos: shift()
document.write(fruits.shift() + " ");!
!

// ??!
// ??!
// ??!
// ??

Array: métodos: shift()
!

// Banana!
// Orange,Apple,Mango!
// Orange!
// Apple,Mango!

T12_LM3: Arrays (2013-2014)

Mais conteúdo relacionado

Mais procurados (15)

Semelhante a T12_LM3: Arrays (2013-2014) (20)

Mais de Carlos Santos (20)

T12_LM3: Arrays (2013-2014)