Vetores de Objetos (Versão em Vídeo)

Este é apenas uma captura de tela da nossa programação interativa, preparada de forma a tornar a legendagem e tradução mais fáceis. É melhor assistir nossa conversa aqui:
https://www.khanacademy.org/cs/programming/

Continuemos explorando o que
podemos fazer com objetos.

Voltamos para o programa que
usamos no tutorial de funções.

Este programa tem esta função drawWinston
que sabe desenhar Winston em certo X e Y.

E, aqui, chamamos drawWinston

4 vezes, cada uma com um conjunto

diferente de coordenadas X e Y.

Bem, você me conhece, quando vejo

estas quatro chamadas para drawWinton
que se parecem tanto,

tudo que penso é: como seria
melhor se pudéssemos

usar um loop e chamá-la apenas
uma vez dentro do loop,

mudando X e Y em cada interação do loop.

Para isso, precisamos guardar esses X e Y
em um vetor para poder iterá-lo.

Bem, temos dois conjuntos de valores.

Então, poderíamos ter 2 vetores. Um para
a posição X e outro para a posição Y.

Nas posições X podemos ter
99, 294, 101 e 294,

e nas posições Y teremos
117, 117, 316, 316.

Ok, e agora podemos iterá-los com nosso loop
for var i = 0; i < xPositions.length; i++

Para cada elemento de
xPositions, dizemos

drawWinston ( xPositions[ i ],
yPositions [ i ] );

Ok, vejamos se funciona...
deletando...

Certo, funcionou!

Agora podemos apenas chamar
essa única linha de código que

executa drawWinston, mas o faz
para cada posição do vetor xPositions.

Podemos vir aqui e adicionar
mais a isso ... dizendo...

tipo 10, então adicionamos 1, e então 1,
e então 1, e então 100, e 1.

Agora... agora está ficando um pouco
confuso e não estou gostando,

porque está bem difícil ver que X
se relaciona com qual Y.

Eu quero poder apenas bater o olho e
saber quais são os pares X e Y,

ao invés de ter que garantir que os estou
alinhando corretamente, um sobre o outro

Preciso encontrar uma forma diferente
de armazenar essas posições.

Uma ideia é que poderíamos
armazená-las como objetos.

Pense nisso, cada posição é na verdade
duas informações: o X e o Y.

Então, poderíamos ter um objeto com as
propriedades X e Y,

e poderíamos ter um vetor -de objetos
com todas essas posições X-Y.

Vamos fazer!

Vamos dizer var positions
igual a um vetor.

Mas, cada elemento, ao invés de ser
um número, será um objeto.

Aqui abrimos chave e vamos apenas
dizer X:99, Y:117.

Ok, temos agora nossas posições aqui,
e vamos adicionar outra aqui.

Certo, X deve ser 294, 117, e o terceiro
será 101, 316, e o último é 294 e 316.

Ok! Agora, temos um vetor de objetos onde
cada objeto tem propriedades X e Y.

Aqui em baixo, no loop for, mudamos apenas
isso aqui para iterar por positions.length

Então passamos o objeto.

Agora estamos passando o objeto inteiro,
mas queremos passar o X e o Y,

então precisamos de
positions [ i ].X e positions [ i ].Y

Ta-da!

Agora podemos nos livrar destes
vetores antigos confusos.

Ótimo, parece-me bem melhor e
torna o código mais legível

e sempre que pudermos ter código
mais legível, melhor.

E também está mais fácil adicionar.

Se quisermos adicionar um, só precisamos
adicionar o par junto,

e aí podemos dizer X é 200, Y 200, nos dá um
pequeno Winston aqui no meio.

Beleza.

Agora quero mostrar algo
ainda mais sofisticado.

Percebe que nossa função aceita dois
números e depois os usa.

Bem, poderíamos mudar nossa função
para que espere um objeto

e depois pegue o X e Y do objeto,

o que significa que aqui embaixo só
teríamos que passar o objeto.

Vamos tentar!

Passamos o objeto, agora não funciona.

Isso porque nossa função ainda espera dois
objetos e está recebendo apenas um,

então vamos mudá-la

para dizer que recebe facePosition,

e agora deu erro porque faceX
não está definido,

por que antes estávamos passando faceX
como argumento, mas agora ele não existe,

temos apenas um objeto.

O que podemos fazer, é salvar a posição X
de um objeto dentro da variável faceX.

Estamos dizendo que temos este objeto,
sabemos que ele tem uma propriedade X,

então vamos apenas guardá-la
na variável faceX.

Podemos fazer o mesmo com Y,
então faceY = facePosition.y;

Ta-da!

E então, o resto da função usa
faceX e faceY.

Agora, temos que ter certeza
que soletramos corretamente,

se escrevermos xx, não vai funcionar,
porque não é o que está aqui embaixo

no nosso vetor de objetos. Precisa bater.

Isso é bem legal, porque agora você pode
ter um vetor de objetos,

pode ter funções que recebem objetos

e você vai ver que seus programas ficarão
poderosos com essa estrutura de dados.

Especialmente porque é tão comum querer
junto um par X e Y.

Será especialmente útil nos seus programas
de desenho e animação aqui.

Então, vá fundo e se divirta!

[Legendado por: Fred Guth] [Revisado por: Alef Almeida]