URL: http://github.com/javascript-tutorial/uk.javascript.info/pull/196.diff
ys stop it using `break`. +Звичайно, `for..of` цикли через такий об’єкт буде нескінченним. Але ми завжди можемо зупинити його за допомогою `break`. ``` -## String is iterable +## Рядок є ітерованим -Arrays and strings are most widely used built-in iterables. +Масиви та рядки найбільш широко використовуються вбудовані ітератори. -For a string, `for..of` loops over its characters: +Для рядка, `for..of` цикл проходить по символам: ```js run for (let char of "test") { - // triggers 4 times: once for each character - alert( char ); // t, then e, then s, then t + // викликається 4 рази: один раз для кожного символу + alert( char ); // t, потім e, потім s, потім t } ``` -And it works correctly with surrogate pairs! +І це правильно працює з сурогатними парами! ```js run let str = '𝒳😂'; for (let char of str) { - alert( char ); // 𝒳, and then 😂 + alert( char ); // 𝒳, і потім 😂 } ``` -## Calling an iterator explicitly +## Виклик ітератора явно -For deeper understanding, let's see how to use an iterator explicitly. +Для глибшого розуміння, подивімось, як явно використовувати ітератор. -We'll iterate over a string in exactly the same way as `for..of`, but with direct calls. This code creates a string iterator and gets values from it "manually": +Ми будемо ітерувати рядок точно так само, як для `for..of`, але з прямими викликами. Цей код створює ітератор рядка і отримує значення від нього "вручну": ```js run -let str = "Hello"; +let str = "Привіт"; -// does the same as +// робить те ж саме, як // for (let char of str) alert(char); *!* @@ -157,97 +157,96 @@ let iterator = str[Symbol.iterator](); while (true) { let result = iterator.next(); if (result.done) break; - alert(result.value); // outputs characters one by one + alert(result.value); // виводить символи один за одним } ``` -That is rarely needed, but gives us more control over the process than `for..of`. For instance, we can split the iteration process: iterate a bit, then stop, do something else, and then resume later. +Це рідко потрібно, але дає нам більше контролю над процесом, ніж `for ..of`. Наприклад, ми можемо розділити процес ітерації: трохи ітерувати, а потім зупинитися, зробити щось інше, а потім відновити пізніше. -## Iterables and array-likes [#array-like] +## Ітеровані об’єкти та псевдомасиви [#array-like] -Two official terms look similar, but are very different. Please make sure you understand them well to avoid the confusion. +Ці два офіційних терміни виглядають подібними, але дуже різні. Будь ласка, переконайтеся, що ви добре розумієте їх, щоб уникнути плутанини. -- *Iterables* are objects that implement the `Symbol.iterator` method, as described above. -- *Array-likes* are objects that have indexes and `length`, so they look like arrays. +- *Ітеровані* -- це об’єкти, які реалізують метод `Symbol.iterator`, як описано вище. +- *Псевдомасиви* -- це об’єкти, які мають індекси та `length`, тому вони виглядають як масиви. -When we use JavaScript for practical tasks in a browser or any other environment, we may meet objects that are iterables or array-likes, or both. +Коли ми використовуємо JavaScript для практичних завдань у браузері або будь-якому іншому середовищі, ми можемо зустріти об’єкти, які є ітерованими або масивами, або обома. +Наприклад, рядки є ітерованими об’єктами (`for..of` працює на них) та псевдомасивами (у них є числові індекси та `length`). -For instance, strings are both iterable (`for..of` works on them) and array-like (they have numeric indexes and `length`). +Але ітерований об’єкт може не бути масивом. І навпаки, псевдомасив може бути не ітерованим об’єктом. -But an iterable may be not array-like. And vice versa an array-like may be not iterable. +Наприклад, `range` у прикладі вище є ітерованим об’єктом, але не масивом, тому що він не має індексованих властивостей та `length`. -For example, the `range` in the example above is iterable, but not array-like, because it does not have indexed properties and `length`. - -And here's the object that is array-like, but not iterable: +І ось об’єкт, який є псевдомасивом, але не ітерованим об’єктом: ```js run -let arrayLike = { // has indexes and length => array-like +let arrayLike = { // має індекси та length => псевдомасив 0: "Hello", 1: "World", length: 2 }; *!* -// Error (no Symbol.iterator) +// Помилка (немає Symbol.iterator) for (let item of arrayLike) {} */!* ``` -Both iterables and array-likes are usually *not arrays*, they don't have `push`, `pop` etc. That's rather inconvenient if we have such an object and want to work with it as with an array. E.g. we would like to work with `range` using array methods. How to achieve that? +Обидва, ітерований об’єкт та псевдомасив, як правило є *не масивами*, вони не мають `push`,` pop` та ін. Це досить незручно, якщо у нас є такий об’єкт і ми хочемо працювати з ним як з масивом. Наприклад, ми хотіли б працювати з `angy` за допомогою методів масиву. Як цього досягти? ## Array.from -There's a universal method [Array.from](mdn:js/Array/from) that takes an iterable or array-like value and makes a "real" `Array` from it. Then we can call array methods on it. +Існує універсальний метод [Array.from](mdn:js/Array/from), який приймає ітерований об’єкт або псевдомасив і робить з нього "справжній" масив. Тоді ми можемо викликати на ньому методи масиву. -For instance: +Наприклад: ```js run let arrayLike = { - 0: "Hello", - 1: "World", + 0: "Привіт", + 1: "Світ", length: 2 }; *!* let arr = Array.from(arrayLike); // (*) */!* -alert(arr.pop()); // World (method works) +alert(arr.pop()); // Світ (метод працює) ``` -`Array.from` at the line `(*)` takes the object, examines it for being an iterable or array-like, then makes a new array and copies all items to it. +`Array.from` у рядку `(*)` бере об’єкт, перевіряє його на ітерабельність або те, що це псевдомасив, потім створює новий масив і копіює до нього всі елементи. -The same happens for an iterable: +Те ж саме відбувається і з ітерованим об’єктом: ```js -// assuming that range is taken from the example above +// припустимо, що діапазон взятий з наведеного вище прикладу let arr = Array.from(range); alert(arr); // 1,2,3,4,5 (array toString conversion works) ``` -The full syntax for `Array.from` also allows us to provide an optional "mapping" function: +Повний синтаксис для `Array.from` також дозволяє нам надати додаткову функцію "трансформації": ```js Array.from(obj[, mapFn, thisArg]) ``` The optional second argument `mapFn` can be a function that will be applied to each element before adding it to the array, and `thisArg` allows us to set `this` for it. -For instance: +Наприклад: ```js -// assuming that range is taken from the example above +// припустимо, що діапазон взятий з наведеного вище прикладу -// square each number +// порахуємо квадрат кожного числа let arr = Array.from(range, num => num * num); alert(arr); // 1,4,9,16,25 ``` -Here we use `Array.from` to turn a string into an array of characters: +Тут ми використовуємо `Array.from`, щоб перетворити рядок у масив символів: ```js run let str = '𝒳😂'; -// splits str into array of characters +// розіб’ємо рядок на масив символів let chars = Array.from(str); alert(chars[0]); // 𝒳 @@ -255,14 +254,14 @@ alert(chars[1]); // 😂 alert(chars.length); // 2 ``` -Unlike `str.split`, it relies on the iterable nature of the string and so, just like `for..of`, correctly works with surrogate pairs. +На відміну від `str.split`, він спирається на ітерабельний характер рядка і тому, так само, як `for..of`, коректно працює з сурогатними парами. -Technically here it does the same as: +Технічно тут це відбувається так само, як: ```js run let str = '𝒳😂'; -let chars = []; // Array.from internally does the same loop +let chars = []; // Array.from внутрішньо робить цей самий цикл for (let char of str) { chars.push(char); } @@ -270,9 +269,9 @@ for (let char of str) { alert(chars); ``` -...But it is shorter. +...Але це коротше. -We can even build surrogate-aware `slice` on it: +Ми навіть можемо побудувати на ньому `slice`, що підтримує сурогатні пари: ```js run function slice(str, start, end) { @@ -283,25 +282,26 @@ let str = '𝒳😂𩷶'; alert( slice(str, 1, 3) ); // 😂𩷶 -// the native method does not support surrogate pairs -alert( str.slice(1, 3) ); // garbage (two pieces from different surrogate pairs) +// нативний метод не підтримує сурогатні пари +alert( str.slice(1, 3) ); // сміття (дві частини з різних сурогатних пар) ``` -## Summary +## Підсумки -Objects that can be used in `for..of` are called *iterable*. +Об’єкти, які можна використовуватися у `for..of`, називаються *ітерованими*. -- Technically, iterables must implement the method named `Symbol.iterator`. - - The result of `obj[Symbol.iterator]()` is called an *iterator*. It handles further iteration process. +- Технічно ітеровані об’єкти повинні реалізовувати метод з назвою `Symbol.iterator`. + - Результат `obj[Symbol.iterator]()` називається *ітератором*. Він забезпечує подальший процес ітерації. - An iterator must have the method named `next()` that returns an object `{done: Boolean, value: any}`, here `done:true` denotes the end of the iteration process, otherwise the `value` is the next value. -- The `Symbol.iterator` method is called automatically by `for..of`, but we also can do it directly. -- Built-in iterables like strings or arrays, also implement `Symbol.iterator`. -- String iterator knows about surrogate pairs. + - Ітератор повинен мати метод з назвою `next()`, який повертає об’єкт `{done: Boolean, value: any}`, де `done: true` означає кінець процесу ітерації, інакше `value` є наступним значенням. +- Метод `Symbol.iterator` автоматично викликається `for..of`, але ми також можемо це зробити безпосередньо. +- Вбудовані ітеровані об’єкти, такі як рядки або масиви, також реалізують `Symbol.iterator`. +- Рядковий ітератор знає про сурогатні пари. -Objects that have indexed properties and `length` are called *array-like*. Such objects may also have other properties and methods, but lack the built-in methods of arrays. +Об’єкти, які мають індексовані властивості та `length`, називаються *псевдомасивами*. Такі об’єкти також можуть мати інші властивості та методи, але не мають вбудованих методів масивів. -If we look inside the specification -- we'll see that most built-in methods assume that they work with iterables or array-likes instead of "real" arrays, because that's more abstract. +Якщо ми заглянемо в специфікацію -- ми побачимо, що більшість вбудованих методів припускають, що вони працюють з ітерованими об’єктами або псевдомасивами замість "реальних" масивів, тому що це більш абстрактно. -`Array.from(obj[, mapFn, thisArg])` makes a real `Array` from an iterable or array-like `obj`, and we can then use array methods on it. The optional arguments `mapFn` and `thisArg` allow us to apply a function to each item. +`Array.from(obj[, mapFn, thisArg])` створює справжній `Array` з ітерованого об’єкту або псевдомасиву `obj`, і тоді ми можемо використовувати на ньому методи масиву. Необов’язкові аргументи `mapFn` та` thisArg` дозволяють нам застосовувати функції до кожного елемента.Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies: