35 Sets (Set)

Vor ES6 gab es in JavaScript keine Datenstruktur für Mengen. Stattdessen wurden zwei Workarounds verwendet

• Die Schlüssel eines Objekts wurden als Menge von Zeichenketten verwendet.
• Arrays wurden als Mengen von beliebigen Werten verwendet. Der Nachteil ist, dass die Prüfung der Mitgliedschaft (ob ein Array einen Wert enthält) langsamer ist.

Seit ES6 gibt es in JavaScript die Datenstruktur Set, die beliebige Werte enthalten kann und Mitgliedschaftsprüfungen schnell durchführt.

35.1 Sets verwenden

35.1.1 Sets erstellen

Es gibt drei gängige Möglichkeiten, Sets zu erstellen.

Erstens können Sie den Konstruktor ohne Parameter verwenden, um ein leeres Set zu erstellen

const emptySet = new Set();
assert.equal(emptySet.size, 0);

Zweitens können Sie ein Iterable (z.B. ein Array) an den Konstruktor übergeben. Die iterierten Werte werden zu Elementen des neuen Sets

const set = new Set(['red', 'green', 'blue']);

Drittens fügt die Methode .add() Elemente zu einem Set hinzu und ist verkettbar

const set = new Set()
.add('red')
.add('green')
.add('blue');

35.1.2 Hinzufügen, Entfernen, Mitgliedschaft prüfen

.add() fügt ein Element zu einem Set hinzu.

const set = new Set();
set.add('red');

.has() prüft, ob ein Element Mitglied eines Sets ist.

assert.equal(set.has('red'), true);

.delete() entfernt ein Element aus einem Set.

assert.equal(set.delete('red'), true); // there was a deletion
assert.equal(set.has('red'), false);

35.1.3 Größe eines Sets ermitteln und es leeren

.size enthält die Anzahl der Elemente in einem Set.

const set = new Set()
  .add('foo')
  .add('bar');
assert.equal(set.size, 2)

.clear() entfernt alle Elemente eines Sets.

set.clear();
assert.equal(set.size, 0)

35.1.4 Über Sets iterieren

Sets sind iterierbar und die for-of-Schleife funktioniert wie erwartet

const set = new Set(['red', 'green', 'blue']);
for (const x of set) {
  console.log(x);
}
// Output:
// 'red'
// 'green'
// 'blue'

Wie Sie sehen, behalten Sets die Einfügungsreihenfolge bei. Das heißt, Elemente werden immer in der Reihenfolge durchlaufen, in der sie hinzugefügt wurden.

Da Sets iterierbar sind, können Sie Array.from() verwenden, um sie in Arrays zu konvertieren

const set = new Set(['red', 'green', 'blue']);
const arr = Array.from(set); // ['red', 'green', 'blue']

35.2 Beispiele für die Verwendung von Sets

35.2.1 Duplikate aus einem Array entfernen

Ein Array in ein Set und zurück zu konvertieren, entfernt Duplikate aus dem Array

assert.deepEqual(
  Array.from(new Set([1, 2, 1, 2, 3, 3, 3])),
  [1, 2, 3]);

35.2.2 Ein Set von Unicode-Zeichen (Codepunkten) erstellen

Strings sind iterierbar und können daher als Parameter für new Set() verwendet werden

assert.deepEqual(
  new Set('abc'),
  new Set(['a', 'b', 'c']));

35.3 Welche Set-Elemente gelten als gleich?

Wie bei Map-Schlüsseln werden Set-Elemente ähnlich wie === verglichen, mit der Ausnahme, dass NaN gleich sich selbst ist.

> const set = new Set([NaN, NaN, NaN]);
> set.size
1
> set.has(NaN)
true

Wie bei === werden zwei verschiedene Objekte niemals als gleich betrachtet (und es gibt derzeit keine Möglichkeit, dies zu ändern)

> const set = new Set();

> set.add({});
> set.size
1

> set.add({});
> set.size
2

35.4 Fehlende Set-Operationen

Sets fehlen mehrere gängige Operationen. Eine solche Operation kann normalerweise implementiert werden durch

• Konvertieren der Eingabe-Sets in Arrays durch Erweiterung in Array-Literale.
• Durchführen der Operation auf Arrays.
• Konvertieren des Ergebnisses in ein Set und Zurückgeben.

35.4.1 Vereinigung (a ∪ b)

Die Vereinigung zweier Mengen a und b zu berechnen bedeutet, eine Menge zu erstellen, die die Elemente von a und b enthält.

const a = new Set([1,2,3]);
const b = new Set([4,3,2]);
// Use spreading to concatenate two iterables
const union = new Set([...a, ...b]);

assert.deepEqual(Array.from(union), [1, 2, 3, 4]);

35.4.2 Schnittmenge (a ∩ b)

Die Schnittmenge zweier Mengen a und b zu berechnen bedeutet, eine Menge zu erstellen, die die Elemente von a enthält, die auch in b vorhanden sind.

const a = new Set([1,2,3]);
const b = new Set([4,3,2]);
const intersection = new Set(
  Array.from(a).filter(x => b.has(x))
);

assert.deepEqual(
  Array.from(intersection), [2, 3]
);

35.4.3 Differenz (a \ b)

