From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- .../reference/statements/for...of/index.html | 319 +++++++++++++++++++++ 1 file changed, 319 insertions(+) create mode 100644 files/uk/web/javascript/reference/statements/for...of/index.html (limited to 'files/uk/web/javascript/reference/statements/for...of/index.html') diff --git a/files/uk/web/javascript/reference/statements/for...of/index.html b/files/uk/web/javascript/reference/statements/for...of/index.html new file mode 100644 index 0000000000..dc4ebaf7b8 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/for...of/index.html @@ -0,0 +1,319 @@ +--- +title: for...of +slug: Web/JavaScript/Reference/Statements/for...of +tags: + - ECMAScript 2015 + - ES6 + - JavaScript + - Довідка +translation_of: Web/JavaScript/Reference/Statements/for...of +--- +
{{jsSidebar("Statements")}}
+ +

Конструкція for...of створює цикл, що перебирає ітерабельні об'єкти, в тому числі: вбудовані {{jsxref("String")}}, {{jsxref("Array")}}, подібні до масиву об'єкти (наприклад, {{jsxref("Functions/arguments", "arguments")}} або {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, а також визначені користувачем ітерабельні об'єкти. Він викликає користувацький хук до ітерацій з командами, що виконуються для значення кожної окремої властивості об'єкта.

+ +
{{EmbedInteractiveExample("pages/js/statement-forof.html")}}
+ + + +

Синтаксис

+ +
for (variable of iterable) {
+  statement
+}
+
+ +
+
variable
+
На кожній ітерації параметру variable призначається значення іншої властивості. Параметр variable може бути оголошений через const, let або var.
+
iterable
+
Об'єкт, чиї ітерабельні властивості перебираються.
+
+ +

Приклади

+ +

Перебір об'єкта {{jsxref("Array")}}

+ +
let iterable = [10, 20, 30];
+
+for (let value of iterable) {
+  value += 1;
+  console.log(value);
+}
+// 11
+// 21
+// 31
+
+ +

Ви також можете використати const замість let, якщо не переприсвоюєте змінну всередині блоку.

+ +
let iterable = [10, 20, 30];
+
+for (const value of iterable) {
+  console.log(value);
+}
+// 10
+// 20
+// 30
+
+ +

Перебір об'єкта {{jsxref("String")}}

+ +
let iterable = 'фух';
+
+for (let value of iterable) {
+  console.log(value);
+}
+// "ф"
+// "у"
+// "х"
+
+ +

Перебір об'єкта {{jsxref("TypedArray")}}

+ +
let iterable = new Uint8Array([0x00, 0xff]);
+
+for (let value of iterable) {
+  console.log(value);
+}
+// 0
+// 255
+
+ +

Перебір об'єкта {{jsxref("Map")}}

+ +
let iterable = new Map([['а', 1], ['б', 2], ['в', 3]]);
+
+for (let entry of iterable) {
+  console.log(entry);
+}
+// ['а', 1]
+// ['б', 2]
+// ['в', 3]
+
+for (let [key, value] of iterable) {
+  console.log(value);
+}
+// 1
+// 2
+// 3
+
+ +

Перебір об'єкта {{jsxref("Set")}}

+ +
let iterable = new Set([1, 1, 2, 2, 3, 3]);
+
+for (let value of iterable) {
+  console.log(value);
+}
+// 1
+// 2
+// 3
+
+ +

Перебір об'єкта arguments

+ +

Ви можете перебирати об'єкт {{jsxref("Functions/arguments", "arguments")}}, щоб дослідити усі параметри, передані у функцію JavaScript:

+ +
(function() {
+  for (let argument of arguments) {
+    console.log(argument);
+  }
+})(1, 2, 3);
+
+// 1
+// 2
+// 3
+ +

Перебір колекції DOM-елементів

+ +

Перебір колекцій DOM-елементів, таких як {{domxref("NodeList")}}: наступний приклад додає клас read до вузлів paragraph, які є прямими нащадками вузла article:

+ +
// Заувага: Це працюватиме лише у платформах, де
+// реалізовано NodeList.prototype[Symbol.iterator]
+let articleParagraphs = document.querySelectorAll('article > p');
+
+for (let paragraph of articleParagraphs) {
+  paragraph.classList.add('read');
+}
+
+ +

Закриття ітераторів

+ +

У циклах for...of раптове переривання ітерації може бути спричинено операторами break, throw або return. У цих випадках ітератор закривається.

+ +
function* foo(){
+  yield 1;
+  yield 2;
+  yield 3;
+};
+
+for (let o of foo()) {
+  console.log(o);
+  break; // закриває ітератор, виконання продовжується поза циклом
+}
+console.log('done');
+
+ +

Перебір генераторів

+ +

Ви також можете перебирати генератори, тобто, функції, що генерують ітерабельні об'єкти:

+ +
function* fibonacci() { // функція-генератор
+  let [prev, curr] = [0, 1];
+  while (true) {
+    [prev, curr] = [curr, prev + curr];
+    yield curr;
+  }
+}
+
+for (let n of fibonacci()) {
+  console.log(n);
+  // обрізати послідовність на 1000
+  if (n >= 1000) {
+    break;
+  }
+}
+
+ +

Не використовуйте генератори повторно

+ +

Генератори не можна використовувати повторно, навіть якщо цикл for...of завчасно перервався, наприклад, ключовим словом {{jsxref("Statements/break", "break")}}. На виході з циклу генератор закривається, і спроби викликати його знову не дадуть подальших результатів.

+ +
let gen = (function *(){
+  yield 1;
+  yield 2;
+  yield 3;
+})();
+for (let o of gen) {
+  console.log(o);
+  break;  // закриває ітератор
+}
+
+// Генератор не можна використовувати знову, наступне не має сенсу!
+for (let o of gen) {
+  console.log(o); // Ніколи не виконається.
+}
+
+ +

Перебір інших ітерабельних об'єктів

+ +

Ви також можете перебирати об'єкт, який відкрито реалізує протокол ітерабельного:

+ +
let iterable = {
+  [Symbol.iterator]() {
+    return {
+      i: 0,
+      next() {
+        if (this.i < 3) {
+          return { value: this.i++, done: false };
+        }
+        return { value: undefined, done: true };
+      }
+    };
+  }
+};
+
+for (let value of iterable) {
+  console.log(value);
+}
+// 0
+// 1
+// 2
+
+ +

Різниця між for...of та for...in

+ +

І цикл for...in, і цикл for...of щось перебирають. Головна різниця між ними полягає в тому, що саме вони перебирають.

+ +

Цикл {{jsxref("Statements/for...in", "for...in")}} перебирає перелічувані властивості об'єкта, у довільному порядку.

+ +

Цикл for...of перебирає значення, які ітерабельний об'єкт визначає для перебирання.

+ +

Наступний приклад демонструє різницю між циклом for...of та циклом for...in при використанні з {{jsxref("Array", "масивом")}}.

+ +
Object.prototype.objCustom = function() {};
+Array.prototype.arrCustom = function() {};
+
+let iterable = [3, 5, 7];
+iterable.foo = 'привіт';
+
+for (let i in iterable) {
+  console.log(i); // виведе 0, 1, 2, "foo", "arrCustom", "objCustom"
+}
+
+for (let i in iterable) {
+  if (iterable.hasOwnProperty(i)) {
+    console.log(i); // виведе 0, 1, 2, "foo"
+  }
+}
+
+for (let i of iterable) {
+  console.log(i); // виведе 3, 5, 7
+}
+
+ +

Розглянемо наведений код крок за кроком.

+ +
Object.prototype.objCustom = function() {};
+Array.prototype.arrCustom = function() {};
+
+let iterable = [3, 5, 7];
+iterable.foo = 'привіт';
+ +

Кожний об'єкт успадковуватиме властивість objCustom і кожний об'єкт, що є об'єктом {{jsxref("Array")}}, успадковуватиме властивість arrCustom, оскільки ці властивості були додані у {{jsxref("Object.prototype")}} та {{jsxref("Array.prototype")}} відповідно. Об'єкт iterable успадковує властивості objCustom та arrCustom через наслідування та ланцюжок прототипів.

+ +
for (let i in iterable) {
+  console.log(i); // виведе 0, 1, 2, "foo", "arrCustom", "objCustom"
+}
+ +

Цей цикл виводить тільки перелічувані властивості об'єкта iterable, у довільному порядку. Він не виводить елементи масиву 3, 5, 7 або привіт, оскільки вони не є перелічуваними властивостями, власне, вони взагалі не є властивостями, вони є значеннями. Цикл виводить індекси масиву, а також arrCustom та objCustom, які є властивостями. Якщо ви не певні, чому ці властивості перебираються, є більш детальне пояснення того, як працює {{jsxref("Statements/for...in", "перебір масиву та for...in", "#Перебір_масиву_та_for...in")}}.

+ +
for (let 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 не виводяться, оскільки вони успадковані.

+ +
for (let i of iterable) {
+  console.log(i); // виведе 3, 5, 7
+}
+ +

Цей цикл перебирає та виводить значення, які iterable як ітерабельний об'єкт визначає для перебору. Елементи об'єкта 3, 5, 7 виводяться, але немає жодної з властивостей об'єкта.

+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-for-in-and-for-of-statements', 'for...of statement')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...of statement')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.statements.for_of")}}

+ +

Див. також

+ + -- cgit v1.2.3-54-g00ecf