Arrays of Objects (Video Version)

Lad os fortsætte med at se,
hvad vi kan gøre med objekter.

Vi er tilbage med det program
vi brugte i modulet om funktioner.

Dette program har funktionen 'drawWinston'

som kan tegne Winston
ved visse x'er og y'er.

Her kalder vi 'drawWinston' fire gange.

Hver gange med et forskelligt
sæt af x- og y-koordinater.

Du kender mig jo.

Når jeg ser disse fire kald
på 'drawWinston',

der ser så ens ud,
så tænker jeg straks på,

hvor meget bedre det ville
være at bruge en løkke

og kalde den én gang inde i løkken

og ændre x og y i hvert
af løkkens gennemløb.

For at gøre det skal vi gemme disse
x- og y-positioner i et array,

som kan gennemløbes.

Vi har to sæt af værdier,
så vi kan lave to arrays.

Et for x-positionerne og
et for y-positionerne.

Vi taster
>var xPositions = [99, 294, 101, 294];< og

>var yPositions = [117, 117, 316, 316];<

Nu kan vi gennemløbe disse
ved at bruge en for-løkke.

>for (var i = 0; i < xPositions.length; i++)<

som gennemløber hvert element i xPositions

og vi tegner Winston med

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

Okay, lad os se om det virker,
når vi sletter dette.

Okay, det virker.

Nu har vi denne ene linje med kode,
der tegner Winston

og gør det i hver position
i arrayet xPositions.

Vi kan tilføje flere positioner
ved at skrive 10 og 1

og 1 og 1

og 100 og 1.

Det begynder at se lidt rodet ud,

og det kan jeg ikke lide,

da det er svært at se,
hvilket x der hører til hvilket y.

Det skal være nemt at se mine x og y par

uden jeg skal forsøge at skrive dem
under hinanden på denne måde.

Jeg vil gerne gemme disse
positioner på en anden måde.

En ide er i stedet at gemme dem i objekter

da hver position består af
to informationer, x og y.

Vi kan lave et objekt
med egenskaberne x og y.

Og dernæst kan vi have et array af
objekter med disse x- og y-positioner.

Lad os gøre det.

Vi taster >var positions = [];<

da det skal være et array,

men i stedet for
at hvert element er et tal,

så skal det være et objekt.

Vi bruger derfor {} og
indsætter x: 99, y: 117.

Nu har vi en af vores positioner.

Vi kan tilføje endnu en

>{x: 294, y: 117},<

hvor x er 294 og y er 117.

Den tredje er>{x: 101, y: 316},<

og den sidste er >{x: 294, y: 316},<.

Nu har vi et array af objekter,

hvor hvert objekt har egenskaberne x og y.

Hernede i vores for-løkke ændrer vi
den til at gennemløbe positions.length

og så indsætter vi objektet.

Lige nu er det hele objektet,
men vi skal bruge x og y,

så vi skal ændrer det til
position[i].x og positions[i].y

Sådan!!!

Nu kan vi fjerne disse
gamle kludrede arrays.

Flot.

Dette ser, for mig, meget pænere ud
og gør koden meget nemmere at læse.

Og når vi har mere læsbar kode,
så er det godt.

Det gør det også nemmere at tilføje noget.

Jeg tilføjer x y parret samlet.

Lad os sige >{x: 200, y: 200},<

og jeg får en Winston i midten.

Sejt.

Nu vil jeg vise dig noget,
der er endnu mere smart.

Bemærk at vores funktion lige nu
accepterer to tal

og dernæst bruger disse to tal.

Vi kan ændre vores funktion,
så den forventer et objekt

og får x og y fra dette objekt.

Hernede skal vi blot have
objektet positions[i]

Lad os prøve det.

Vi bruger vores objekt,
men nu virker det ikke.

Det er fordi vores funktion stadig
forventer to argumenter,

og den får kun ét.

Så vi ændrer funktionen til
kun at få 'facePosition'.

Nu får vi fejlen faceX er ikke defineret,

fordi vi før brugte faceX som et argument,
men nu eksisterer det ikke.

i stedet har vi et objekt.

Det vi gør er, at gemme x positionen
fra objektet i variablen faceX.

Vi har dette objekt og
objektet har egenskaben x,

så vi gemmer den i variablen faceX.

Og så gør vi det samme for y,

og taster >faceY = facePosition.y<.

Sådan.

I resten af funktionen bruges
faceX og faceY.

Vi skal sikre os, at de er stavet korrekt,

hvis vi brugte xx, så virker det ikke,

da det ikke er det, der står hernede
i vores array af objekter.

Det skal passe sammen.

Men det er ret smart.

Du kan have et array af objekter.

Du kan have funktioner,
der bruger objekter.

Du vil opdage at dine programmer bliver
ret smarte på grund af den måde

de strukturer deres data.

Da du så tit har x og y, der hører sammen,

så vil du opdage, at de især er nyttige i
dine grafik og animationsprogrammer.

Så kom bare i gang og ha' det sjovt.