O documento descreve operações e métodos relacionados a arrays em JavaScript. Discute como acessar e modificar elementos de arrays, como usar estruturas de repetição como for e for-in para iterar sobre arrays, e demonstra vários métodos úteis de arrays como concat(), join(), pop(), push(), reverse(), shift() e seus usos.

1. JavaScript: Objecto Array() e arrays^n
Carlos Santos
LabMM 3 - NTC - DeCA - UA
Aula 12, 26-10-2012

2. Arrays: operações base: leitura
• Escrita
• var elemento = nomeArray[índice];
• Exemplos
• var letraEscolhida = arrayLetras[1]; //?? “a”
• alert(arrayLetras[0]); //?? “x”
“c”
• arrayLetras[1] = arrayLetras[2]; //??
“d”
undefined
“z”

3. 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 “Asdrubal”
1 “Porfirio”
2 “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”;
0 “Jair”
gajasNelo[3] = “Marcão”; 1 “Porfirio”
2 “Zacarias”
3 “Marcão”

4. 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”
msg = msg + gajasNelo[1] + “, “; 1 “Porfirio”
msg = msg + gajasNelo[2] + “, “; 2 “Zacarias”
msg = msg + gajasNelo[3]; 3 “Marcão”
alert (msg); //??

5. Sistematizar o acesso a um array
var msg = “Nelo, mulher, as tuas gajas são: “;
msg = msg + gajasNelo[0] + “, “;
msg = msg + gajasNelo[1] + “, “;
msg = msg + gajasNelo[2] + “, “;
msg = msg + gajasNelo[3];
alert (msg); //??
// Versão com ciclo for
var msg = “Nelo, mulher, as tuas gajas são: “;
for (cont = 0; cont <=3; cont++) {
msg = msg + gajasNelo[cont] + “, “;
}
alert (msg); // Será que o resultado final é exatamente igual?

6. 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
}

7. Estrutura de repetição: for-in (exemplo)
var msg = “Nelo, mulher, as tuas gajas são: “;
for (cont = 0; cont <= gajasNelo.length - 1; cont++) {
msg = msg + gajasNelo[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);

8. Informação e métodos úteis num Array()
• Quantos elementos tem o array neste momento?
• Como adicionar um elemento no final 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?
• ...

9. Objetos
no dia-a-dia
Um objeto é uma “coisa”
definida por um conjunto de:
propriedades
- modelo
- espaçoDeArmazenamento
métodos/funções
- ligar(nr. telefone)
- play(album)

10. 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.

11. 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

12. JavaScript: objeto Array: propriedades
• length: devolve o número atual de elementos de um array
// Exemplo: Versão alterada com ciclo for
var msg = “Nelo, mulher, as tuas gajas são: “;
for (cont = 0; cont <= gajasNelo.length - 1; cont++) {
msg = msg + gajasNelo[cont] + “, “;
}
alert (msg);
0 “Jair”
1 “Porfirio”
gajasNelo.length -> 4
2 “Zacarias”
3 “Marcão”

13. JavaScript: objeto Array: métodos
• Os mais comuns... mas existem mais!
Método Descrição
concat() Joins two or more arrays, and returns a copy of the joined arrays
join() Joins all elements of an array into a string
pop() Removes the last element of an array, and returns that element
push() Adds new elements to the end of an array, and returns the new length
reverse() Reverses the order of the elements in an array
shift() Removes the first 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() Converts an array to a string, and returns the result
unshift() Adds new elements to the beginning of an array, and returns the new length
http://www.w3schools.com/jsref/jsref_obj_array.asp

14. Array: métodos: concat()
var parents = ["Jani", "Tove"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(children);
document.write(family);
// ??
var parents = ["Jani", "Tove"];
var brothers = ["Stale", "Kai Jim", "Borge"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(brothers, children);
document.write(family);
// ??
Os exemplos desta secção são retirados do w3schools

15. Array: métodos: concat()
var parents = ["Jani", "Tove"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(children);
document.write(family);
// Jani,Tove,Cecilie,Lone
var parents = ["Jani", "Tove"];
var brothers = ["Stale", "Kai Jim", "Borge"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(brothers, children);
document.write(family);
// Jani,Tove,Stale,Kai Jim,Borge,Cecilie,Lone

16. Array: métodos: join()
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.join() + "<br />");
document.write(fruits.join("+") + "<br />");
document.write(fruits.join(" and "));
// ??
// ??
// ??

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

18. Array: métodos: pop()
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.pop() + "<br />");
document.write(fruits + "<br />");
document.write(fruits.pop() + "<br />");
document.write(fruits);
// ??
// ??
// ??
// ??

19. Array: métodos: pop()
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.pop() + "<br />");
document.write(fruits + "<br />");
document.write(fruits.pop() + "<br />");
document.write(fruits);
// Mango
// Banana,Orange,Apple
// Apple
// Banana,Orange

20. Array: métodos: push()
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.push("Kiwi") + "<br />");
document.write(fruits.push("Lemon","Pineapple")+"<br />");
document.write(fruits);
// ??
// ??
// ??

21. Array: métodos: push()
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.push("Kiwi") + "<br />");
document.write(fruits.push("Lemon","Pineapple")+"<br />");
document.write(fruits);
// 5
// 7
// Banana,Orange,Apple,Mango,Kiwi,Lemon,Pineapple

22. Array: métodos: reverse()
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.reverse());
// ??

23. Array: métodos: reverse()
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.reverse());
// Mango,Apple,Orange,Banana

24. Array: métodos: shift()
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.shift() + "<br />");
document.write(fruits + "<br />");
document.write(fruits.shift() + "<br />");
document.write(fruits);
// ??
// ??
// ??
// ??

25. Array: métodos: shift()
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.shift() + "<br />");
document.write(fruits + "<br />");
document.write(fruits.shift() + "<br />");
document.write(fruits);
// Banana
// Orange,Apple,Mango
// Orange
// Apple,Mango