Movatterモバイル変換


[0]ホーム

URL:


  1. Web
  2. JavaScript
  3. JavaScript-Referenz
  4. Eingebaute Standardobjekte
  5. Set

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.

View in EnglishAlways switch to English

Set

Baseline Widely available *

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

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

DasSet-Objekt ermöglicht es Ihnen, einzigartige Werte jeglicher Art zu speichern, egal obprimäre Werte oder Objektverweise.

Beschreibung

Set-Objekte sind Sammlungen von Werten. Ein Wert in der Mengedarf 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. DieEinfügereihenfolge entspricht der Reihenfolge, in der jedes Element erfolgreich in das Set eingefügt wurde durch die Methodeadd() (das heißt, es war kein identisches Element bereits im Set, alsadd() 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 demSameValueZero-Algorithmus. (Früher wurdeSameValue verwendet, das0 und-0 als unterschiedlich behandelte. Überprüfen Sie dieBrowser-Kompatibilität.) Das bedeutet, dassNaN als dasselbe wieNaN betrachtet wird (auch wennNaN !== 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 AbschnittUsing the Set object für Beispiele.

Leistung

Die Methodehas 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 MethodeArray.prototype.includes, wenn ein Array einelength aufweist, die dersize eines Sets entspricht.

Set-Komposition

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

MethodeRückgabetypMathematisches ÄquivalentVenn-Diagramm
A.difference(B)SetABA\setminus BEin Venn-Diagramm, in dem sich zwei Kreise überlappen. Der Unterschied von A und B ist der Teil von A, der sich nicht mit B überschneidet.
A.intersection(B)SetABA\cap BEin Venn-Diagramm, in dem sich zwei Kreise überlappen. Die Schnittmenge von A und B ist der Teil, in dem sie sich überlappen.
A.symmetricDifference(B)Set(AB)(BA)(A\setminus B)\cup(B\setminus A)Ein Venn-Diagramm, in dem sich zwei Kreise überlappen. Der symmetrische Unterschied von A und B ist der Bereich, der entweder vom einen oder anderen, aber nicht von beiden Kreisen erfasst wird.
A.union(B)SetABA\cup BEin Venn-Diagramm, in dem sich zwei Kreise überlappen. Die Vereinigungsmenge von A und B ist der Bereich, der von einem oder beiden Kreisen erfasst wird.
A.isDisjointFrom(B)BooleanAB=A\cap B = \emptyEin Venn-Diagramm mit zwei Kreisen. A und B sind disjunkt, weil die Kreise keinen überlappenden Bereich haben.
A.isSubsetOf(B)BooleanABA\subseteq BEin Venn-Diagramm mit zwei Kreisen. A ist eine Teilmenge von B, weil A vollständig in B enthalten ist.
A.isSupersetOf(B)BooleanABA\supseteq BEin Venn-Diagramm mit zwei Kreisen. A ist eine Obermenge von B, weil B vollständig in A enthalten ist.

Um sie allgemeiner nutzbar zu machen, akzeptieren diese Methoden nicht nurSet-Objekte, sondern alles, wasmengenähnlich ist.

Mengenähnliche Objekte

AlleSet-Kompositionsmethoden erfordern, dassthis eine gültigeSet-Instanz ist, aber ihre Argumente müssen nur mengenähnlich sein. Einmengenähnliches Objekt ist ein Objekt, das Folgendes bietet:

  • Einesize-Eigenschaft, die eine Zahl enthält.
  • Einehas()-Methode, die ein Element nimmt und ein booleschen Wert zurückgibt.
  • Einekeys()-Methode, die einenIterator der Elemente im Set zurückgibt.

Zum Beispiel sindMap-Objekte mengenähnlich, weil sie ebenfallssize,has() undkeys() haben, so dass sie sich beim Einsatz in Set-Methoden wie Mengen von Schlüsseln verhalten:

js
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 mengenähnliche Protokoll ruft die Methodekeys() anstelle von[Symbol.iterator]() auf, um Elemente zu erzeugen. Dies geschieht, um Maps zu gängigen mengenähnlichen Objekten zu machen, da der Iterator bei MapsEinträge produziert, diehas()-Methode jedochSchlüssel nimmt.

Arrays sind nicht mengenähnlich, weil sie keinehas()-Methode oder diesize-Eigenschaft haben und ihrekeys()-Methode Indizes statt Elemente produziert.WeakSet-Objekte sind ebenfalls nicht mengenähnlich, da sie keinekeys()-Methode haben.

Mengenähnliche Browser-APIs

MengenähnlicheSet-Objekte (oder "setlike objects") sindWeb API-Schnittstellen, die sich in vielerlei Hinsicht wie einSet verhalten.

Genau wieSet können Elemente in derselben Reihenfolge iteriert werden, in der sie dem Objekt hinzugefügt wurden.Mengenähnliche Objekte undSet verfügen ebenfalls über Eigenschaften und Methoden, die denselben Namen und Verhalten teilen.Anders alsSet erlauben sie jedoch nur einen spezifischen vordefinierten Typ für jeden Eintrag.

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

webidl
interface GPUSupportedFeatures {  readonly setlike<DOMString>;};

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

Die Methoden und Eigenschaften haben dasselbe Verhalten wie die entsprechenden Entitäten inSet, mit Ausnahme der Beschränkung auf die Typen der Einträge.

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

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

Konstruktor

Set()

Erstellt ein neuesSet-Objekt.

Statische Eigenschaften

Set[Symbol.species]

Die Konstruktorfunktion, die verwendet wird, um abgeleitete Objekte zu erstellen.

Instanzeigenschaften

Diese Eigenschaften sind aufSet.prototype definiert und werden von allenSet-Instanzen geteilt.

Set.prototype.constructor

Die Konstruktorfunktion, die das Instanzobjekt erstellt hat. FürSet-Instanzen ist der Anfangswert derSet-Konstruktor.

Set.prototype.size

Gibt die Anzahl der Werte imSet-Objekt zurück.

Set.prototype[Symbol.toStringTag]

Der Anfangswert der[Symbol.toStringTag]-Eigenschaft ist der String"Set". Diese Eigenschaft wird inObject.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 demSet-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, dasein Array von[value, value] für jedes Element imSet-Objekt in Einfügereihenfolge enthält. Dies ähnelt demMap-Objekt, sodass jeder Eintragsschlüssel in einemSet mit seinem Wert identisch ist.

Set.prototype.forEach()

RuftcallbackFn einmal für jeden imSet-Objekt vorhandenen Wert in Einfügereihenfolge auf. Wenn einthisArg-Parameter angegeben wird, wird er alsthis-Wert für jeden Aufruf voncallbackFn verwendet.

Set.prototype.has()

Gibt einen booleschen Wert zurück, der angibt, ob der angegebene Wert in diesemSet 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ürSet.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 dieWerte für jedes Element imSet-Objekt in Einfügereihenfolge liefert.

Set.prototype[Symbol.iterator]()

Gibt ein neues Iterator-Objekt zurück, das dieWerte für jedes Element imSet-Objekt in Einfügereihenfolge liefert.

Beispiele

Verwenden des Set-Objekts

js
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 okaymySet1.has(1); // truemySet1.has(3); // false, since 3 has not been added to the setmySet1.has(5); // truemySet1.has(Math.sqrt(25)); // truemySet1.has("Some Text".toLowerCase()); // truemySet1.has(o); // truemySet1.size; // 5mySet1.delete(5); // removes 5 from the setmySet1.has(5); // false, 5 has been removedmySet1.size; // 4, since we just removed one valuemySet1.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 deletionconsole.log(mySet1); // Set(5) { 1, "some text", {…}, {…}, 5 }

Iterieren von Sets

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

js
for (const item of mySet1) {  console.log(item);}// 1, "some text", { "a": 1, "b": 2 }, { "a": 1, "b": 2 }, 5for (const item of mySet1.keys()) {  console.log(item);}// 1, "some text", { "a": 1, "b": 2 }, { "a": 1, "b": 2 }, 5for (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 herefor (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.fromconst 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 documentmySet1.add(document.body);mySet1.has(document.querySelector("body")); // true// converting between Set and Arrayconst mySet2 = new Set([1, 2, 3, 4]);console.log(mySet2.size); // 4console.log([...mySet2]); // [1, 2, 3, 4]// intersect can be simulated viaconst intersection = new Set([...mySet1].filter((x) => mySet2.has(x)));// difference can be simulated viaconst 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

js
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;}// Examplesconst 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 trueunion(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

js
const myArray = ["value1", "value2", "value3"];// Use the regular Set constructor to transform an Array into a Setconst 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

js
// Use to remove duplicate elements from an arrayconst 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

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

js
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® 2026 Language Specification
# sec-set-objects

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

[8]ページ先頭

©2009-2025 Movatter.jp