From 6d87b819a927e33a43da5aa85013b197f9b440d5 Mon Sep 17 00:00:00 2001 From: inperegelion Date: Thu, 23 Jun 2022 19:56:58 +0300 Subject: [PATCH 1/3] translation(JS): /Web/JavaScript/Reference/Statements/for...of --- .../reference/statements/for...of/index.md | 331 ++++++++++++++++++ 1 file changed, 331 insertions(+) create mode 100644 files/uk/web/javascript/reference/statements/for...of/index.md diff --git a/files/uk/web/javascript/reference/statements/for...of/index.md b/files/uk/web/javascript/reference/statements/for...of/index.md new file mode 100644 index 0000000000..69476202f1 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/for...of/index.md @@ -0,0 +1,331 @@ +--- +title: for...of +slug: Web/JavaScript/Reference/Statements/for...of +tags: + - ECMAScript 2015 + - ES6 + - JavaScript + - Language feature + - Reference + - Statement +browser-compat: javascript.statements.for_of +--- +{{jsSidebar("Statements")}} + +**Конструкція `for...of`** створює цикл, який ітерує +[ітеративні обʼєкти](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol), +включаючи: вбудовані {{jsxref("String")}}, {{jsxref("Array")}}, +масивоподібні обʼєкти (на кшталт, {{jsxref("Functions/arguments", "arguments")}} +чи {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, +{{jsxref("Set")}}, а також ітеративні обʼєкти, які користувач створив сам. Ця конструкція викликає описаний набір інструкцій, які будуть виконані для значення для кожної властивості обʼєкту. + +{{EmbedInteractiveExample("pages/js/statement-forof.html")}} + +## Синтаксис + +```js +for (variable of iterable) { + statement +} +``` + +` + +- `variable` + - : На кожній ітерації значення різних властивостей будуть призначатися у `variable`. `variable` може бути оголошеним з використанням `const`, `let`, чи `var`. +- `iterable` + - : Обʼєкт, ітеровані властивості якого будуть ітеруватися. + +## Приклади + +### Ітерування по `Array` + +```js +const iterable = [10, 20, 30]; + +for (const value of iterable) { + console.log(value); +} +// 10 +// 20 +// 30 +``` + +Ви можете використовувати також {{jsxref("Statements/let", "let")}} замість {{jsxref("Statements/const", + "const")}}, якщо робите повторне присвоєння цієї змінної всередині блоку. + +```js +const iterable = [10, 20, 30]; + +for (let value of iterable) { + value += 1; + console.log(value); +} +// 11 +// 21 +// 31 +``` + +### Ітерування по `String` + +```js +const iterable = 'boo'; + +for (const value of iterable) { + console.log(value); +} +// "b" +// "o" +// "o" +``` + +### Ітерування по `TypedArray` + +```js +const iterable = new Uint8Array([0x00, 0xff]); + +for (const value of iterable) { + console.log(value); +} +// 0 +// 255 +``` + +### Ітерування по `Map` + +```js +const iterable = new Map([['а', 1], ['б', 2], ['в', 3]]); + +for (const entry of iterable) { + console.log(entry); +} +// ['а', 1] +// ['б', 2] +// ['в', 3] + +for (const [key, value] of iterable) { + console.log(value); +} +// 1 +// 2 +// 3 +``` + +### Ітерування по `Set` + +```js +const iterable = new Set([1, 1, 2, 2, 3, 3]); + +for (const value of iterable) { + console.log(value); +} +// 1 +// 2 +// 3 +``` + +### Ітерування по обʼєкту `arguments` + +Ви можете ітерувати по обʼєкту {{jsxref("Functions/arguments", "arguments")}} щоб обстежити усі параметри передані до JavaScript функції: + +```js +(function() { + for (const argument of arguments) { + console.log(argument); + } +})(1, 2, 3); + +// 1 +// 2 +// 3 +``` + +### Ітерування по DOM колекції + +Ітерування по DOM колекціям, таким як [`NodeList`](/en-US/docs/Web/API/NodeList): подальший приклад додає клас `read` до параграфів, які є прямими спадкоємцями елементу `article`: + +```js +// Зазначте: Це буде працювати виключно на платформах, які мають реалізацію для +// NodeList.prototype[Symbol.iterator] +const articleParagraphs = document.querySelectorAll('article > p'); + +for (const paragraph of articleParagraphs) { + paragraph.classList.add('read'); +} +``` + +### Завершення ітераторів + +У `for...of` циклах, різке переривання ітерації може бути спричинене операторами `break`, `throw` чи `return`. У таких випадках ітератор буде завершено. + +```js +function* foo(){ + yield 1; + yield 2; + yield 3; +}; + +for (const o of foo()) { + console.log(o); + break; // завершує ітератор, продовжується виконання коду поза конструкцією циклу +} +console.log('готово'); +``` + +### Ітерування по генераторах + +Також ви можете ітерувати [генератори](/en-US/docs/Web/JavaScript/Reference/Statements/function*), тобто функції, які генерують ітерований обʼєкт. + +```js +function* fibonacci() { // функція-генератор + let [prev, curr] = [0, 1]; + while (true) { + [prev, curr] = [curr, prev + curr]; + yield curr; + } +} + +for (const n of fibonacci()) { + console.log(n); + // зупинити послідовність на 1000 + if (n >= 1000) { + break; + } +} +``` + +#### Не слід повторно використовувати генератори + +Генератори не варто використовувати кілька разів, навіть, якщо цикл `for...of` закінчився завчасно, наприклад, через ключове слово {{jsxref("Statements/break", "break")}}. Під час виходу з циклу, генератор закривається та подальші спроби ітерувати його знову не виведуть жодних значень. + +```js example-bad +const gen = (function *(){ + yield 1; + yield 2; + yield 3; +})(); +for (const o of gen) { + console.log(o); + break; // Завершує ітератор +} + +// Цей самий ітератор не має бути використаний повторно, подальший код не має сенсу! +for (const o of gen) { + console.log(o); // Ніколи не буде викличено. +} +``` + +### Ітерування по інших ітеративних обʼєктах + +Ви можете також ітерувати по обʼєкту, який явно реалізовує [ітеративний протокол](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable): + +```js +const iterable = { + [Symbol.iterator]() { + return { + i: 0, + next() { + if (this.i < 3) { + return { value: this.i++, done: false }; + } + return { value: undefined, done: true }; + } + }; + } +}; + +for (const value of iterable) { + console.log(value); +} +// 0 +// 1 +// 2 +``` + +### Різниця між `for...of` та `for...in` + +Обидві конструкції `for...in` та `for...of` здатні ітерувати по чомусь. +Основна різниця в тому "що" вони ітерують. + +{{jsxref("Statements/for...in", "for...in")}} ітерує по [зліченних властивостях](/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) обʼєкта. + +`for...of` ітерує значення, які [ітеративний обʼєкт](/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#iterables) визначає як такі які можна ітерувати. + +Наступний приклад показує різницю між циклом `for...of` та циклом +`for...in` при застосуванні до {{jsxref("Array")}. + +```js +Object.prototype.objCustom = function() {}; +Array.prototype.arrCustom = function() {}; + +const iterable = [3, 5, 7]; +iterable.foo = 'Агов'; + +for (const i in iterable) { + console.log(i); // виведе "0", "1", "2", "foo", "arrCustom", "objCustom" +} + +for (const i in iterable) { + if (iterable.hasOwnProperty(i)) { + console.log(i); // виведе "0", "1", "2", "foo" + } +} + +for (const i of iterable) { + console.log(i); // виведе 3, 5, 7 +} +``` + +Розгляньмо код, зазначений вище, крок за кроком. + +```js +Object.prototype.objCustom = function() {}; +Array.prototype.arrCustom = function() {}; + +const iterable = [3, 5, 7]; +iterable.foo = 'Агов'; +``` + +Кожен обʼєкт успадковує властивість `objCustom`, а також, кожен обʼєкт, який є {{jsxref("Array")}} успадковує властивість `arrCustom`, адже ці властивості були додані до {{jsxref("Object", "Object.prototype")}} і {{jsxref("Array", "Array.prototype")}}, відповідно. А обʼєкт `iterable` наслідує властивості `objCustom` і `arrCustom` через [ланцюжок наслідування від прототипів](/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain). + +```js +for (const i in iterable) { + console.log(i); // виведе 0, 1, 2, "foo", "arrCustom", "objCustom" +} +``` + +Цей цикл виведе лише [зліченні властивості](/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) обʼєкта `iterable`. Він не виведе масив **елементи** `3`, `5`, `7` чи +`Агов`, адже вони **не є** зліченними властивостями, насправді вони не є властивостями взагалі, вони є **значеннями**. Код виведе масив **індексів** включаючи `arrCustom` і `objCustom`. Якщо ви не певні чому саме по цим властивостям відбувається ітерація, то існує більш детальне пояснення у статті {{jsxref("Statements/for...in", "array iteration and for...in", "#Array_iteration_and_for...in")}}. + +```js +for (const i in iterable) { + if (iterable.hasOwnProperty(i)) { + console.log(i); // виведе 0, 1, 2, "foo" + } +} +``` + +Цей цикл подібний до першого, але натомість використовує {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}}, щоб перевірити чи зліченні властивості належать до власних властивостей обʼєкта, а не наслідуваних. Якщо належать, то вивести властивість. Властивості `0`, `1`, `2` та `foo` виведено, адже вони є власними властивостями(**не успадковані**). Властивості `arrCustom` і `objCustom` не виведено, адже вони **успадковані**. + +```js +for (const i of iterable) { + console.log(i); // виведе 3, 5, 7 +} +``` + +Цей цикл ітерує та виводить **значення**, які [ітеративний обʼєкт](/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#iterables), визначає такими, що їх можна ітерувати, `iterable`. **Елементи** +`3`, `5`, `7` виведено, а **властивості** -- ні. + +## Специфікації + +{{Specifications}} + +## Сумісність з браузерами + +{{Compat}} + +## Дивіться також + +- {{jsxref("Array.prototype.forEach()")}} +- {{jsxref("Map.prototype.forEach()")}} +- {{jsxref("Object.entries()")}} – Знадобиться при використанні **`for...of`** для обʼєктів. From e33cbc22ef2a10ef1401b9a47cd909d58e02d79d Mon Sep 17 00:00:00 2001 From: inperegelion <31827598+inperegelion@users.noreply.github.com> Date: Fri, 24 Jun 2022 16:59:54 +0300 Subject: [PATCH 2/3] translation(JS): /Web/JavaScript/Reference/Statements/for...of review remarks Co-authored-by: Vitalii Perehonchuk Co-authored-by: Mykola Myslovskyi --- .../reference/statements/for...of/index.md | 69 +++++++++---------- 1 file changed, 34 insertions(+), 35 deletions(-) diff --git a/files/uk/web/javascript/reference/statements/for...of/index.md b/files/uk/web/javascript/reference/statements/for...of/index.md index 69476202f1..b4cc08aa30 100644 --- a/files/uk/web/javascript/reference/statements/for...of/index.md +++ b/files/uk/web/javascript/reference/statements/for...of/index.md @@ -12,12 +12,12 @@ browser-compat: javascript.statements.for_of --- {{jsSidebar("Statements")}} -**Конструкція `for...of`** створює цикл, який ітерує -[ітеративні обʼєкти](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol), +**Конструкція `for...of`** створює цикл, який виконує обхід +[ітерованих обʼєктів](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol), включаючи: вбудовані {{jsxref("String")}}, {{jsxref("Array")}}, -масивоподібні обʼєкти (на кшталт, {{jsxref("Functions/arguments", "arguments")}} +масивоподібні обʼєкти (наприклад, {{jsxref("Functions/arguments", "arguments")}} чи {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, -{{jsxref("Set")}}, а також ітеративні обʼєкти, які користувач створив сам. Ця конструкція викликає описаний набір інструкцій, які будуть виконані для значення для кожної властивості обʼєкту. +{{jsxref("Set")}}, а також ітеровані обʼєкти, які користувач створив сам. Ця конструкція викликає описаний набір інструкцій, які будуть виконані для значення кожної властивості обʼєкту. {{EmbedInteractiveExample("pages/js/statement-forof.html")}} @@ -29,16 +29,15 @@ for (variable of iterable) { } ``` -` - `variable` - - : На кожній ітерації значення різних властивостей будуть призначатися у `variable`. `variable` може бути оголошеним з використанням `const`, `let`, чи `var`. + - : На кожній ітерації значення різних властивостей присвоюються змінній `variable`. Ця `variable` може бути оголошеною з використанням `const`, `let`, чи `var`. - `iterable` - - : Обʼєкт, ітеровані властивості якого будуть ітеруватися. + - : Обʼєкт, ітеровані властивості якого піддаються обходу. ## Приклади -### Ітерування по `Array` +### Обхід циклу по `Array` ```js const iterable = [10, 20, 30]; @@ -51,8 +50,8 @@ for (const value of iterable) { // 30 ``` -Ви можете використовувати також {{jsxref("Statements/let", "let")}} замість {{jsxref("Statements/const", - "const")}}, якщо робите повторне присвоєння цієї змінної всередині блоку. +Також можна використати {{jsxref("Statements/let", "let")}} замість {{jsxref("Statements/const", + "const")}}, якщо всередині блоку виконується переприсвоєння змінної. ```js const iterable = [10, 20, 30]; @@ -66,7 +65,7 @@ for (let value of iterable) { // 31 ``` -### Ітерування по `String` +### Обхід циклу по `String` ```js const iterable = 'boo'; @@ -79,7 +78,7 @@ for (const value of iterable) { // "o" ``` -### Ітерування по `TypedArray` +### Обхід циклу по `TypedArray` ```js const iterable = new Uint8Array([0x00, 0xff]); @@ -91,7 +90,7 @@ for (const value of iterable) { // 255 ``` -### Ітерування по `Map` +### Обхід циклу по `Map` ```js const iterable = new Map([['а', 1], ['б', 2], ['в', 3]]); @@ -111,7 +110,7 @@ for (const [key, value] of iterable) { // 3 ``` -### Ітерування по `Set` +### Обхід циклу по `Set` ```js const iterable = new Set([1, 1, 2, 2, 3, 3]); @@ -126,7 +125,7 @@ for (const value of iterable) { ### Ітерування по обʼєкту `arguments` -Ви можете ітерувати по обʼєкту {{jsxref("Functions/arguments", "arguments")}} щоб обстежити усі параметри передані до JavaScript функції: +Щоб дослідити усі параметри, передані до JavaScript функції, можна виконати обхід об‘єкту {{jsxref("Functions/arguments", "arguments")}}: ```js (function() { @@ -140,12 +139,12 @@ for (const value of iterable) { // 3 ``` -### Ітерування по DOM колекції +### Обхід циклу по DOM колекції Ітерування по DOM колекціям, таким як [`NodeList`](/en-US/docs/Web/API/NodeList): подальший приклад додає клас `read` до параграфів, які є прямими спадкоємцями елементу `article`: ```js -// Зазначте: Це буде працювати виключно на платформах, які мають реалізацію для +// Примітка: Це буде працювати виключно на тих платформах, які мають реалізацію // NodeList.prototype[Symbol.iterator] const articleParagraphs = document.querySelectorAll('article > p'); @@ -156,7 +155,7 @@ for (const paragraph of articleParagraphs) { ### Завершення ітераторів -У `for...of` циклах, різке переривання ітерації може бути спричинене операторами `break`, `throw` чи `return`. У таких випадках ітератор буде завершено. +У циклах `for...of` операторами `break`, `throw` та `return` може бути спричинено різке переривання ітерації. У таких випадках ітератор буде завершено. ```js function* foo(){ @@ -167,14 +166,14 @@ function* foo(){ for (const o of foo()) { console.log(o); - break; // завершує ітератор, продовжується виконання коду поза конструкцією циклу + break; // завершує ітератор, виконання коду продовжується поза циклом } console.log('готово'); ``` -### Ітерування по генераторах +### Обхід циклу по генераторах -Також ви можете ітерувати [генератори](/en-US/docs/Web/JavaScript/Reference/Statements/function*), тобто функції, які генерують ітерований обʼєкт. +Також можна виконувати обхід [генераторів](/uk/docs/Web/JavaScript/Reference/Statements/function*), тобто функцій, які утворюють ітерований обʼєкт. ```js function* fibonacci() { // функція-генератор @@ -196,7 +195,7 @@ for (const n of fibonacci()) { #### Не слід повторно використовувати генератори -Генератори не варто використовувати кілька разів, навіть, якщо цикл `for...of` закінчився завчасно, наприклад, через ключове слово {{jsxref("Statements/break", "break")}}. Під час виходу з циклу, генератор закривається та подальші спроби ітерувати його знову не виведуть жодних значень. +Генератори не варто використовувати кілька разів, навіть якщо цикл `for...of` закінчився завчасно, наприклад, зустрівши ключове слово {{jsxref("Statements/break", "break")}}. Під час виходу з циклу генератор закривається, подальші спроби обходити його знову не виведуть жодних значень. ```js example-bad const gen = (function *(){ @@ -209,15 +208,15 @@ for (const o of gen) { break; // Завершує ітератор } -// Цей самий ітератор не має бути використаний повторно, подальший код не має сенсу! +// Цей самий ітератор не має бути використаний повторно, код нижче не має сенсу! for (const o of gen) { - console.log(o); // Ніколи не буде викличено. + console.log(o); // Ніколи не буде викликано. } ``` ### Ітерування по інших ітеративних обʼєктах -Ви можете також ітерувати по обʼєкту, який явно реалізовує [ітеративний протокол](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable): +Також можна обходити об‘єкт, який явно реалізовує [ітеративний протокол](/uk/docs/Web/JavaScript/Reference/Iteration_protocols#iterovanyi-obiekt): ```js const iterable = { @@ -244,12 +243,12 @@ for (const value of iterable) { ### Різниця між `for...of` та `for...in` -Обидві конструкції `for...in` та `for...of` здатні ітерувати по чомусь. -Основна різниця в тому "що" вони ітерують. +Обидві конструкції, `for...in` і `for...of`, здатні щось обходити. +Основна різниця в тому, що саме вони обходять. -{{jsxref("Statements/for...in", "for...in")}} ітерує по [зліченних властивостях](/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) обʼєкта. +{{jsxref("Statements/for...in", "for...in")}} виконує обхід [перелічуваних властивостей](/uk/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) обʼєкта. -`for...of` ітерує значення, які [ітеративний обʼєкт](/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#iterables) визначає як такі які можна ітерувати. +`for...of` обходить значення, які [ітеративний обʼєкт](/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#iterables) визначає як такі, котрі слід обходити. Наступний приклад показує різницю між циклом `for...of` та циклом `for...in` при застосуванні до {{jsxref("Array")}. @@ -286,7 +285,7 @@ const iterable = [3, 5, 7]; iterable.foo = 'Агов'; ``` -Кожен обʼєкт успадковує властивість `objCustom`, а також, кожен обʼєкт, який є {{jsxref("Array")}} успадковує властивість `arrCustom`, адже ці властивості були додані до {{jsxref("Object", "Object.prototype")}} і {{jsxref("Array", "Array.prototype")}}, відповідно. А обʼєкт `iterable` наслідує властивості `objCustom` і `arrCustom` через [ланцюжок наслідування від прототипів](/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain). +Кожен обʼєкт успадковує властивість `objCustom`, а також – кожен обʼєкт, який є {{jsxref("Array")}}, успадковує властивість `arrCustom`, адже ці властивості були додані до {{jsxref("Object", "Object.prototype")}} і {{jsxref("Array", "Array.prototype")}}, відповідно. А обʼєкт `iterable` наслідує властивості `objCustom` і `arrCustom` у зв‘язку з [успадкуванням і ланцюжком прототипів](/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain). ```js for (const i in iterable) { @@ -294,8 +293,8 @@ for (const i in iterable) { } ``` -Цей цикл виведе лише [зліченні властивості](/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) обʼєкта `iterable`. Він не виведе масив **елементи** `3`, `5`, `7` чи -`Агов`, адже вони **не є** зліченними властивостями, насправді вони не є властивостями взагалі, вони є **значеннями**. Код виведе масив **індексів** включаючи `arrCustom` і `objCustom`. Якщо ви не певні чому саме по цим властивостям відбувається ітерація, то існує більш детальне пояснення у статті {{jsxref("Statements/for...in", "array iteration and for...in", "#Array_iteration_and_for...in")}}. +Цей цикл виведе лише [перелічувані властивості](/uk/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) обʼєкта `iterable`. Він не виведе **елементи** масиву: `3`, `5`, `7` чи +`Агов`, адже вони **не є** перелічуваними властивостями; насправді вони не є властивостями взагалі, а лише **значеннями**. Код виведе масив **індексів**, включаючи `arrCustom` і `objCustom`. Якщо ви не певні, чому саме по цих властивостях відбувається ітерація, то зверніть увагу на більш детальне пояснення у статті {{jsxref("Statements/for...in", "array iteration and for...in", "#Array_iteration_and_for...in")}}. ```js for (const i in iterable) { @@ -305,7 +304,7 @@ for (const i in iterable) { } ``` -Цей цикл подібний до першого, але натомість використовує {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}}, щоб перевірити чи зліченні властивості належать до власних властивостей обʼєкта, а не наслідуваних. Якщо належать, то вивести властивість. Властивості `0`, `1`, `2` та `foo` виведено, адже вони є власними властивостями(**не успадковані**). Властивості `arrCustom` і `objCustom` не виведено, адже вони **успадковані**. +Цей цикл подібний до першого, але натомість використовує {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}}, щоб перевірити чи належать перелічувані властивості до власних властивостей обʼєкта, а не успадкованих. Якщо належать, то вивести властивість. Властивості `0`, `1`, `2` та `foo` виведено, адже вони є власними властивостями (**не успадкованими**). Властивості `arrCustom` і `objCustom` не виведено, адже вони **успадковані**. ```js for (const i of iterable) { @@ -313,14 +312,14 @@ for (const i of iterable) { } ``` -Цей цикл ітерує та виводить **значення**, які [ітеративний обʼєкт](/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#iterables), визначає такими, що їх можна ітерувати, `iterable`. **Елементи** +Цей цикл ітерує та виводить **значення**, які [ітерований обʼєкт](/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators#iterovani-obiekty) визначає такими, що їх слід обходити. **Елементи** `3`, `5`, `7` виведено, а **властивості** -- ні. ## Специфікації {{Specifications}} -## Сумісність з браузерами +## Сумісність із браузерами {{Compat}} From 1939604e39aadbd5fb3ee1b495cb9b24a078d01c Mon Sep 17 00:00:00 2001 From: inperegelion Date: Fri, 24 Jun 2022 17:13:48 +0300 Subject: [PATCH 3/3] translation(JS): /Web/JavaScript/Reference/Statements/for...of --- .../reference/statements/for...of/index.md | 29 +++++++------------ 1 file changed, 11 insertions(+), 18 deletions(-) diff --git a/files/uk/web/javascript/reference/statements/for...of/index.md b/files/uk/web/javascript/reference/statements/for...of/index.md index b4cc08aa30..0e77b1946e 100644 --- a/files/uk/web/javascript/reference/statements/for...of/index.md +++ b/files/uk/web/javascript/reference/statements/for...of/index.md @@ -12,8 +12,7 @@ browser-compat: javascript.statements.for_of --- {{jsSidebar("Statements")}} -**Конструкція `for...of`** створює цикл, який виконує обхід -[ітерованих обʼєктів](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol), +**Конструкція `for...of`** створює цикл, який виконує обхід [ітерованих обʼєктів](/uk/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol), включаючи: вбудовані {{jsxref("String")}}, {{jsxref("Array")}}, масивоподібні обʼєкти (наприклад, {{jsxref("Functions/arguments", "arguments")}} чи {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, @@ -29,7 +28,6 @@ for (variable of iterable) { } ``` - - `variable` - : На кожній ітерації значення різних властивостей присвоюються змінній `variable`. Ця `variable` може бути оголошеною з використанням `const`, `let`, чи `var`. - `iterable` @@ -50,8 +48,7 @@ for (const value of iterable) { // 30 ``` -Також можна використати {{jsxref("Statements/let", "let")}} замість {{jsxref("Statements/const", - "const")}}, якщо всередині блоку виконується переприсвоєння змінної. +Також можна використати {{jsxref("Statements/let", "let")}} замість {{jsxref("Statements/const", "const")}}, якщо всередині блоку виконується переприсвоєння змінної. ```js const iterable = [10, 20, 30]; @@ -123,7 +120,7 @@ for (const value of iterable) { // 3 ``` -### Ітерування по обʼєкту `arguments` +### Обхід циклу по обʼєкту `arguments` Щоб дослідити усі параметри, передані до JavaScript функції, можна виконати обхід об‘єкту {{jsxref("Functions/arguments", "arguments")}}: @@ -141,7 +138,7 @@ for (const value of iterable) { ### Обхід циклу по DOM колекції -Ітерування по DOM колекціям, таким як [`NodeList`](/en-US/docs/Web/API/NodeList): подальший приклад додає клас `read` до параграфів, які є прямими спадкоємцями елементу `article`: +Ітерування по DOM колекціям, таким як [`NodeList`](/uk/docs/Web/API/NodeList): подальший приклад додає клас `read` до параграфів, які є прямими спадкоємцями елементу `article`: ```js // Примітка: Це буде працювати виключно на тих платформах, які мають реалізацію @@ -214,9 +211,9 @@ for (const o of gen) { } ``` -### Ітерування по інших ітеративних обʼєктах +### Обхід циклу по інших ітерованих об‘єктах -Також можна обходити об‘єкт, який явно реалізовує [ітеративний протокол](/uk/docs/Web/JavaScript/Reference/Iteration_protocols#iterovanyi-obiekt): +Також можна обходити об‘єкт, який явно реалізовує [ітеративний протокол](/uk/docs/Web/JavaScript/Reference/Iteration_protocols#iterable): ```js const iterable = { @@ -243,15 +240,13 @@ for (const value of iterable) { ### Різниця між `for...of` та `for...in` -Обидві конструкції, `for...in` і `for...of`, здатні щось обходити. -Основна різниця в тому, що саме вони обходять. +Обидві конструкції, `for...in` і `for...of`, здатні щось обходити. Основна різниця в тому, що саме вони обходять. {{jsxref("Statements/for...in", "for...in")}} виконує обхід [перелічуваних властивостей](/uk/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) обʼєкта. -`for...of` обходить значення, які [ітеративний обʼєкт](/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#iterables) визначає як такі, котрі слід обходити. +`for...of` обходить значення, які [ітерований обʼєкт](/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators#iterables) визначає як такі, котрі слід обходити. -Наступний приклад показує різницю між циклом `for...of` та циклом -`for...in` при застосуванні до {{jsxref("Array")}. +Наступний приклад показує різницю між циклом `for...of` та циклом `for...in` при застосуванні до {{jsxref("Array")}. ```js Object.prototype.objCustom = function() {}; @@ -293,8 +288,7 @@ for (const i in iterable) { } ``` -Цей цикл виведе лише [перелічувані властивості](/uk/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) обʼєкта `iterable`. Він не виведе **елементи** масиву: `3`, `5`, `7` чи -`Агов`, адже вони **не є** перелічуваними властивостями; насправді вони не є властивостями взагалі, а лише **значеннями**. Код виведе масив **індексів**, включаючи `arrCustom` і `objCustom`. Якщо ви не певні, чому саме по цих властивостях відбувається ітерація, то зверніть увагу на більш детальне пояснення у статті {{jsxref("Statements/for...in", "array iteration and for...in", "#Array_iteration_and_for...in")}}. +Цей цикл виведе лише [перелічувані властивості](/uk/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) обʼєкта `iterable`. Він не виведе **елементи** масиву: `3`, `5`, `7` чи `Агов`, адже вони **не є** перелічуваними властивостями; насправді вони не є властивостями взагалі, а лише **значеннями**. Код виведе масив **індексів**, включаючи `arrCustom` і `objCustom`. Якщо ви не певні, чому саме по цих властивостях відбувається ітерація, то зверніть увагу на більш детальне пояснення у статті {{jsxref("Statements/for...in", "array iteration and for...in", "#Array_iteration_and_for...in")}}. ```js for (const i in iterable) { @@ -312,8 +306,7 @@ for (const i of iterable) { } ``` -Цей цикл ітерує та виводить **значення**, які [ітерований обʼєкт](/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators#iterovani-obiekty) визначає такими, що їх слід обходити. **Елементи** -`3`, `5`, `7` виведено, а **властивості** -- ні. +Цей цикл ітерує та виводить **значення**, які [ітерований обʼєкт](/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators#iterables) визначає такими, що їх слід обходити. **Елементи** `3`, `5`, `7` виведено, а **властивості** -- ні. ## Специфікації