Set

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Das Set-Objekt ermöglicht es Ihnen, einzigartige Werte jeglichen Typs zu speichern, sei es primitive values oder Objektreferenzen.

Beschreibung

Set-Objekte sind Sammlungen von Werten. Ein Wert im Set darf nur einmal vorkommen; er ist einzigartig in der Sammlung des Sets. Sie können die Elemente eines Sets in der Reihenfolge des Einfügens durchlaufen. Die Einfügereihenfolge entspricht der Reihenfolge, in der jedes Element erfolgreich durch die add()-Methode in das Set eingefügt wurde (das heißt, es gab kein identisches Element im Set, als add() aufgerufen wurde).

Die Spezifikation verlangt, dass Sets so implementiert werden, dass sie im Durchschnitt Zugriffzeiten bieten, die sublinear zur Anzahl der Elemente in der Sammlung sind. Daher könnten sie intern als Hashtabelle (mit O(1) Zugriff), als Suchbaum (mit O(log(N)) Zugriff) oder als beliebige andere Datenstruktur dargestellt werden, solange die Komplexität besser ist als O(N).

Wertgleichheit

Die Wertgleichheit basiert auf dem SameValueZero-Algorithmus. (Früher wurde SameValue verwendet, bei dem 0 und -0 als unterschiedlich behandelt wurden. Überprüfen Sie die Browser-Kompatibilität.) Das bedeutet, dass NaN als gleich NaN betrachtet wird (obwohl NaN !== NaN) und alle anderen Werte als gleich gelten nach den Semantiken des === Operators.

Leistung

Die has-Methode prüft, ob ein Wert im Set vorhanden ist, und verwendet dabei einen Ansatz, der im Durchschnitt schneller ist als das Testen der meisten der zuvor zum Set hinzugefügten Elemente. Insbesondere ist sie im Durchschnitt schneller als die Array.prototype.includes-Methode, wenn ein Array die Länge hat, die gleich der Größe eines Sets ist.

Mengenkomposition

Das Set-Objekt bietet einige Methoden, mit denen Sie Mengen wie mit mathematischen Operationen zusammensetzen können. Diese Methoden umfassen:

Ein Venn-Diagramm, bei dem sich zwei Kreise überlappen. Der Unterschied von A und B ist der Teil von A, der sich nicht mit B überlappt.

Ein Venn-Diagramm, bei dem sich zwei Kreise überlappen. Der Schnitt von A und B ist der Teil, in dem sie sich überlappen.

Methode	Rückgabetyp	Mathematisches Äquivalent
`A.difference(B)`	`Set`	$A\setminus B$
`A.intersection(B)`	`Set`	$A\cap B$
`A.symmetricDifference(B)`	`Set`	$(A\setminus B)\cup(B\setminus A)$
`A.union(B)`	`Set`	$A\cup B$
`A.isDisjointFrom(B)`	`Boolean`	$A\cap B = \empty$
`A.isSubsetOf(B)`	`Boolean`	$A\subseteq B$
`A.isSupersetOf(B)`	`Boolean`	$A\supseteq B$

Um sie generalisierbarer zu machen, akzeptieren diese Methoden nicht nur Set-Objekte, sondern alles, was set-like ist.

Set-ähnliche Objekte

Alle Mengenkompositionsmethoden erfordern, dass this eine tatsächliche Set-Instanz ist, aber ihre Argumente müssen nur set-ähnlich sein. Ein set-ähnliches Objekt ist ein Objekt, das Folgendes bereitstellt:

Eine size-Eigenschaft, die eine Zahl enthält.
Eine has()-Methode, die ein Element nimmt und einen Boolean zurückgibt.
Eine keys()-Methode, die einen Iterator der Elemente im Set zurückgibt.

Zum Beispiel sind Map-Objekte set-ähnlich, da sie ebenfalls size, has(), und keys() haben, sodass sie sich wie Sets von Schlüsseln verhalten, wenn sie in Set-Methoden verwendet werden:

