JAVASCRIPT

 

2. Objetos e Arrays

 

 

Diego Pessoa

OBJETOS

  • Javascript define um tipo especial de variável chamado Objeto.
  • Objetos não pertencem a classes explicitamente definidas.
  • Um objeto em Javascript é uma associação de múltiplos valores, organizados por nomes.
  • Tipo de dados especial que contém conjuntos de dados de outros tipos.
  • Pode ser visto como uma array associativa ou lista associativa.

Objetos como listas associativas

Uma lista associativa é análoga a um dicionário.

A cada chave da lista, é associado um valor.

  • "Milho" → "Amarelo"
  • "Arroz" → "Branco"
  • "Limão" → "Verde"

​Para criar um objeto, basta associá-lo ao valor {}.

Depois, podem-se associar valores (propriedades) ao objeto usando a sintaxe:

var cores = {};
cores['milho'] = 'Amarelo';
cores['arroz'] = 'Branco';
cores['limao'] = 'Verde';

A mesma sintaxe é usada para recuperar os elementos do objeto:

document.write(cores['milho']);

criando um objeto

  • É possível criar todos as propriedades de um objeto em uma única instrução:
var computers = {
  'trs-80' : 'Radio Shack',
  2600 : 'Atari',
  'adam' : 'Coleco'
};
document.write(computers['adam'] + ', ' + computers[2600] );

Objetos

  • Para adicionar um novo elemento a um objeto já existente, basta defini-lo:

var computers = {
  'trs-80' : 'Radio Shack',
  2600 : 'Atari', 'adam' : 'Coleco'
};
computers['mac'] = 'Apple';
document.write(computers['adam'] + ', '
    + computers[2600] + ', '
    + computers['mac'] );

objetos

  • É possível utilizar uma sintaxe alternativa (mais comum) para acessar alguns elementos de um objeto.

    objeto['nome'] → objeto.nome

  • 'nome' deve seguir a convenção para nomenclatura de variáveis:
    • Iniciar com letra
    • Não ter espaços ou caracteres especiais
  • Exemplo:
var sistemas = {
  stallman : 'GNU',
  'linus' : "Linux"
};
sistemas.apple = 'Mac OS X';
sistemas["microsoft"] = 'Windows';
document.write(
  sistemas['stallman'] + " " );
document.write(sistemas.linus + " ");
document.write(sistemas.microsoft + " ");
document.write(sistemas["apple"]);

for/in

  • A estrutura de controle for/in serve para percorrer todas as propriedades de um objeto, mesmo que não se conheça seus nomes.

Sintaxe:

  • for(tmpvar in objeto)
    • Percorre o objeto X vezes, onde X = número de propriedades do objeto.
    • A cada iteração, assumem os valores:
    • tmpvar → nome da propriedade atual 
    • objeto[tmpvar] → valor da propriedade atual

 

 

 

for/in - exemplo

var sistemas = {
  stallman : 'GNU',
  'linus' : "Linux"
};
sistemas.apple = 'Mac OS X';
sistemas["microsoft"] = 'Windows';
for (var x in sistemas) {
  document.write(
    x + ': ' + sistemas[x] + ' | '
  );
}

associação entre objetos

Um objeto pode ter outros objetos como membros:

var comp = {};
comp.mac = {};
comp.mac.sistema = "Mac OS X";
comp.mac.fabricante = "Apple";
comp.winpc = {}
comp.winpc.sistema = "Windows";
comp.winpc.fabricante = "Microsoft";
for(tipo in comp){
  document.write("<h1>" + tipo + "</h2><ul>");
  for(prop in comp[tipo])
    document.write("<li><em>" + prop + "</em>: " + comp[tipo][prop] + "</li>");
  document.write("</ul>");
}

arrays (listas)

  • Um objeto pode ser tratado como um array, que armazena uma lista seqüencial de valores.
  • Os elementos de um array podem ser de qualquer tipo.
  • Para criar um objeto como um array, basta usar a sintaxe []: 
var vazio = [];
var primos = [2, 3, 5, 7, 11];
var outros = [ 1.1, true, "a" ];

