JavaRush /Курси /Frontend SELF UA /Цикли for...of і for…in

Цикли for...of і for…in

Frontend SELF UA
Рівень 34 , Лекція 3
Відкрита

Цикл for...of

Цикли for...of та for...in надають зручні способи ітерації по елементах масивів і властивостям об'єктів у JavaScript. Обидва цикли використовуються для перебору, але застосовуються в різних ситуаціях.

Цикл for...of

Цикл for...of призначений для ітерації по ітерованих об'єктах (таких як масиви, рядки, об'єкти Set та Map). Він дозволяє легко перебирати елементи колекції.

Синтаксис:

    
      for (let variable of iterable) {
        // код, який виконається для кожного елемента
      }
    
  

Приклад:

JavaScript
    
      let array = [1, 2, 3, 4, 5];

      for (let value of array) {
        console.log(value);
      }

      // Вивід: 1 2 3 4 5
    
  

Застосування для масивів

Цикл for...of зручний для перебору елементів масиву, оскільки він надає доступ до значення кожного елемента:

JavaScript
    
      let fruits = ['apple', 'banana', 'cherry'];

      for (let fruit of fruits) {
          console.log(fruit);
      }

      // Вивід: apple banana cherry
    
  

Застосування для рядків

Цикл for...of також можна використовувати для ітерації по символах рядка:

JavaScript
    
      let str = 'Hello';

      for (let char of str) {
        console.log(char);
      }

      // Вивід: H e l l o
    
  

9.2 Цикл for...in

Цикл for...in використовується для ітерації по перелічуваних властивостях об'єкта. Він виконує ітерацію по ключу кожної властивості.

Синтаксис:

    
      for (let key in object {
        // код, який виконається для кожного елемента
      }
    
  

Приклад:

JavaScript
    
      let obj = {a: 1, b: 2, c: 3};

      for (let key in obj) {
        console.log(key + ': ' + obj[key]);
      }

      // Вивід: a: 1 b: 2 c: 3
    
  

Застосування для об'єктів

Цикл for...in зручний для перебору властивостей об'єкта, оскільки він надає доступ до ключа і значення кожної властивості:

JavaScript
    
      let user = {
        name: 'John',
        age: 30,
        isAdmin: true
      };

      for (let key in user) {
        console.log(key + ': ' + user[key]);
      }

      // Вивід: name: John age: 30 isAdmin: true
    
  

Застосування для масивів

Цикл for...in може використовуватися для ітерації по індексах масиву, але це не рекомендується, оскільки він ітерує по всіх перелічуваних властивостях, включаючи властивості з прототипу:

JavaScript
    
      let array = ['apple', 'banana', 'cherry'];

      for (let index in array) {
        console.log(index + ': ' + array[index]);
      }

      // Вивід: 0: apple 1: banana 2: cherry
    
  

9.3 Порівняння циклів for...of і for...in

Порівняння циклів for...of і for...in:

Опис for...of for...in
Застосування Ітеровані об'єкти (масиви, рядки, Set, Map) Об'єкти
Особливості Ітерує по значеннях Ітерує по ключах
Використання з масивами for (let value of array) { ... } for (let index in array) { ... }
Використання з об'єктами for (let value of Object.values(obj)) { ... } for (let key in obj) { ... }
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