const a = new Set([1, 2, 3]);
const b = new Map([
  [1, "one"],
  [2, "two"],
  [4, "four"],
]);
console.log(a.union(b)); // Set(4) {1, 2, 3, 4}

Hinweis: Das set-ähnliche Protokoll ruft die keys()-Methode auf, anstatt [Symbol.iterator]() zu verwenden, um Elemente zu erzeugen. Dies geschieht, um Maps als gültige set-ähnliche Objekte zu machen, weil für Maps der Iterator Entries erzeugt, aber die has()-Methode Schlüssel nimmt.

Arrays sind nicht set-ähnlich, weil sie keine has()-Methode oder die size-Eigenschaft haben und ihre keys()-Methode Indizes statt Elemente erzeugt. WeakSet-Objekte sind ebenfalls nicht set-ähnlich, da sie keine keys()-Methode haben.

Set-ähnliche Browser-APIs

Browser Set-ähnliche Objekte (oder "setlike objects") sind Web API-Schnittstellen, die sich in vielerlei Hinsicht wie ein Set verhalten.

Genau wie Set können Elemente in derselben Reihenfolge durchlaufen werden, in der sie dem Objekt hinzugefügt wurden. Set-ähnliche Objekte und Set haben auch Eigenschaften und Methoden, die denselben Namen und dasselbe Verhalten haben. Im Gegensatz zu Set erlauben sie jedoch nur einen bestimmten vordefinierten Typ für jeden Eintrag.

Die erlaubten Typen werden in der Spezifikations-IDL-Definition festgelegt. Zum Beispiel ist GPUSupportedFeatures ein Set-ähnliches Objekt, das String als Schlüssel-/Wert verwenden muss. Dies ist in der Spezifikations-IDL unten definiert:

webidl

interface GPUSupportedFeatures {
  readonly setlike<DOMString>;
};

Set-ähnliche Objekte sind entweder schreibgeschützt oder schreibbar (siehe das readonly-Schlüsselwort in der obigen IDL).

Schreibgeschützte Set-ähnliche Objekte haben die Eigenschaft size, und die Methoden: entries(), forEach(), has(), keys(), values(), und [Symbol.iterator]().
Schreibbare Set-ähnliche Objekte haben zusätzlich die Methoden: clear(), delete(), und add().

Die Methoden und Eigenschaften haben dasselbe Verhalten wie die entsprechenden Entitäten in Set, mit Ausnahme der Einschränkung des Typs des Eintrags.

Folgende sind Beispiele für schreibgeschützte Set-ähnliche Browser-Objekte:

Die folgenden sind Beispiele für schreibbare Set-ähnliche Browser-Objekte:

Konstruktor

Set(): Erstellt ein neues Set-Objekt.

Statische Eigenschaften

Set[Symbol.species]: Die Konstruktorfunktion, die verwendet wird, um abgeleitete Objekte zu erstellen.

Instanzeigenschaften

Diese Eigenschaften sind auf Set.prototype definiert und werden von allen Set-Instanzen geteilt.

Set.prototype.constructor: Die Konstruktorfunktion, die das Instanzobjekt erstellt hat. Für Set-Instanzen ist der Anfangswert der Set-Konstruktor.
Set.prototype.size: Gibt die Anzahl der Werte im Set-Objekt zurück.
Set.prototype[Symbol.toStringTag]: Der Anfangswert der [Symbol.toStringTag]-Eigenschaft ist der String "Set". Diese Eigenschaft wird in Object.prototype.toString() verwendet.

Instanzmethoden

