Noile metode pentru Set în JavaScript-Intersecții, diferențe și uniuni mai simple

Publicat pe: 04 Jul 2025 | 127 vizualizări | ~2 min. lectură

În JavaScript, lucrul cu mulțimi (Set) a fost mereu puțin greoi. Dar în ES2025, lucrurile se schimbă: acum avem metode native precum .union(), .intersection(), .difference() și .symmetricDifference(). Acestea fac codul mai clar, mai expresiv și mai ușor de întreținut.

Ce sunt aceste metode?

setA.union(setB) → combină toate elementele din ambele seturi
setA.intersection(setB) → păstrează doar elementele comune
setA.difference(setB) → păstrează doar ce e în setA, dar nu în setB
setA.symmetricDifference(setB) → păstrează elementele care sunt în exact unul dintre seturi

Exemplu live: Operații pe Set-uri

Live example: Set Operations

<div>
    <p><strong>Set A:</strong> [1, 2, 3, 4]</p>
    <p><strong>Set B:</strong> [3, 4, 5, 6]</p>
    <div id="results"></div>
  </div>
  <button onclick="showSetResults()">Run Example</button>

#results {
    margin-top: 1rem;
    font-family: monospace;
    background: #f9f9f9;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 6px;
  }

function showSetResults() {
    const setA = new Set([1, 2, 3, 4]);
    const setB = new Set([3, 4, 5, 6]);

    const results = {
      "Union": [...setA.union(setB)],
      "Intersection": [...setA.intersection(setB)],
      "Difference (A - B)": [...setA.difference(setB)],
      "Symmetric Difference": [...setA.symmetricDifference(setB)]
    };

    const output = Object.entries(results)
      .map(([label, values]) => `<p><strong>${label}:</strong> [${values.join(", ")}]</p>`)
      .join("");

    document.getElementById("results").innerHTML = output;
  }

Acum poți face operații pe mulțimi în mod clar, fără să scrii cod manual pentru fiecare combinație.

De ce contează?

Înainte, pentru a face o intersecție între două seturi, trebuia să scrii cod ca acesta:

const intersection = new Set([...setA].filter(x => setB.has(x)));

Acum, scrii doar:

const intersection = setA.intersection(setB);

Compatibilitate

Suportat în: Chrome 122+, Firefox 127+, Safari 17+, Edge 122+
Poți verifica suportul pe Can I Use
Nu necesită transpiler sau Babel

Concluzie

Noile metode pentru Set fac JavaScript mai expresiv și mai prietenos pentru programatori. Dacă lucrezi cu date, filtre sau colecții, aceste metode îți vor simplifica viața. Încearcă-le chiar acum în exemplul de mai sus!

Must Read

Meniu fullscreen animat în HTML și CSS

Meniu fullscreen HTML/CSS activat cu checkbox. Design fluid, animații elegante și compatibilitate totală, fără JavaScript.

Citește articolul

Sistem FAQ interactiv cu HTML, CSS si JavaScript

Sistem FAQ interactiv cu HTML, CSS și JS. Responsiv, animat, fără librării externe. Ideal pentru site-uri moderne și UX eficient

Citește articolul

CSS modern fără eleganță? Bine ai venit în lumea Tailwind

Tailwind CSS: haotic în aparență, dar eficient în practică. Află de ce este alegerea pragmatică în dezvoltarea web modernă.

Citește articolul

Construiește aplicații AI scalabile cu MCP și Next.js – integrare rapidă, securitate completă

Vrei să-ți conectezi AI-ul la date reale, fără haos? Next.js cu MCP face magie — vezi cum îl integrezi și protejezi tot.

Citește articolul

Politica Cookie-uri

Noile metode pentru Set în JavaScript-Intersecții, diferențe și uniuni mai simple

Ce sunt aceste metode?

Exemplu live: Operații pe Set-uri

De ce contează?

Compatibilitate

Concluzie

Adaugă comentariu

Must Read

Meniu fullscreen animat în HTML și CSS

Sistem FAQ interactiv cu HTML, CSS si JavaScript

CSS modern fără eleganță? Bine ai venit în lumea Tailwind

Construiește aplicații AI scalabile cu MCP și Next.js – integrare rapidă, securitate completă