Масиви об'єктів (відео версія)

Це просто показ екрану нашої інтерактивної бесіди щодо кодування, готової щоб полегшити створення перекладу і субтитрів. Краще дивитися наші бесіди тут:
https://www.khanacademy.org/cs/programming/

Продовжимо досліджувати те, що ми можемо
робити з об'єктами.

Ми повертаємось до програми яку ми
використовували при вивчені функцій.

Ця програма з функцією drawWinston, знає
як намалювати Вінстона в певних "x" і "y".

Тоді тут ми викликаємо drawWinston 4 рази
і кожний має різний набір X та Y координат

Що ж, ви мене знаєте, коли я поглянула на
ці 4 виклики drawWinston, що дуже подібні,

все про, що я можу думати, це про те, що
було б краще використати цикл і викликати

лише один раз всередині циклу, змінюючи
X та Y у кожному повторі циклу.

Отже, щоб зробити це, нам слід придумати
спосіб зберігання цих X та Y позицій

у масиві, тому ми зможемо запустити цикл
через масив.

У нас 2 набори значень і ми можемо зробити
2 масиви. Один для позицій X інший для Y.

Отже, X координата може мати 99, 294, 101,
і 294. І позиції Y - 117, 117, 316, 316.

Добре, тепер ми можемо запустити цикл з
нашим циклом for.

var i = 0; i < xPositions.length; i++

Отже, ми проходимо по кожному елементі у
xPositions і введемо

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

Гаразд, поглямо чи запрацює, якщо видалити

Так, працює

І тепер ми можемо викликати ось це, просто
цей рядок коду що виконує drawWinston

але він обраховується в кожній позиції
xPositions в масиві.

Отже, ми можемо додати більше до цього
ввівши щось типу... 10, тоді додати 1,

а потім 1, і тоді 1, і потім ще 100 та 1.

Зараз, це виглядає трохи не акуратно і це
мені не подобається? так як мені важко

побачити які координати X відносяться до Y
Хочу щоб з першого погляду було зрозуміло

які пари у мене з X.

Замість цього, щоб переконатися я
ідеально вирівняю над одним одним

можливо так

Отже, я хочу найти інший спосіб
зберігання цих позицій

Є одна ідея щоб зберігати їх як об'єкти.

Подумайте про це, кожна позиція це два
біти інформації: X та Y. Таким чином, ми

могли б мати об'єкт, що має властивості Х
та Y, а потім мати масив об'єктів

з усіма позиціями X та Y.

Отже. зробимо це

Ми введемо var positions рівне масиву

Але кожний елемент замість того,
щоб бути числом буде об'єктом

Отже, у нас фігурні дужки і тоді введемо
X: 99, Y:117.

Отже, тепер ми маємо одну з наших позицій
тут, а потім ми додамо ще одну тут.

Гаразд, X повинна бути 294, 117, третя
буде 101, 316, а остання з них 294 і 316.

І тепер у нас є масив об'єктів, де кожен
об'єкт має значення Х та Y всередині.

Отже тут, в нашому циклі for змінимо цю
функцію, щоб повторювати positions.length

Тоді ми пропустимо об'єкт.

Гаразд, зараз він пропускає цілий об'єкт,
але ми хочемо щоб він проходив по X та Y

отже, нам потрібно positions[i].X та
positions[i].Y.

Тада!

Зараз можемо позбутись цих старих
нагромаджених масивів

Чудово, і це виглядає набагато приємніше
для мене і код більш читабельний,

і завжди чим більш читабельний код
тим краще

Також це спрощує доповнення, якщо хочемо
додати щось. Я додам ще 2 і тоді введемо

X 200 Y 200, отримаємо маленького Вінстона
по середині, тут.

Чудово.

Тепер я хочу показати вам дещо навіть
веселіше, ніж це.

Зверніть увагу на те як наша функція
приймає 2 числа, а потім використовує їх

І ми можемо змінити нашу функцію, то вона
прийматиме об'єкт і набуватиме

значень X та Y об'єкту.

Це означає, що тут ми могли б
просто передати об'єкт.

Спробуємо це.

Ми пропускаємо об'єкт, тепер він зламаний.

Так як наша функція очікує 2 об'єкти, а
отримує тільки 1, і тому, ми змінимо її

щоб ввести, що це набуває facePosition, і
тепер ми отримуємо помилку, що faceX

не визначена, тому що раніше

ми проходили по faceX як аргументу, але
тепер він не існує, ми отримуємо об'єкт.

І те що можемо зробити це зберегти позицію
X від об'єкта всередині змінної faceX.

Отже, ми говоримо, що отримали цей об'єкт,
ми знаємо, цей об'єкт має властивість X,

так що ми просто зберігатимемо,
в змінній faceX.

Ми можемо так само вчинити з
Y, отже, faceY = facePosition.y.

Тада!

І тоді, решта частина функції
використовує faceX та faceY.

Тепер, нам слід переконатися, чи правильно
написали їх, тому, що якби ми ввели хх, це

не працюватиме, так як це не те, що тут

в нашому масиві об'єктів, тому потрібно
щоб відповідали один одному.

Це дуже акуратно, і тепер ви можете мати
масиви об'єктів, функції, які є об'єктах

і ви дійсно виявите, що ваші програми
можуть бути дуже потужним з тим, як

вони структурують свої дані

тим більше якщо так часто хотіти групувати
X і Y разом, я думаю, ви знайдете їх

особливо корисними у всіх ваших
зображувальних та анімаційних програм тут.

Таким чином, продовжуйте
і отримуйте задоволення!