Set.prototype.add(): Fügt ein neues Element mit einem angegebenen Wert in ein Set-Objekt ein, wenn nicht bereits ein Element mit demselben Wert im Set vorhanden ist.
Set.prototype.clear(): Entfernt alle Elemente aus dem Set-Objekt.
Set.prototype.delete(): Entfernt das dem Wert zugeordnete Element und gibt einen Boolean zurück, der bestätigt, ob ein Element erfolgreich entfernt wurde oder nicht. Set.prototype.has(value) wird danach false zurückgeben.
Set.prototype.difference(): Nimmt ein Set und gibt ein neues Set zurück, das Elemente enthält, die in diesem Set, aber nicht im angegebenen Set sind.
Set.prototype.entries(): Gibt ein neues Iterator-Objekt zurück, das ein Array von [value, value] für jedes Element im Set-Objekt in Einfügereihenfolge enthält. Dies ist ähnlich dem Map-Objekt, sodass der Schlüssel eines jeden Eintrags für ein Set derselbe ist wie sein Wert.
Set.prototype.forEach(): Ruft callbackFn einmal für jeden im Set-Objekt vorhandenen Wert in Einfügereihenfolge auf. Wenn ein thisArg-Parameter angegeben wird, wird er als this-Wert für jeden Aufruf von callbackFn verwendet.
Set.prototype.has(): Gibt einen Boolean zurück, der bestätigt, ob ein Element mit dem angegebenen Wert im Set-Objekt vorhanden ist oder nicht.
Set.prototype.intersection(): Nimmt ein Set und gibt ein neues Set zurück, das Elemente enthält, die sowohl in diesem Set als auch im gegebenen Set vorhanden sind.
Set.prototype.isDisjointFrom(): Nimmt ein Set und gibt einen Boolean zurück, der angibt, ob dieses Set keine gemeinsamen Elemente mit dem angegebenen Set hat.
Set.prototype.isSubsetOf(): Nimmt ein Set und gibt einen Boolean zurück, der angibt, ob alle Elemente dieses Sets im angegebenen Set enthalten sind.
Set.prototype.isSupersetOf(): Nimmt ein Set und gibt einen Boolean zurück, der angibt, ob alle Elemente des angegebenen Sets in diesem Set enthalten sind.
Set.prototype.keys(): Ein Alias für Set.prototype.values().
Set.prototype.symmetricDifference(): Nimmt ein Set und gibt ein neues Set zurück, das Elemente enthält, die entweder in diesem Set oder im gegebenen Set vorhanden sind, aber nicht in beiden.
Set.prototype.union(): Nimmt ein Set und gibt ein neues Set zurück, das Elemente enthält, die entweder in diesem oder beiden Sets vorhanden sind.
Set.prototype.values(): Gibt ein neues Iterator-Objekt zurück, das die Werte für jedes Element im Set-Objekt in Einfügereihenfolge liefert.
Set.prototype[Symbol.iterator](): Gibt ein neues Iterator-Objekt zurück, das die Werte für jedes Element im Set-Objekt in Einfügereihenfolge liefert.

Beispiele

Verwenden des Set-Objekts

const mySet1 = new Set();

mySet1.add(1); // Set(1) { 1 }
mySet1.add(5); // Set(2) { 1, 5 }
mySet1.add(5); // Set(2) { 1, 5 }
mySet1.add("some text"); // Set(3) { 1, 5, 'some text' }
const o = { a: 1, b: 2 };
mySet1.add(o);

mySet1.add({ a: 1, b: 2 }); // o is referencing a different object, so this is okay

mySet1.has(1); // true
mySet1.has(3); // false, since 3 has not been added to the set
mySet1.has(5); // true
mySet1.has(Math.sqrt(25)); // true
mySet1.has("Some Text".toLowerCase()); // true
mySet1.has(o); // true

mySet1.size; // 5

mySet1.delete(5); // removes 5 from the set
mySet1.has(5); // false, 5 has been removed

mySet1.size; // 4, since we just removed one value

mySet1.add(5); // Set(5) { 1, 'some text', {...}, {...}, 5 } - a previously deleted item will be added as a new item, it will not retain its original position before deletion

console.log(mySet1); // Set(5) { 1, "some text", {…}, {…}, 5 }

Iterieren von Sets

Die Iteration über ein Set besucht die Elemente in Einfügereihenfolge.

for (const item of mySet1) {
  console.log(item);
}
// 1, "some text", { "a": 1, "b": 2 }, { "a": 1, "b": 2 }, 5

