Set

Beschreibung

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

Die Spezifikation erfordert, dass Sets so implementiert werden, dass sie "im Durchschnitt Zugriffszeiten bieten, die unterlinear in Bezug auf die Anzahl der Elemente in der Sammlung sind". Daher könnte es intern als Hashtabelle (mit O(1)-Lookup), Suchbaum (mit O(log(N))-Lookup) oder jede andere Datenstruktur dargestellt werden, solange die Komplexität besser als O(N) ist.

Wertgleichheit

Die Wertgleichheit basiert auf dem SameValueZero-Algorithmus. (Früher wurde SameValue verwendet, das 0 und -0 als unterschiedlich behandelte. Überprüfen Sie die Browser-Kompatibilität.) Das bedeutet, dass NaN als dasselbe wie NaN betrachtet wird (auch wenn NaN !== NaN) und alle anderen Werte gemäß den Semantiken des ===-Operators gleich betrachtet werden. Auch für Objekt-Schlüssel basiert die Gleichheit auf der Objektidentität. Sie werden nach Referenz verglichen, nicht nach Wert. Sehen Sie den Abschnitt Using the Set object für Beispiele.

Leistung

Die Methode has prüft, ob ein Wert im Set vorhanden ist, und verwendet dabei einen Ansatz, der im Durchschnitt schneller ist als das Testen der meisten Elemente, die zuvor dem Set hinzugefügt wurden. Insbesondere ist es im Durchschnitt schneller als die Methode Array.prototype.includes, wenn ein Array eine length aufweist, die der size eines Sets entspricht.

Set-Komposition

Das Set-Objekt bietet einige Methoden, die es Ihnen erlauben, Mengen so zu komponieren, wie Sie es mit mathematischen Operationen tun würden. Diese Methoden umfassen:

Methode	Rückgabetyp	Mathematisches Äquivalent	Venn-Diagramm
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 allgemeiner nutzbar zu machen, akzeptieren diese Methoden nicht nur Set-Objekte, sondern alles, was mengenähnlich ist.

Mengenähnliche Objekte

Alle Set-Kompositionsmethoden erfordern, dass this eine gültige Set-Instanz ist, aber ihre Argumente müssen nur mengenähnlich sein. Ein mengenähnliches Objekt ist ein Objekt, das Folgendes bietet:

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

Zum Beispiel sind Map-Objekte mengenähnlich, weil sie ebenfalls size, has() und keys() haben, so dass sie sich beim Einsatz in Set-Methoden wie Mengen von Schlüsseln verhalten:

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}

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

Mengenähnliche Browser-APIs

Mengenähnliche Set-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 iteriert werden, in der sie dem Objekt hinzugefügt wurden. Mengenähnliche Objekte und Set verfügen ebenfalls über Eigenschaften und Methoden, die denselben Namen und Verhalten teilen. Anders als Set erlauben sie jedoch nur einen spezifischen vordefinierten Typ für jeden Eintrag.

Die erlaubten Typen sind in der Spezifikation IDL-Definition festgelegt. Zum Beispiel ist GPUSupportedFeatures ein mengenähnliches Objekt, das Strings als Schlüssel/Wert verwenden muss. Dies wird in der Spezifikation IDL unten definiert:

interface GPUSupportedFeatures {
  readonly setlike<DOMString>;
};

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

• Schreibgeschützte mengenähnliche Objekte haben die Eigenschaft size, und die Methoden: entries(), forEach(), has(), keys(), values(), und Symbol.iterator().
• Schreibbare mengenä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 Beschränkung auf die Typen der Einträge.

Die folgenden sind Beispiele für schreibgeschützte mengenähnliche Browser-Objekte:

• GPUSupportedFeatures
• XRAnchorSet

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

• CustomStateSet
• FontFaceSet
• Highlight
• ViewTransitionTypeSet

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 den angegebenen Wert in das Set ein, wenn er nicht bereits vorhanden ist.

Set.prototype.clear()

Entfernt alle Elemente aus dem Set-Objekt.

Set.prototype.delete()

Entfernt den angegebenen Wert aus diesem Set, wenn er sich in der Menge befindet.

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 ähnelt dem Map-Objekt, sodass jeder Eintragsschlüssel in einem Set mit seinem Wert identisch ist.

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 booleschen Wert zurück, der angibt, ob der angegebene Wert in diesem Set 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 angegebenen Set vorhanden sind.

Set.prototype.isDisjointFrom()

Nimmt ein Set und gibt einen booleschen Wert zurück, der angibt, ob dieses Set keine gemeinsamen Elemente mit dem angegebenen Set hat.

Set.prototype.isSubsetOf()

Nimmt ein Set und gibt einen booleschen Wert zurück, der angibt, ob alle Elemente dieses Sets im angegebenen Set sind.

Set.prototype.isSupersetOf()

Nimmt ein Set und gibt einen booleschen Wert zurück, der angibt, ob alle Elemente des angegebenen Sets in diesem Set 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 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 einem oder beiden diesem Set und dem angegebenen Set 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 Elemente in der 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

Implementierung 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

Entfernen von doppelten Elementen aus einem Array

// 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 Zeichenfolgen

// 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" ]

Verwenden eines Sets, um die Einzigartigkeit einer Liste von Werten sicherzustellen

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

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Polyfill von Set in core-js
• es-shims Polyfill von Set
• Map
• WeakMap
• WeakSet