JavaScript для всіх: ітератори – Smashing Magazine

JavaScript для всіх: ітератори – Smashing Magazine


Привіт, я Метт, але “vilto” також працює – я тут, щоб навчити вас JavaScript. Ну ні тут-Тут; Технічно я на Piccalil.li javascript для всіх Курс навчання JavaScript. Нижче наведено уривок з повторюваний і повторюваний Модуль: Уроки з ітераторів.

Ітератори Однією з лінгвістично заплутаних тем JavaScript є плавання. легко Що вже є досить високою планкою. є переробляється – Масив, набір, карта та рядок – усе це далі перероблений протоколЩоб відповідати зазначеному протоколу, об’єкт повинен його реалізувати ітераційний інтерфейсНа практиці це означає, що об’єкт потрібно включити [Symbol.iterator]() Метод десь у ланцюжку прототипів. Ітераційний протокол є одним із двох протокол повторенняІнший протокол ітерації протокол повторювача,

Розумієте, що я маю на увазі під лінгвістичною складністю? Iterables реалізує інтерфейс Iterator, а Iterator реалізує інтерфейс Iterator! Якщо ви можете сказати це п’ять разів швидко, ви майже зрозуміли суть; Легко, так?

Ні, послухайте, поки ви дійдете до кінця цього уроку, я обіцяю, що він не буде таким заплутаним, як може здатися, особливо з огляду на контекст, який ви отримаєте з попередніх уроків.

Один переробляється Об’єкт дотримується протоколу ітерації, що просто означає, що об’єкт має звичайний метод створення ітерації. Елементи можна прокручувати for,of,

Один ітератор Об’єкт відповідає протоколу ітератора, і до елементів, які він містить, можна отримати доступ послідовноодин за одним.

до Сказати знову і знову – гра слів, за яку я не прощаю собі, і я не очікую, що ви мені пробачите – а ітератор Об’єкт відповідає протоколу ітератора, і до елементів, які він містить, можна отримати доступ послідовноодин за одним. Протокол Iterator визначає стандартний спосіб ітеративного генерування послідовності значень. return Значення після створення всіх можливих значень.

Щоб слідувати протоколу ітератора, об’єкт повинен реалізувати – ви здогадалися – це. інтерфейс повторювачаНа практиці це ще раз означає, що певний метод має бути доступним десь у ланцюжку прототипів об’єкта. В даному випадку це так next() Метод, який проходить один за одним елементи, які він містить, і повертає об’єкт кожного разу, коли цей метод викликається.

Щоб відповідати критеріям інтерфейсу Iterator, повернутий об’єкт повинен мати дві властивості з певними ключами: одну з ключем valueпредставляє значення поточного елемента та з ключем doneЛогічне значення, яке повідомляє нам, чи пройшов ітератор останній елемент у структурі даних. Це не дивна фраза, яку залишила редакція: її цінність done власність є true тільки коли надходить дзвінок next() У результаті спроби отримати доступ до елемента Попереду Останній елемент в ітераторі, а не коли досягнуто останнього елемента в ітераторі. Знову ж таки, є багато надрукованого, але це матиме більше сенсу, коли ви побачите це в дії.

Ви бачили приклад неявного ітератора раніше, хоч і коротко:

const theMap = new Map([ [ "aKey", "A value." ] ]);

console.log( theMap.keys() );
// Result: Map Iterator { constructor: Iterator() }

Правильно: хоча сам об’єкт Map є ітерованим, базові методи Map keys(), values()І entries() Усі повертаються об’єкти Iterator. Можливо, ви також пам’ятаєте, що я переглядав ті, хто використовує forEach (Додано в мову відносно недавно). При такому використанні ітератор не можна відрізнити від ітератора:

const theMap = new Map([ [ "key", "value " ] ]);

theMap.keys().forEach( thing => {
  console.log( thing );
});
// Result: key

Усі ітератори є ітерованими; Усі вони реалізують інтерфейс Iterable:

const theMap = new Map([ [ "key", "value " ] ]);

theMap.keys()[ Symbol.iterator ];
// Result: function Symbol.iterator()

І якщо ви сердиті через дедалі стираючу межу між ітераторами та ітераторами, зачекайте, доки ви не завантажите цей кандидат у відео «Десять найкращих аніме-зрад»: я збираюся продемонструвати, як взаємодіяти з ітератором за допомогою масиву.

«Бу», — плачеш ти, звісно, ​​коли тебе так зрадив один із твоїх найстаріших і найпотаємніших друзів. «Масив — це ітераціяКровне повторенняТЗЗагалом ви маєте рацію, кричачи на мене, і особливо праві щодо масивів – масив Є Ітератор, а не ітератор. Фактично, хоча всі ітератори є ітерованими, жоден неявний ітератор не є ітерованим.

Проте, коли ти йому дзвониш [ Symbol.iterator ]() Метод – той, який визначає об’єкт як ітерований – повертає ітерований об’єкт, створений із ітерованої структури даних:

const theIterable = [ true, false ];
const theIterator = theIterable[ Symbol.iterator ]();

theIterable;
// Result: Array [ true, false ]

theIterator;
// Result: Array Iterator { constructor: Iterator() }

Те саме стосується наборів, карт і, так, навіть рядків:

const theIterable = "A string."
const theIterator = theIterable[ Symbol.iterator ]();

theIterator;
// Result: String Iterator { constructor: Iterator() }

Що ми тут робимо вручну — створюємо ітератор із ітерованого за допомогою %Symbol.iterator% – Це саме те, як об’єкти-ітератори працюють всередині, і чому вони повинні бути реалізовані %Symbol.iterator% для трапляються Переробляється. Кожного разу, коли ви проходите через масив, ви фактично циклюєте через ітератор, створений з цього масиву. всі вбудовані повторювачі Є Iterables Можна використовувати всі вбудовані iterables створити Повторювач.

Як альтернатива – переважноНавіть тому, що це не вимагає від вас хвилювань %Symbol.iterator% безпосередньо – можна використовувати вбудований Iterator.from() Метод створення ітерованого об’єкта з будь-якого ітерованого:

const theIterator = Iterator.from([ true, false ]);

theIterator;
// Result: Array Iterator { constructor: Iterator() }

Ви пам’ятаєте, як я згадував, що ретранслятор повинен забезпечити a next() Метод (який повертає дуже конкретний об’єкт)? він дзвонить next() Метод проходить елементи, які містить ітератор, по одному, при цьому кожен виклик повертає екземпляр цього об’єкта:

const theIterator = Iterator.from([ 1, 2, 3 ]);

theIterator.next();
// Result: Object { value: 1, done: false }

theIterator.next();
// Result: Object { value: 2, done: false }

theIterator.next();
// Result: Object { value: 3, done: false }

theIterator.next();
// Result: Object { value: undefined, done: true }

Ви можете розглядати це як більш контрольовану форму обходу, ніж традиційне «увімкніть і дивіться, як воно йде». for Цикли, якими ви, ймовірно, користуєтеся — метод доступу до елементів поетапно за потреби. Я маю на увазі, ти цього не робиш проходити Переступити через такий репітер, бо вони мають свій Iterator.forEach Метод, який працює саме так, як ви очікуєте, до певної міри:

const theIterator = Iterator.from([ true, false ]);

theIterator.forEach( element => console.log( element ) );
/* Result:
true
false
*/

Але є ще одна велика різниця між ітерованим і ітерованим, про яку ми ще не торкалися, і за мої гроші це дійсно дуже допомагає зробити лінгвістичний Відчуття обох. Однак вам, можливо, доведеться трохи розсмішити мене.

Дивіться, ітерований об’єкт – це об’єкт, який є ітерованим. Ні, слухай, тримайся мене: ти можеш перебирати масив, і коли закінчиш, ти все ще можеш перебирати цей масив. За визначенням, це об’єкт, який можна повторювати знову і знову; Суттєвою природою ітерованого є те, що він ітерований:

const theIterable = [ 1, 2 ];

theIterable.forEach( el => {
  console.log( el );
});
/* Result:
1
2
*/

theIterable.forEach( el => {
  console.log( el );
});
/* Result:
1
2
*/

Певним чином ітеративний об’єкт представляє однину Робота Від повторення. Внутрішній для iterable, це механізм, за допомогою якого iterable повторюється щоразу. Як окремий об’єкт-ітератор – продовжуйте, незалежно від того, чи використовуєте ви його next Використання методу або циклу по його елементах forEach – Після повторення воно повторюється минулий часце так повторюваніОскільки вони підтримують внутрішній стан, основна природа ітератора має повторюватися в однині:

const theIterator = Iterator.from([ 1, 2 ]);

theIterator.next();
// Result: Object { value: 1, done: false }

theIterator.next();
// Result: Object { value: 2, done: false }

theIterator.next();
// Result: Object { value: undefined, done: true }

theIterator.forEach( el => console.log( el ) );
// Result: undefined

Це добре працює, коли ви використовуєте вбудовані методи конструктора Iterator для фільтрації або видалення частини об’єкта Iterator:

const theIterator = Iterator.from([ "First", "Second", "Third" ]);

// Take the first two values from `theIterator`:
theIterator.take( 2 ).forEach( el => {
  console.log( el );
});
/* Result:
"First"
"Second"
*/

// theIterator now only contains anything left over after the above operation is complete:
theIterator.next();
// Result: Object { value: "Third", done: false }

Коли ви досягаєте кінця ітератора, робота з його повторення завершена. Ітерація. Минулий час.

І ви можете з полегшенням почути, що ваш час також витрачається на цей урок. Я знаю, що це було трохи складно, але хороша новина: цей курс повторюється, а не повторюється. Цей етап вашого повторення через нього – цей урок – може закінчитися, але суть цього курсу полягає в тому, що ви можете повторити його знову. Не турбуйтеся про те, щоб запам’ятати все це прямо зараз – ви завжди можете повернутися та переглянути цей урок.

висновок

Те, що я дотримуюся того, що написав там, мабуть, не дивно: цей текст складний, але послухайте, ти отримав цеJavaScript для всіх створено, щоб занурити вас у голову JavaScript. Як тільки ви починаєте бачити, як шестерінки з’єднуються – бачите відбитки пальців, залишені людьми, які створили мову, і хороші, погані, а іноді й шокуючі рішення, прийняті в ній – ні. ітара-чи – Сила Або -тор Зуміє встати на вашому шляху.

JavaScript для оголошення кожного курсу
JavaScript тепер доступний для всіх, а ціна запуску триватиме до півночі 28 жовтня. Заощадьте £60 від повної ціни в £249 і отримайте його за £189! (великий попередній перегляд)

моя мета – навчити вас темна магія – The як і це чому Використовуючи JavaScript, використовуйте синтаксис, який, швидше за все, зустрінеться у вашій щоденній роботі, у вашому темпі та на ваших умовах. Якщо ви новачок у мові, ви підете з цього курсу з фундаментальним розумінням JavaScript, яке коштує сотень годин спроб і помилок. Якщо ви молодший розробник, ви закінчите цей курс із глибокими знаннями, щоб конкурувати з будь-яким старшим.

Я сподіваюся побачити вас там.

чудова редакція
(GG,YK)



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *