Heim > Artikel > Web-Frontend > Machen Sie Ihr Leben einfacher mit Set Compositions
Endlich! Als Set in der Vergangenheit eingeführt wurde, hat es unser Leben bereits verbessert. Wir konnten auf einfache Weise eindeutige Listen erstellen, erzielten aber auch eine bessere Leistung beim Suchen und Festlegen von Elementen in diesen Listen.
Das war großartig, aber uns fehlten immer noch einige Dinge, die andere Sprachen hatten. Und das ist wahr, denn wir waren es. Mit den neuen Kompositionsmethoden, die Set im Jahr 2024 hinzugefügt werden, werden wir endlich in der Lage sein, Vereinigung, Schnittmenge, Differenz und mehr mit einfachen Aufrufen durchzuführen.
Lasst uns ohne weitere Umschweife darauf eingehen.
Gibt ein neues Set zurück, das Elemente enthält, die im ersten Set, aber nicht im zweiten vorhanden sind.
Beispiel: Sie möchten sehen, welche Benutzer die Website in dieser Woche besucht haben, die sie im letzten Monat nicht besucht haben.
Wie benutzt man es?
const thisWeekUsers = new Set([1, 2, 3, 4]); const lastMonthUsers = new Set([3, 4, 5, 6]); const newUsers = thisWeekUsers.difference(lastMonthUsers); console.log(newUsers); // Set(2) { 1, 2 }
Wie haben wir das früher gemacht?
const thisWeekUsers = [1, 2, 3, 4]; const lastMonthUsers = [3, 4, 5, 6]; let newUsers = thisWeekUsers.filter(x => !lastMonthUsers.includes(x)); console.log(newUsers); // (2) [1,2]
Weitere Informationen finden Sie unter: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/difference
Gibt einen neuen Satz mit nur den Werten zurück, die in beiden Sätzen vorhanden sind.
Beispiel: Sie legen ein E-Book-Paket in den Warenkorb, hatten aber bereits einige dieser Bücher dort.
Wie benutzt man es?
const booksBundle = new Set([1, 2, 3, 4]); const cart = new Set([3, 4, 5, 6]); const booksToAdd = booksBundle.intersection(cart); console.log(booksToAdd); // Set(2) { 3, 4 }
Wie haben wir das früher gemacht?
const booksBundle = [1, 2, 3, 4]; const cart = [3, 4, 5, 6]; const booksToAdd = booksBundle.filter(book => cart.includes(book)); console.log(booksToAdd); // (2) [3, 4]
Weitere Informationen finden Sie unter: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/intersection
Gibt einen neuen Satz mit den Werten zurück, die sich in keiner der Gruppen wiederholen.
Beispiel: Überprüfen überfüllter Artikel zwischen Geschäften, um zu prüfen, welche Artikel umgetauscht werden können.
Wie benutzt man es?
const firstStore = new Set([1, 2, 3, 4]); const secondStore = new Set([3, 4, 5, 6]); const overstockedItems = firstStore.symmetricDifference(secondStore); console.log(overstockedItems); // Set(4) { 1, 2, 5, 6 }
Wie haben wir das früher gemacht?
const firstStore = [1, 2, 3, 4]; const secondStore = [3, 4, 5, 6]; const allItems = [firstStore, secondStore].flat(); const overstockedItems = allItems.filter(item => { return !firstStore.includes(item) || !secondStore.includes(item); }); console.log(overstockedItems); // (4) [1, 2, 5, 6]
Weitere Informationen finden Sie unter: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/symmetricDifference
Gibt einen neuen Satz mit den Werten beider Gruppen zurück, jedoch ohne Wiederholung von Werten.
Beispiel: Sie und Ihr Freund möchten Wiedergabelisten zusammenführen, aber einige Musikstücke sind gleich.
Wie benutzt man es?
const yourPlaylist = new Set([1, 2, 3, 4]); const friendPlaylist = new Set([3, 4, 5, 6]); const mergedPlaylist = yourPlaylist.union(friendPlaylist); console.log(mergedPlaylist); // Set(6) { 1, 2, 3, 4, 5, 6 }
Wie haben wir das früher gemacht?
const yourPlaylist = [1, 2, 3, 4]; const friendPlaylist = [3, 4, 5, 6]; const mergedPlaylist = new Set([yourPlaylist, friendPlaylist].flat()); console.log(mergedPlaylist); // (6) [1, 2, 3, 4, 5, 6]
Weitere Informationen finden Sie unter: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/union
Es wird ein Boolescher Wert zurückgegeben. Es ist wahr, wenn beide Mengen keine gemeinsamen Werte haben, und falsch, wenn sie mindestens einen gemeinsamen Wert haben.
Beispiel: Sehen Sie, dass es Produkte gibt, die Teil anderer Gruppen sind.
Wie benutzt man es?
const electronics = new Set([1, 2, 3, 4]); const furniture = new Set([3, 4, 5, 6]); const groceries = new Set(['apple']); console.log(electronics.isDisjointFrom(furniture)); // false console.log(electronics.isDisjointFrom(groceries)); // true
Wie haben wir das früher gemacht?
const electronics = [1, 2, 3, 4]; const furniture = [3, 4, 5, 6]; const groceries = ['apple']; function isDisjoint(array1, array2) { return array1.every(item => !array2.includes(item)); } console.log(isDisjoint(electronics, furniture)); // false console.log(isDisjoint(electronics, groceries)); // true
Weitere Informationen finden Sie unter: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/isDisjointFrom
Diese beiden Funktionen sind sehr ähnlich. Beide geben einen booleschen Wert zurück und sind direkte Gegensätze. Superset gibt „true“ zurück, wenn die Menge eine Obermenge einer anderen Menge ist, und Subset gibt „true“ zurück, wenn die Menge eine Teilmenge einer anderen Menge ist.
Ich füge diese Funktionen zusammen, weil es ausreicht, die Antwort auf eine davon zu kennen, um die andere zu kennen. Eine Menge kann nur eine Obermenge einer Teilmenge einer Menge sein.
Beispiel: Verstehen Sie, ob Benutzer Teil einer Unternehmensgruppe sind.
Wie benutzt man es?
const itDepartment = new Set([1, 2, 3, 4]); const genZFromToronto = new Set([3, 4]); console.log(itDepartment.isSupersetOf(genZFromToronto)); // true console.log(genZFromToronto.isSubsetOf(itDepartment)); // true
Wie haben wir das früher gemacht?
const itDepartment = [1, 2, 3, 4]; const genZFromToronto = [3, 4]; console.log(genZFromToronto.every(item => itDepartment.includes(item))); // true
Erfahren Sie mehr unter:
Jetzt sind Sie bereit Es tut mir nicht leid, es in Ihrem Projekt zu verwenden!
Lassen Sie mich wissen, wenn Sie auch davon oder von einer anderen Funktion begeistert sind oder etwas anderes behandelt sehen möchten. Bis zum nächsten Mal o/
Das obige ist der detaillierte Inhalt vonMachen Sie Ihr Leben einfacher mit Set Compositions. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!