Ітератори JavaScript та взаємодіючі компоненти

У цьому підручнику ви дізнаєтеся про ітератори та ітератори JavaScript за допомогою прикладів.

Ітератори та ітератори JavaScript

JavaScript надає протокол для ітерації структур даних. Цей протокол визначає спосіб ітерації цих структур даних за допомогою for… ofциклу.

Поняття протоколу можна розділити на:

  • ітерабельний
  • ітератор

Ітерабельний протокол зазначає, що ітеративний повинен мати Symbol.iteratorключ.

JavaScript Iterables

Структури даних, що мають Symbol.iterator()метод, називаються ітерабельними. Наприклад, масиви, рядки, набори тощо.

Ітератори JavaScript

Ітератор - це об’єкт, який повертається Symbol.iterator()методом.

Протокол ітераторів забезпечує next()метод доступу до кожного елемента ітерабельності (структури даних) по одному.

Давайте подивимось на приклад наявності ітерацій Symbol.Iterator()

 const arr = (1, 2 ,3); // calling the Symbol.iterator() method const arrIterator = arr(Symbol.iterator)(); // gives Array Iterator console.log(arrIterator); const str = 'hello'; // calling the Symbol.iterator() method const strIterator = str(Symbol.iterator)(); // gives String Iterator console.log(strIterator);

Вихідні дані

 Ітератор масиву () StringIterator ()

Тут виклик Symbol.iterator()методу як масиву, так і рядка повертає їх відповідні ітератори.

Ітерація через багатокомпонентні

Ви можете використовувати for… ofцикл для перебору цих ітерабельних об'єктів. Ви можете перебирати Symbol.iterator()метод таким чином:

 const number = ( 1, 2, 3); for (let n of number(Symbol.iterator)()) ( console.log(n); )

Вихідні дані

 1 2 3

Або ви можете просто перебирати масив так:

 const number = ( 1, 2, 3); for (let n of number) ( console.log(n); )

Тут ітератор дозволяє for… ofциклу перебирати масив і повертати кожне значення.

JavaScript next () Метод

Об’єкт ітератора має next()метод, який повертає наступний елемент у послідовності.

next()Метод містить дві властивості: valueа done.

  • Значення властивість може бути будь-якого типу даних і являє собою поточне значення в послідовності.
    value
  • зроблено властивість є логічне значення, яке вказує , є чи ітерація завершена чи ні. Якщо ітерація неповна, для властивості встановлюється значення , інакше для нього встановлюється значення .
    donedonefalsetrue

Давайте розглянемо приклад ітерабелів масиву:

 const arr = ('h', 'e', 'l', 'l', 'o'); let arrIterator = arr(Symbol.iterator)(); console.log(arrIterator.next()); // (value: "h", done: false) console.log(arrIterator.next()); // (value: "e", done: false) console.log(arrIterator.next()); // (value: "l", done: false) console.log(arrIterator.next()); // (value: "l", done: false) console.log(arrIterator.next()); // (value: "o", done: false) console.log(arrIterator.next()); // (value: undefined, done: true)

Ви можете next()кілька разів викликати ітерацію над arrIteratorоб’єктом.

  • next()Метод повертає об'єкт з двома властивостями: valueа done.
  • Коли next()метод досягає кінця послідовності, для doneвластивості встановлюється значення false.

Давайте розглянемо, як for… ofцикл виконує вищевказану програму. Наприклад,

 const arr = ('h', 'e', 'l', 'l', 'o'); for (let i of arr) ( console.log(i); )

Вихідні дані

 Здравствуйте

for… ofЦикл робить точно так же , як програма вище.

for… ofПетля утримує виклик next()методу ітератора. Як тільки він досягає done:true, for… ofцикл припиняється.

Визначений користувачем ітератор

Ви також можете створити власний ітератор та виклик next()для доступу до наступного елемента. Наприклад,

 function displayElements(arr) ( // to update the iteration let n = 0; return ( // implementing the next() function next() ( if(n < arr.length) ( return ( value: arr(n++), done: false ) ) return ( value: undefined, done: true ) ) ) ) const arr = ('h', 'e', 'l', 'l', 'o'); const arrIterator = displayElements(arr); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next());

Вихідні дані

 (value: "h", done: false) (value: "e", done: false) (value: "l", done: false) (value: "l", done: false) (value: "o" , done: false) (значення: undefined, done: true)

У вищезазначеній програмі ми створили власний ітератор. У displayElements()функції повертає valueі doneвластивість.

  • Кожного разу, коли next()метод викликається, функція виконується один раз і відображає значення масиву.
  • Нарешті, коли всі елементи масиву будуть вичерпані, то doneвластивість має значення true, з , valueяк undefined.

Цікаві статті...

Рекомендуємо