Die Differenz zwischen zwei Mengen a und b zu berechnen bedeutet, eine Menge zu erstellen, die die Elemente von a enthält, die nicht in b sind. Diese Operation wird auch manchmal als minus (−) bezeichnet.

const a = new Set([1,2,3]);
const b = new Set([4,3,2]);
const difference = new Set(
  Array.from(a).filter(x => !b.has(x))
);

assert.deepEqual(
  Array.from(difference), [1]
);

35.4.4 Mapping über Sets

Sets haben keine Methode .map(). Aber wir können die Methode, die Arrays haben, ausleihen

const set = new Set([1, 2, 3]);
const mappedSet = new Set(
  Array.from(set).map(x => x * 2)
);

// Convert mappedSet to an Array to check what’s inside it
assert.deepEqual(
  Array.from(mappedSet), [2, 4, 6]
);

35.4.5 Filtern von Sets

Wir können Sets nicht direkt .filter(), also müssen wir die entsprechende Array-Methode verwenden

const set = new Set([1, 2, 3, 4, 5]);
const filteredSet = new Set(
  Array.from(set).filter(x => (x % 2) === 0)
);

assert.deepEqual(
  Array.from(filteredSet), [2, 4]
);

35.5 Kurzübersicht: Set<T>

35.5.1 Konstruktor

• new Set<T>(values?: Iterable<T>) ^[ES6]

  Wenn Sie den Parameter values nicht angeben, wird ein leeres Set erstellt. Wenn Sie ihn angeben, werden die iterierten Werte als Elemente zum Set hinzugefügt. Zum Beispiel

  const set = new Set(['red', 'green', 'blue']);

35.5.2 Set<T>.prototype: einzelne Set-Elemente

• .add(value: T): this ^[ES6]

  Fügt value zu diesem Set hinzu. Diese Methode gibt this zurück, was bedeutet, dass sie verkettet werden kann.

  const set = new Set(['red']);
  set.add('green').add('blue');
  assert.deepEqual(
    Array.from(set), ['red', 'green', 'blue']
  );

• .delete(value: T): boolean ^[ES6]

  Entfernt value aus diesem Set. Gibt true zurück, wenn etwas gelöscht wurde, und andernfalls false.

  const set = new Set(['red', 'green', 'blue']);
  assert.equal(set.delete('red'), true); // there was a deletion
  assert.deepEqual(
    Array.from(set), ['green', 'blue']
  );

• .has(value: T): boolean ^[ES6]

  Prüft, ob value in diesem Set enthalten ist.

  const set = new Set(['red', 'green']);
  assert.equal(set.has('red'), true);
  assert.equal(set.has('blue'), false);

35.5.3 Set<T>.prototype: alle Set-Elemente

• get .size: number ^[ES6]

  Gibt zurück, wie viele Elemente in diesem Set vorhanden sind.

  const set = new Set(['red', 'green', 'blue']);
  assert.equal(set.size, 3);

• .clear(): void ^[ES6]

  Entfernt alle Elemente aus diesem Set.

  const set = new Set(['red', 'green', 'blue']);
  assert.equal(set.size, 3);
  set.clear();
  assert.equal(set.size, 0);

35.5.4 Set<T>.prototype: Iterieren und Schleifen

• .values(): Iterable<T> ^[ES6]

  Gibt ein Iterable über alle Elemente dieses Sets zurück.

  const set = new Set(['red', 'green']);
  for (const x of set.values()) {
    console.log(x);
  }
  // Output:
  // 'red'
  // 'green'

• [Symbol.iterator](): Iterable<T> ^[ES6]

  Standardmethode zum Iterieren über Sets. Identisch mit .values().

  const set = new Set(['red', 'green']);
  for (const x of set) {
    console.log(x);
  }
  // Output:
  // 'red'
  // 'green'

• .forEach(callback: (value: T, key: T, theSet: Set<T>) => void, thisArg?: any): void ^[ES6]

  Übergibt jedes Element dieses Sets an callback(). value und key enthalten beide das aktuelle Element. Diese Redundanz wurde eingeführt, damit dieser callback die gleiche Signatur hat wie der callback von Map.prototype.forEach().

  Sie können das this von callback über thisArg angeben. Wenn Sie es weglassen, ist this undefined.

  const set = new Set(['red', 'green']);
  set.forEach(x => console.log(x));
  // Output:
  // 'red'
  // 'green'

35.5.5 Symmetrie mit Map

Die folgenden beiden Methoden existieren hauptsächlich, damit Sets und Maps ähnliche Schnittstellen haben. Jedes Set-Element wird so behandelt, als wäre es ein Map-Eintrag, dessen Schlüssel und Wert beide das Element sind.

• Set.prototype.entries(): Iterable<[T,T]> ^[ES6]
• Set.prototype.keys(): Iterable<T> ^[ES6]

.entries() ermöglicht es Ihnen, ein Set in eine Map zu konvertieren

const set = new Set(['a', 'b', 'c']);
const map = new Map(set.entries());
assert.deepEqual(
  Array.from(map.entries()),
  [['a','a'], ['b','b'], ['c','c']]
);

35.6 FAQ: Sets

35.6.1 Warum haben Sets .size, während Arrays .length haben?

Die Antwort auf diese Frage finden Sie in §33.6.4 „Warum haben Maps .size, während Arrays .length haben?“.