Förstå uppsättningar i JavaScript

Innehållsförteckning

En ny funktion i JavaScript ES6 är Set. Låt oss undersöka vad det innebär.

Vad är egentligen ett Set?

Hur kan vi använda Set i JavaScript?

Och vilka metoder finns tillgängliga för att lösa problem med Set?

Vi kommer att utforska svaren på alla dessa frågor i den här genomgången.

Set

Som namnet antyder, är ett Set en samling av unika element. Det lagrar alltså inte dubbletter av värden.

I JavaScript lagras elementen i ett Set i den ordning de läggs till. Detta innebär att de är ordnade. Set kan innehålla både primitiva datatyper och objekt.

Låt oss titta på hur man skapar ett Set i JavaScript.

Jag förutsätter att du har en utvecklingsmiljö tillgänglig för att öva på exemplen.

const namn = new Set(["Kalle", "Lisa", "Olle", "Anna", "Lisa"]);
console.log(namn);

const slumpord = new Set("Hejhejhej");
console.log(slumpord);

const siffror = new Set([1, 1, 2, 3, 3, 4, 5, 2]);
console.log(siffror);

Egenskaper och metoder

Set har ett antal användbara egenskaper och metoder som underlättar hantering och problemlösning. Dessa metoder är ofta självförklarande. Låt oss undersöka dem en efter en.

storlek

Egenskapen `storlek` returnerar antalet element som finns i Set.

const namn = new Set(["Kalle", "Lisa", "Olle", "Anna", "Lisa"]);
console.log(`Antal element: ${namn.size}`);

Lägg till

Metoden `add` används för att lägga till ett nytt element till Set. Om elementet redan finns i Set kommer det inte att läggas till igen.

// Tomt Set
const namn = new Set();

namn.add("Kalle");
namn.add("Lisa");
namn.add("Olle");
namn.add("Anna");
namn.add("Lisa");

console.log(namn);

har

Metoden `has` tar ett argument och returnerar `true` om elementet finns i Set, annars returneras `false`.

const namn = new Set(["Kalle", "Lisa", "Olle", "Anna", "Lisa"]);

console.log(namn.has("Lisa"));
console.log(namn.has("Bertil"));

radera

Som förväntat tar metoden `delete` ett argument och tar bort det från Set. Det uppstår inget fel även om det angivna argumentet inte finns i Set.

const namn = new Set(["Kalle", "Lisa", "Olle", "Anna", "Lisa"]);

namn.delete("Kalle");

console.log(namn);

poster

Metoden `entries` returnerar en iterator som innehåller arrayer av nyckel-värdepar i infogningsordningen. Här är nyckel och värde identiska.

const namn = new Set(["Kalle", "Lisa", "Olle", "Anna", "Lisa"]);

const poster = namn.entries();

console.log(poster.next().value);
console.log(poster.next().value);
console.log(poster.next().value);
console.log(poster.next().value);
console.log(poster.next().value);

nycklar

Metoden `keys` returnerar en iterator av Set-element i den ordning de lagts till.

const namn = new Set(["Kalle", "Lisa", "Olle", "Anna", "Lisa"]);

const nycklar = namn.keys();

console.log(nycklar.next().value);
console.log(nycklar.next().value);
console.log(nycklar.next().value);
console.log(nycklar.next().value);
console.log(nycklar.next().value);

värden

Metoden `values` returnerar en iterator av Set-element i insättningsordningen, precis som metoden `keys`.

const namn = new Set(["Kalle", "Lisa", "Olle", "Anna", "Lisa"]);

const varden = namn.values();

console.log(varden.next().value);
console.log(varden.next().value);
console.log(varden.next().value);
console.log(varden.next().value);
console.log(varden.next().value);

klar

Metoden `clear` tar bort alla element från Set.

const namn = new Set(["Kalle", "Lisa", "Olle", "Anna", "Lisa"]);

namn.clear();

console.log(namn);

för varje

Metoden `forEach` används för att iterera över Set och få varje element ett i taget.

const namn = new Set(["Kalle", "Lisa", "Olle", "Anna", "Lisa"]);

namn.forEach((element) => {
    console.log(element);
});

Användningsområden

Låt oss titta på ett enkelt exempel där vi använder Set i ett program. Givet en array, ta bort alla dubbletter av värden. För att lösa det här problemet kan vi använda Set.

Här följer stegen för hur man gör det:

Skapa en array med testdata.
Skapa ett tomt Set.
Gå igenom varje element i arrayen.
- Lägg till varje element i Set.
- Set kommer automatiskt att ta bort dubbletter.
Skapa en tom array.
Gå igenom Set och lägg till varje element i den nya arrayen.
Skriv ut den nya arrayen.

Jag hoppas att du kan lösa det här själv. Om du tycker det är svårt att koda, se lösningen nedan.

const arr = ["Kalle", "Lisa", "Olle", "Anna", "Lisa"];

const temp = new Set();

arr.forEach((element) => {
    temp.add(element);
});

const newArr = [];

temp.forEach((element) => {
    newArr.push(element);
});

console.log(newArr);