JavaScript-uppsättningar


Innehållsförteckning

    Visa innehållsförteckning

En JavaScript-uppsättning är en samling unika värden.

Varje värde kan bara förekomma en gång i en uppsättning.

En uppsättning kan innehålla vilket värde som helst av vilken datatyp som helst.

Ställ in metoder

new Set()

Skapar en ny uppsättning

add()

Lägger till ett nytt element i uppsättningen

delete()

Tar bort ett element från en uppsättning

has()

Returnerar sant om ett värde finns

clear()

Tar bort alla element från en uppsättning

forEach()

Anropar en återuppringning för varje element

values()

Returnerar en iterator med alla värden i en uppsättning

keys()

Samma som värden()

entries()

Returnerar en Iterator med [värde,värde]-paren från en uppsättning

size

Returnerar sifferelementen i en uppsättning


Hur man skapar ett set

Du kan skapa en JavaScript-uppsättning genom att:

  • Skickar en array till new Set()

  • Skapa en ny uppsättning och använd add() för att lägga till värden

  • Skapa en ny uppsättning och använd add() för att lägga till variabler


Den nya metoden Set()

Skicka en array till new Set()-konstruktorn:

Exempel

// Create a Set
const letters = new Set(["a","b","c"]);

Prova själv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Create a Set from an Array:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

Skapa en uppsättning och lägg till bokstavliga värden:

Exempel

// Create a Set
const letters = new Set();

// Add Values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

Prova själv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add values to a Set:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set();

// Add Values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

Skapa en uppsättning och lägg till variabler:

Exempel

// Create Variables
const a = "a";
const b = "b";
const c = "c";

// Create a Set
const letters = new Set();

// Add Variables to the Set
letters.add(a);
letters.add(b);
letters.add(c);

Prova själv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add variables to a Set:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set();

// Create Variables
const a = "a";
const b = "b";
const c = "c";

// Add the Variables to the Set
letters.add(a);
letters.add(b);
letters.add(c);

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

Metoden add()

Exempel

letters.add("d");
letters.add("e");

Prova själv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Adding new elements to a Set:</p>

<p id="demo"></p>

<script>
// Create a new Set
const letters = new Set(["a","b","c"]);

// Add a new Element
letters.add("d");
letters.add("e");

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

Om du lägger till lika stora element sparas bara de första:

Exempel

letters.add("a");
letters.add("b");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");

Prova själv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Adding equal elements to a Set:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set();

// Add values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>


Metoden forEach()

Metoden forEach() anropar en funktion för varje Set-element:

Exempel

// Create a Set
const letters = new Set(["a","b","c"]);

// List all entries
let text = "";
letters.forEach (function(value) {
  text += value;
})

Prova själv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>forEach() calls a function for each element:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// List all Elements
let text = "";
letters.forEach (function(value) {
  text += value + "<br>";
})

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Metoden values()

Metoden values() returnerar ett Iterator-objekt som innehåller alla värden i en uppsättning:

Exempel

letters.values()   // Returns [object Set Iterator]

Prova själv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Set.values() returns a Set Iterator:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// Display set.size
document.getElementById("demo").innerHTML = letters.values();
</script>

</body>
</html>

Nu kan du använda Iterator-objektet för att komma åt elementen:

Exempel

// Create an Iterator
const myIterator = letters.values();

// List all Values
let text = "";
for (const entry of myIterator) {
  text += entry;
}

Prova själv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Iterating Set values:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// List all Elements
let text = "";
for (const x of letters.values()) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Metoden keys()

Ett set har inga nycklar.

nycklar() returnerar samma som värden().

Detta gör Sets kompatibla med Maps.

Exempel

letters.keys()   // Returns [object Set Iterator]

Prova själv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Set.keys() returns a Set Iterator:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// Display set.size
document.getElementById("demo").innerHTML = letters.keys();
</script>

</body>
</html>

Metoden entries()

Ett set har inga nycklar.

entries() returnerar [värde,värde] par istället för [nyckel,värde]-par.

Detta gör Sets kompatibla med Maps:

Exempel

// Create an Iterator
const myIterator = letters.entries();

// List all Entries
let text = "";
for (const entry of myIterator) {
  text += entry;
}

Prova själv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>entries() Returns an Iterator with [value,value] pairs from a Set:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// List all entries
const iterator = letters.entries();
let text = "";
for (const entry of iterator) {
  text += entry + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Uppsättningar är objekt

För en uppsättning returnerar typeof objekt:

typeof letters;      // Returns object

Prova själv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets Objects</h2>
<p>The typeof operator returns object:</p>

<p id="demo"></p>

<script>
// Create a new Set
const letters = new Set(["a","b","c"]);

// Display typeof
document.getElementById("demo").innerHTML = typeof letters;
</script>

</body>
</html>

För en uppsättning returnerar instans av uppsättning true:

letters instanceof Set;  // Returns true

Prova själv →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>The instanceof operator returns true:</p>

<p id="demo"></p>

<script>
// Create a new Set
const letters = new Set(["a","b","c"]);

// Display typeof
document.getElementById("demo").innerHTML = letters instanceof Set;
</script>

</body>
</html>