Лекції
Почати
Почати навчання
JavaRush /Курси /Frontend SELF UA /Нові структури даних: Map, Set

Нові структури даних: Map, Set

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

3.1 Колекція Map

У ECMAScript 2015 (ES6) у JavaScript додали дві нові структури даних: Map і Set. Ці структури даних забезпечують більш гнучкі й ефективні способи зберігання та управління колекціями даних порівняно з традиційними об'єктами та масивами.

Map — це структура даних, яка дозволяє зберігати пари ключ-значення, де ключі можуть бути будь-якого типу, включаючи об'єкти та функції.

1. Створення та ініціалізація Map:

JavaScript 
    
      const map = new Map();

2. Додавання елементів:

Метод set використовується для додавання нових пар ключ-значення до Map.

JavaScript 
    
      map.set('ключ1', 'значення1');
      map.set(2, 'значення2');
      map.set({ name: 'ключОб'єкта' }, 'значення3');

3. Отримання елементів:

Метод get використовується для отримання значення за ключем.

JavaScript 
    
      const map = new Map();

      map.set('ключ1', 'значення1');
      map.set(2, 'значення2');
      map.set({ name: 'ключОб'єкта' }, 'значення3');

      console.log(map.get('ключ1')); // 'значення1'
      console.log(map.get(2)); // 'значення2'

4. Перевірка наявності ключа:

Метод has перевіряє, чи існує ключ у Map.

Telegram
JavaScript 
    
      const map = new Map();

      map.set('ключ1', 'значення1');
      map.set(2, 'значення2');
      map.set({ name: 'ключОб'єкта' }, 'значення3');

      console.log(map.has('ключ1')); // true
      console.log(map.has('ключ3')); // false

5. Видалення елементів:

Метод delete видаляє елемент за ключем.

JavaScript 
    
      const map = new Map();

      map.set('ключ1', 'значення1');
      map.set(2, 'значення2');
      map.set({ name: 'ключОб'єкта' }, 'значення3');

      map.delete('ключ1');
      console.log(map.has('ключ1')); // false

6. Очищення Map:

Метод clear видаляє всі елементи з Map.

JavaScript 
    
      const map = new Map();

      map.set('ключ1', 'значення1');
      map.set(2, 'значення2');
      map.set({ name: 'ключОб'єкта' }, 'значення3');

      map.clear();
      console.log(map.size); // 0

7. Ітерація по Map:

Ви можете використовувати цикл for...of для ітерації по Map.

Приклад:

JavaScript 
    
      const map = new Map();
      map.set('ключ1', 'значення1');
      map.set(2, 'значення2');

      for (const [key, value] of map) {
        console.log(`${key}: ${value}`);
      }

      // 'ключ1: значення1'
      // '2: значення2'

3.2 Колекція Set

Set — це структура даних, яка дозволяє зберігати унікальні значення будь-якого типу, включаючи об'єкти та примітиви.

1. Створення та ініціалізація Set:

JavaScript 
    
      const set = new Set();

2. Додавання елементів:

Метод add використовується для додавання нових значень до Set.

JavaScript 
    
      set.add(1);
      set.add('значення2');
      set.add({ name: 'значенняОб'єкта' });

3. Перевірка наявності значення:

Метод has перевіряє, чи існує значення в Set.

JavaScript 
    
      const set = new Set();

      set.add(1);
      set.add('значення2');
      set.add({ name: 'значенняОб'єкта' });

      console.log(set.has(1)); // true
      console.log(set.has('значення3')); // false

4. Видалення елементів:

Метод delete видаляє значення з Set.

JavaScript 
    
      const set = new Set();

      set.add(1);
      set.add('значення2');
      set.add({ name: 'значенняОб'єкта' });

      set.delete(1);
      console.log(set.has(1)); // false

5. Очищення Set:

Метод clear видаляє всі елементи з Set.

JavaScript 
    
      const set = new Set();

      set.add(1);
      set.add('значення2');
      set.add({ name: 'значенняОб'єкта' });

      set.clear();
      console.log(set.size); // 0

6. Ітерація по Set:

Ви можете використовувати цикл for...of для ітерації по Set.

JavaScript 
    
      const set = new Set();
      set.add(1);
      set.add('значення2');

      for (const value of set) {
        console.log(value);
      }

      // 1
      // 'значення2'

3.3 Порівняння Map та Set

Переваги Map:

  1. Довільні ключі: у Map ключі можуть бути будь-якого типу, включаючи об'єкти й функції, на відміну від об'єктів, де ключами можуть бути лише строки або символи.
  2. Упорядковані елементи: елементи у Map зберігають порядок додавання, що спрощує ітерацію по них у порядку додавання.
  3. Розмір колекції: метод size дозволяє швидко отримати кількість елементів у Map.

Переваги Set:

  1. Унікальні значення: Set автоматично гарантує, що всі його елементи є унікальними.
  2. Упорядковані елементи: елементи у Set зберігають порядок додавання, що спрощує ітерацію по них у порядку додавання.
  3. Оптимізовані операції: Set надає оптимізовані методи для додавання, видалення й перевірки наявності елементів.

Практичні приклади

Приклад використання Map для зберігання інформації про користувачів:

JavaScript 
    
      const users = new Map();
      users.set(1, { name: 'Аліса', age: 25 });
      users.set(2, { name: 'Боб', age: 30 });

      for (const [id, user] of users) {
        console.log(`User ID: ${id}, Name: ${user.name}, Age: ${user.age}`);
      }

      // User ID: 1, Name: Аліса, Age: 25
      // User ID: 2, Name: Боб, Age: 30

Приклад використання Set для фільтрації унікальних значень:

JavaScript 
    
      const numbers = [1, 2, 3, 1, 2, 4, 5, 3];
      const uniqueNumbers = new Set(numbers);

      for (const number of uniqueNumbers) {
        console.log(number);
      }

      // 1
      // 2
      // 3
      // 4
      // 5
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