Publikuar më

Set JavaScript: Hyrje për Programues Fillestarë

Autorët

Pse Set?

Është një strukturë të dhënash që ju lejon të ruani vlera unike të çdo lloji. Është e ngjashme me një array por nuk lejon vlera të përsëritura. Është një mënyrë e shkëlqyer për të mbajtur vlera unike të çdo lloji. Ndonjëherë ju dëshironi të ruani vlera unike në një array, por nuk dëshironi të kaloni nëpër array për të kontrolluar nëse vlera ekziston tashmë. Këtu vjen Set për të ndihmuar.

Në një artikull të mëparshëm, ne diskutuam për Javascript Map. Set është i ngjashëm me Map, por ai ruan vetëm çelësat, jo vlerat. Është një mënyrë e shkëlqyer për të mbajtur vlera unike të çdo lloji. Është e vështirë të përdorësh Map në kaq shumë raste. Kjo është arsyeja pse të flasim për Set.

Çfarë është JavaScript Set?

Objektet Set janë koleksione të vlerave. Një vlerë në Set mund të ndodhë vetëm një herë; është unike në koleksionin e Set. Ju mund të iteroni përmes elementeve të një Set në rendin e futjes. Rendi i futjes korrespondon me rendin në të cilin çdo pjesë është futur në Set nga metoda add() me sukses (pra, nuk kishte një element identik që ishte tashmë në Set kur Set thirri add()).

Specifikimi kërkon që set-et të implementohen "të cilat, mesatarisht, ofrojnë kohë hyrje që janë sublineare në numrin e elementeve në koleksion." Prandaj, mund të përfaqësohet në mënyrë të brendshme si një tabelë hash (me O(1) kërkim), një pemë kërkimi (me O(log(N)) kërkim), ose çdo strukturë tjetër të dhënash, për sa kohë që kompleksiteti është më i mirë se O(N).

Si të krijoni një Set?

Ekzistojnë dy mënyra për të krijuar një Set. Mënyra e parë është të përdorni konstruktorin Set. Mënyra e dytë është të përdorni literalin e objektit Set.

Konstruktor Set

Konstruktorin Set krijon një objekt Set të ri. Ju mund të kaloni një objekt të përsëritur si argument në konstruktor. Elementet e objektit të përsëritur do të shtohen në Set të ri.

const set = new Set([1, 2, 3, 4, 5])

Literali i objektit Set

Literali i objektit Set krijon një objekt Set të ri. Ju mund të kaloni një objekt të përsëritur si argument në literalin e objektit. Elementet e objektit të përsëritur do të shtohen në Set të ri.

const set = {1, 2, 3, 4, 5};

Metodat & Pronat e Set

MetodaPërshkrimi
add()Shto një element të ri me një vlerë të specifikuar në objekt Set.
clear()Fshij të gjitha elementet nga objekti Set.
delete()Fshij elementin që lidhet me vlerën dhe kthe vlerën që Set.prototype.has(vlerë) do të kishte kthyer më parë. Set.prototype.has(vlerë) do të kthejë false më pas.
entries()Kthe një objekt Iterator të ri që përmban një array të [vlerë, vlerë] për çdo element në objekt Set, në rendin e futjes.
forEach()Ekzekuto një funksion të dhënë një herë për çdo vlerë në objekt Set, në rendin e futjes.
has()Kthe një boolean duke pohuar nëse një element është i pranishëm me vlerën e dhënë në objekt Set.
keys()Kthe një objekt Iterator të ri që përmban vlerat për çdo element në objekt Set në rendin e futjes.
values()Kthe një objekt Iterator të ri që përmban vlerat për çdo element në objekt Set në rendin e futjes.
PronaPërshkrimi
sizeKthe numrin e vlerave në objekt Set.

Shembuj të Set

Shto një vlerë në Set

const set = new Set([1, 2, 3, 4, 5])
set.add(6)
console.log(Set) // Set { 1, 2, 3, 4, 5, 6 }

Fshij një vlerë nga Set

const set = new Set([1, 2, 3, 4, 5])
set.delete(3)
console.log(set) // Set { 1, 2, 4, 5 }

Kontrollo nëse një vlerë ekziston në Set

const set = new Set([1, 2, 3, 4, 5])
console.log(set.has(3)) // true

Iteroni përmes Set

const set = new Set([1, 2, 3, 4, 5])
for (const item of Set) {
  console.log(item)
}
// 1
// 2
// 3
// 4
// 5

Konverto Set në Array

const set = new Set([1, 2, 3, 4, 5])
const array = Array.from(set)
console.log(array) // [1, 2, 3, 4, 5]

Konverto Array në Set

const Array = [1, 2, 3, 4, 5]
const set = new Set(array)
console.log(Set) // Set { 1, 2, 3, 4, 5 }

Merr madhësinë e Set

const set = new Set([1, 2, 3, 4, 5])
console.log(set.size) // 5

Pastro Set

const set = new Set([1, 2, 3, 4, 5])
set.clear()
console.log(set) // Set {}

Bashko Set

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([6, 7, 8, 9, 10])
const set3 = new Set([...set1, ...set2])
console.log(set3) // Set { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 }

Merr ndërprerjen e dy Set-eve

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5, 6, 7, 8])
const set3 = new Set([...set1].filter((x) => set2.has(x)))
console.log(set3) // Set { 4, 5 }

Merr diferencën midis dy Set-eve

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5, 6, 7, 8])
const set3 = new Set([...set1].filter((x) => !set2.has(x)))
console.log(set3) // Set { 1, 2, 3 }

Kontrollo nëse Set është një nën-shumëz i një Set tjetër

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5])
console.log([...set2].every((x) => set1.has(x))) // true

Kontrollo nëse Set është një super-shumëz i një Set tjetër

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5])
console.log([...set1].every((x) => set2.has(x))) // false

Kontrollo nëse dy Set janë të ndara

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([6, 7, 8, 9, 10])
console.log([...set1].every((x) => !set2.has(x))) // true

Kontrollo nëse dy Set janë të barabarta

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([1, 2, 3, 4, 5])
console.log(set1.size === set2.size && [...set1].every((x) => set2.has(x))) // true

Mbështetja e Shfletuesve

ChromeChromeFirefoxFirefoxEdgeEdgeSafariSafariOperaOpera
49+44+12+10.1+36+

Set vs. Array

SetArray
Vlerë unike, mos lejo vlera të përsërituraLejo vlera të përsëritura
Set është një koleksion i vlerave pa ndonjë rend të veçantëArray është një koleksion i vlerave në një rend të veçantë
Set është i përsëriturArray është i përsëritur
Set është më i ngadalshëm se një array në inicializim sepse përdor një proces hash.Array është më i shpejtë në inicializim
Performanca është më e mirë kur kontrollohen për ekzistencën e një elementiPerformanca është më e mirë kur arrihet një element

Ky artikull është botuar fillimisht në blog.imam.dev.

Referenca

  1. Mozilla Developer Network - Set

  2. W3Schools - Set

  3. ECMAScript® 2015 Language Specification - Set