arrays

  • Os elementos de um array são acessados pelos seus índices, que são números inteiros.

  • O primeiro elemento tem índice 0.

  • O último índice é sempre N-1, onde N é o número de elementos do array.

  • Não há necessidade de se preocupar com alocação de espaço.

arrays

  • A sintaxe [] também para recuperar elementos do array, a partir do índice. 
var pratos = ['Pizza', 'Chocolate', 'Lasanha', 'Feijoada'];
document.write(
 "Eu quero " + pratos[2] + " com " +  pratos[3] + "."
);

tamanho do array

  • Todo array tem uma propriedade length, que armazena o seu tamanho. 
var pratos = ['Pizza', 'Chocolate', 'Lasanha', 'Feijoada'];
document.write(
 "Eu quero " + pratos.length + " pratos: ");
for(var i=0; i<pratos.length; i++)
  document.write(pratos[i] + ' ');

exibindo o array

  • Também é possível escrever na tela o array diretamente:
var pratos = ['Pizza', 'Chocolate','Lasanha', 'Feijoada'];
document.write(
 "Eu quero " + pratos.length + " pratos: ");
document.write(pratos);

arrays

  • O comprimento do array (length) pode ser modificado diretamente em tempo de execução.

  • Elementos não inicializados recebem o valor undefined.

  • Um array é um objeto como qualquer outro.

  • Um array pode ter propriedades (como qualquer objeto).

  • As propriedades e os índices do array não se misturam.

  • Inteiros e strings que podem ser convertidas em inteiros são consideradas índices.

for/in

Text

Em um array, a estrutura for/in recupera tanto as propriedades do objeto, quanto os índices do array.

pratos = [ 'Pizza', 'Chocolate', 'Lasanha', 'Feijoada' ];
pratos['extra'] = 'Surpresa do dia'; pratos['6'] = 'Salada';
pratos[0.5] = 'Promoção';
pratos[true] = 'Molho';
document.write("Conteúdo do objeto: <ul>");
for (var x in pratos)
  document.write(
    '<li>' + x + ': ' + pratos[x] + '</li>'
  );
document.write("</ul>");

delete

  • A palavra-chave delete pode ser usada para excluir propriedades do objeto ou índices do array.

    Ao se excluir um elemento do arrays, os elemntos seguintes não são movidos.

    Sintaxe:

      delete objeto.nome;
  delete objeto['valor'];
  delete objeto[variável]

delete

  • Exemplo:
delete pratos[2];
delete pratos.extra;

métodos

  • Javascript define alguns métodos que podem ser utilizados em arrays:

    • join

    • reverse

    • sort

    • concat

    • slice

    • splice

    • push

    • pop

    • shif

    • unshift

