CodeGym /Kurse /Frontend SELF DE /Neue Datenstrukturen: Map, Set

Neue Datenstrukturen: Map, Set

Frontend SELF DE
Level 45 , Lektion 2
Verfügbar

3.1 Map Sammlung

In ECMAScript 2015 (ES6) wurden in JavaScript zwei neue Datenstrukturen hinzugefügt: Map und Set. Diese Datenstrukturen bieten flexiblere und effizientere Möglichkeiten zur Speicherung und Verwaltung von Datensammlungen im Vergleich zu traditionellen Objekten und Arrays.

Map — ist eine Datenstruktur, die es ermöglicht, Schlüssel-Wert-Paare zu speichern, wobei die Schlüssel jeden Typs sein können, einschließlich Objekte und Funktionen.

1. Erzeugung und Initialisierung von Map:

JavaScript
    
      const map = new Map();
    
  

2. Hinzufügen von Elementen:

Die Methode set wird zum Hinzufügen neuer Schlüssel-Wert-Paare in Map verwendet.

JavaScript
    
      map.set('key1', 'value1');
      map.set(2, 'value2');
      map.set({ name: 'objectKey' }, 'value3');
    
  

3. Abrufen von Elementen:

Die Methode get wird verwendet, um einen Wert über einen Schlüssel abzurufen.

JavaScript
    
      const map = new Map();

      map.set('key1', 'value1');
      map.set(2, 'value2');
      map.set({ name: 'objectKey' }, 'value3');

      console.log(map.get('key1')); // 'value1'
      console.log(map.get(2)); // 'value2'
    
  

4. Überprüfung der Schlüsselverfügbarkeit:

Die Methode has überprüft, ob ein Schlüssel in Map existiert.

JavaScript
    
      const map = new Map();

      map.set('key1', 'value1');
      map.set(2, 'value2');
      map.set({ name: 'objectKey' }, 'value3');

      console.log(map.has('key1')); // true
      console.log(map.has('key3')); // false
    
  

5. Löschen von Elementen:

Die Methode delete entfernt ein Element über den Schlüssel.

JavaScript
    
      const map = new Map();

      map.set('key1', 'value1');
      map.set(2, 'value2');
      map.set({ name: 'objectKey' }, 'value3');

      map.delete('key1');
      console.log(map.has('key1')); // false
    
  

6. Reinigung der Map:

Die Methode clear entfernt alle Elemente aus Map.

JavaScript
    
      const map = new Map();

      map.set('key1', 'value1');
      map.set(2, 'value2');
      map.set({ name: 'objectKey' }, 'value3');

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

7. Iteration über Map:

Du kannst die Schleife for...of verwenden, um über Map zu iterieren.

Beispiel:

JavaScript
    
      const map = new Map();
      map.set('key1', 'value1');
      map.set(2, 'value2');

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

      // 'key1: value1'
      // '2: value2'
    
  

3.2 Set Sammlung

Set — ist eine Datenstruktur, die es ermöglicht, einzigartige Werte jedes Typs zu speichern, einschließlich Objekten und Primitiven.

1. Erzeugung und Initialisierung von Set:

JavaScript
    
      const set = new Set();
    
  

2. Hinzufügen von Elementen:

Die Methode add wird verwendet, um neue Werte in Set hinzuzufügen.

JavaScript
    
      set.add(1);
      set.add('value2');
      set.add({ name: 'objectValue' });
    
  

3. Überprüfung der Wertverfügbarkeit:

Die Methode has überprüft, ob ein Wert in Set existiert.

JavaScript
    
      const set = new Set();

      set.add(1);
      set.add('value2');
      set.add({ name: 'objectValue' });

      console.log(set.has(1)); // true
      console.log(set.has('value3')); // false
    
  

4. Löschen von Elementen:

Die Methode delete entfernt einen Wert aus Set.

JavaScript
    
      const set = new Set();

      set.add(1);
      set.add('value2');
      set.add({ name: 'objectValue' });

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

5. Reinigung des Sets:

Die Methode clear entfernt alle Elemente aus Set.

JavaScript
    
      const set = new Set();

      set.add(1);
      set.add('value2');
      set.add({ name: 'objectValue' });

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

6. Iteration über Set:

Du kannst die Schleife for...of verwenden, um über Set zu iterieren.

JavaScript
    
      const set = new Set();
      set.add(1);
      set.add('value2');

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

      // 1
      // 'value2'
    
  

3.3 Vergleich Map und Set

Vorteile von Map:

  1. Beliebige Schlüssel: In Map können Schlüssel jeden Typs sein, einschließlich Objekte und Funktionen, im Gegensatz zu Objekten, bei denen die Schlüssel nur Strings oder Symbole sein können.
  2. Geordnete Elemente: Elemente in Map bewahren die Einfügereihenfolge, was die Iteration in Einfügereihenfolge erleichtert.
  3. Größe der Sammlung: Die Methode size erlaubt es, schnell die Anzahl der Elemente in Map zu erhalten.

Vorteile von Set:

  1. Einzigartige Werte: Set garantiert automatisch, dass alle seine Elemente einzigartig sind.
  2. Geordnete Elemente: Elemente in Set bewahren die Einfügereihenfolge, was die Iteration in Einfügereihenfolge erleichtert.
  3. Optimierte Operationen: Set bietet optimierte Methoden zum Hinzufügen, Entfernen und Überprüfen von Elementen.

Praktische Beispiele

Beispiel der Verwendung von Map zur Speicherung von Informationen über Benutzer:

JavaScript
    
      const users = new Map();
      users.set(1, { name: 'Alice', age: 25 });
      users.set(2, { name: 'Bob', age: 30 });

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

      // User ID: 1, Name: Alice, Age: 25
      // User ID: 2, Name: Bob, Age: 30
    
  

Beispiel der Verwendung von Set zur Filterung einzigartiger Werte:

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
    
  
Kommentare
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION