JavaScript-sarjat

Sisällysluettelo

    Näytä sisällysluettelo

JavaScript-joukko on kokoelma ainutlaatuisia arvoja.

Jokainen arvo voi esiintyä vain kerran joukossa.

Essential set Methods

new Set()

Luo uuden sarjan

add()

Lisää joukkoon uuden elementin

delete()

Poistaa elementin joukosta

has()

Palauttaa tosi, jos joukossa on arvo

forEach()

Kutsuu takaisin jokaiselle joukon elementille

values()

Palauttaa iteraattorin, jossa on kaikki joukon arvot

size

Palauttaa joukon elementtien määrän

Kuinka luoda sarja

Voit luoda JavaScript-joukon seuraavasti:

  • Array välitetään new Set()-arvoon

  • Luo uusi joukko ja lisää arvoja käyttämällä add()-komentoa

  • Luo uusi joukko ja lisää muuttujia add()-komennolla

new Set() -menetelmä

Välitä taulukko uudelle Set()-konstruktorille:

Esimerkki

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

Kokeile itse →

<!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>

Luo joukko ja lisää arvoja:

Esimerkki

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

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

Kokeile itse →

<!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>

Luo joukko ja lisää muuttujia:

Esimerkki

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

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

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

Kokeile itse →

<!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>

add()-menetelmä

Esimerkki

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

Kokeile itse →

<!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>

Jos lisäät yhtä suuret elementit, vain ensimmäinen tallennetaan:

Esimerkki

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

Kokeile itse →

<!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>

forEach()-menetelmä

Metodi forEach() kutsuu (kutsuu) funktion jokaiselle Set-elementille:

Esimerkki

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

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

Kokeile itse →

<!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>

values()-menetelmä

Metodi values() palauttaa uuden iteraattoriobjektin, joka sisältää kaikki joukon arvot:

Esimerkki

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

Kokeile itse →

<!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>

Nyt voit käyttää Iterator-objektia elementtien käyttämiseen:

Esimerkki

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

Kokeile itse →

<!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>