join()

  • join([separador]

    • Retorna a concatenação de todos os elementos do array, intercalados com o separador.

      Se o separador não for especificado, usa- se ','.

var pratos = [ 'Pizza', 'Chocolate', 'Lasanha', 'Feijoada' ]; 
document.write( pratos.join('; ') );
Pizza; Chocolate; Lasanha; Feijoada

reverse()

  • reverse()
    • Inverte a ordem os elementos do array.
var pratos = [ 'Pizza', 'Chocolate', 'Lasanha', 'Feijoada' ]; 
pratos.reverse();
document.write( pratos.join('; ') );
Feijoada; Lasanha; Chocolate; Pizza

sort()

  • sort()

    • ​Ordena os elementos do array alfabeticamente.

var pratos = [ 'Pizza', 'Chocolate', 'Lasanha', 'Feijoada' ]; 
pratos.sort();
document.write( pratos.join('; ') );
Chocolate; Feijoada; Lasanha; Pizza

concat()

  • concat(elemento+)
    • Retorna um novo array, composto pela concatenação do array original com todos os argumentos.

 

var pratos = [ 'Pizza', 'Chocolate', 'Lasanha', 'Feijoada' ];
var novospratos = pratos.concat(
 'Salada', 'Macarrão' );
document.write( novospratos );
Pizza,Chocolate,Lasanha,Feijoada,Salada,Macarrão

slice()

  • slice(início,[fim])
    • Retorna um novo array contendo os elementos do array original a partir deinício, até antes do fim.
    • Se fim for omitido, usa-se o último elemento.
    • Números negativos podem ser usados em ambos os argumentos, significando uma contagem a partir do final do array.
var pratos = [ 'Pizza', 'Chocolate', 'Lasanha', 'Feijoada' ]; 
document.write( pratos.slice(1,3) + " <br>\n" );
document.write( pratos.slice(1) + " <br>\n");
document.write( pratos.slice(-2) );
Chocolate,Lasanha<br>
Chocolate,Lasanha,Feijoada<br>
Lasanha<br>

splice()

  • Remove elementos do array, nas posições

    entre início e antes de fim.

  • Opcionalmente, insere novos elementos, no lugar dos removidos.

  • Modifica o array original! (não retorna um novo array).

var pratos = [ 'Pizza', 'Chocolate', 'Lasanha', 'Feijoada' ]; 
pratos.splice(1,2, 'Feijão', 'Arroz'); 
document.write(pratos);
Pizza,Feijão,Arroz,Feijoada

push()

  • Modifica o array, adicionando elementos ao

    seu final.

  • Retorna o novo tamanho do array.

  • Não mescla novos arrays acrescentados.

var pratos = [ 'Pizza', 'Chocolate', 'Lasanha', 'Feijoada' ];
var x = pratos.push('Feijão', 'Arroz'); 
document.write( x + ' itens: ' + pratos);
6 itens: Pizza,Chocolate,Lasanha,Feijoada, Feijão,Arroz

pop()

  • pop()
    • Remove o último elemento do array e o retorna.
var pratos = [ 'Pizza', 'Chocolate', 'Lasanha', 'Feijoada' ];
var ultimo = pratos.pop(); 
document.write(ultimo + "<br>\n"); 
document.write(pratos);
Feijoada<br>
Pizza,Chocolate,Lasanha

unshift()

  • Insere os elementos no início do array, na ordem

    em que são especificados.

var pratos = [ 'Pizza', 'Chocolate', 'Lasanha', 'Feijoada' ]; 
pratos.unshift('Arroz', 'Batata', 'Cebola'); 
document.write(pratos);
Arroz,Batata,Cebola,Pizza,Chocolate,Lasanha,Feijoada

shift()

  • shift()

    • Remove o primeiro elemento e o retorna.

var pratos = [ 'Pizza', 'Chocolate', 'Lasanha', 'Feijoada' ];
var primeiro = pratos.shift(); 
document.write(primeiro + "<br>\n"); 
document.write(pratos);
Pizza<br>
Chocolate,Lasanha,Feijoada

arrays multidimensionais

  • Em Javascript, um array pode conter elementos de qualquer tipo, inclusive outros arrays.

  • Arrays que contém outros arrays podem ser visualizados como matrizes.

  • Podem ser usados para armazenar séries de dados que ocupam mais de uma dimensão.

var familia = [
  [ "Fred",   "Barney" ],
  [ "George", "Jane",  "Elroy" ],
  [ "Homer",  "Marge", "Bart" ],
];
document.write(
  familia[1][2] + ', ' + familia[2][0]
);
Elroy, Homer

objetos e arrays

  • Arrays podem conter objetos de qualquer tipo, não apenas outros arrays.

  • Objetos também podem conter outros objetos e arrays.

  • É possível usar várias combinações de objetos e arrays, para organizar seus dados de maneira hierárquica.

familia = [ { pai : 'Fred', amigo : 'Barney'},
            { 'pai' : 'george, 'mae' : 'Jane', filho: 'Elroy'},
            { pai : 'Homer', mae : 'Marge', filho : 'Bart} ];
document.write( familia[1].mae + ', ' familia[2].filho );

percorrendo a estrutura hierárquica

  • Para percorrer estruturas hierárquicas, basta utilizar combinações de loops for ou for/in.

  •  

    Exemplo (Objeto com Objetos):

 

 

for(nomefam in familia){
  document.write(
    "<h3>" + nomefam + "</h3>"
  );
  for(membro in familia[nomefam])
    document.write(
      "<strong>" +  membro+ "</strong> " +
       familia[nomefam][membro] + "<br>"
); }
Made with Slides.com