for (const item of mySet1.keys()) {
  console.log(item);
}
// 1, "some text", { "a": 1, "b": 2 }, { "a": 1, "b": 2 }, 5

for (const item of mySet1.values()) {
  console.log(item);
}
// 1, "some text", { "a": 1, "b": 2 }, { "a": 1, "b": 2 }, 5

// key and value are the same here
for (const [key, value] of mySet1.entries()) {
  console.log(key);
}
// 1, "some text", { "a": 1, "b": 2 }, { "a": 1, "b": 2 }, 5

// Convert Set object to an Array object, with Array.from
const myArr = Array.from(mySet1); // [1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}, 5]

// the following will also work if run in an HTML document
mySet1.add(document.body);
mySet1.has(document.querySelector("body")); // true

// converting between Set and Array
const mySet2 = new Set([1, 2, 3, 4]);
console.log(mySet2.size); // 4
console.log([...mySet2]); // [1, 2, 3, 4]

// intersect can be simulated via
const intersection = new Set([...mySet1].filter((x) => mySet2.has(x)));

// difference can be simulated via
const difference = new Set([...mySet1].filter((x) => !mySet2.has(x)));

// Iterate set entries with forEach()
mySet2.forEach((value) => {
  console.log(value);
});
// 1
// 2
// 3
// 4

Implementieren grundlegender Mengenoperationen

function isSuperset(set, subset) {
  for (const elem of subset) {
    if (!set.has(elem)) {
      return false;
    }
  }
  return true;
}

function union(setA, setB) {
  const _union = new Set(setA);
  for (const elem of setB) {
    _union.add(elem);
  }
  return _union;
}

function intersection(setA, setB) {
  const _intersection = new Set();
  for (const elem of setB) {
    if (setA.has(elem)) {
      _intersection.add(elem);
    }
  }
  return _intersection;
}

function symmetricDifference(setA, setB) {
  const _difference = new Set(setA);
  for (const elem of setB) {
    if (_difference.has(elem)) {
      _difference.delete(elem);
    } else {
      _difference.add(elem);
    }
  }
  return _difference;
}

function difference(setA, setB) {
  const _difference = new Set(setA);
  for (const elem of setB) {
    _difference.delete(elem);
  }
  return _difference;
}

// Examples
const setA = new Set([1, 2, 3, 4]);
const setB = new Set([2, 3]);
const setC = new Set([3, 4, 5, 6]);

isSuperset(setA, setB); // returns true
union(setA, setC); // returns Set {1, 2, 3, 4, 5, 6}
intersection(setA, setC); // returns Set {3, 4}
symmetricDifference(setA, setC); // returns Set {1, 2, 5, 6}
difference(setA, setC); // returns Set {1, 2}

Beziehung zu Arrays

const myArray = ["value1", "value2", "value3"];

// Use the regular Set constructor to transform an Array into a Set
const mySet = new Set(myArray);

mySet.has("value1"); // returns true

// Use the spread syntax to transform a set into an Array.
console.log([...mySet]); // Will show you exactly the same Array as myArray

Doppelte Elemente aus einem Array entfernen

// Use to remove duplicate elements from an array
const numbers = [2, 13, 4, 4, 2, 13, 13, 4, 4, 5, 5, 6, 6, 7, 5, 32, 13, 4, 5];

console.log([...new Set(numbers)]); // [2, 13, 4, 5, 6, 7, 32]

Beziehung zu Strings

// Case sensitive (set will contain "F" and "f")
new Set("Firefox"); // Set(7) [ "F", "i", "r", "e", "f", "o", "x" ]

// Duplicate omission ("f" occurs twice in the string but set will contain only one)
new Set("firefox"); // Set(6) [ "f", "i", "r", "e", "o", "x" ]

Verwendung eines Sets zur Sicherstellung der Einzigartigkeit einer Werteliste

const array = Array.from(document.querySelectorAll("[id]")).map((e) => e.id);

const set = new Set(array);
console.assert(set.size === array.length);

Spezifikationen

Specification
ECMAScript® 2025 Language Specification # sec-set-objects