Σύνολα JavaScript

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Ένα σύνολο JavaScript είναι μια συλλογή μοναδικών τιμών.

Κάθε τιμή μπορεί να εμφανιστεί μόνο μία φορά σε ένα σύνολο.

Ένα σύνολο μπορεί να κρατήσει οποιαδήποτε τιμή οποιουδήποτε τύπου δεδομένων.

Ορισμός μεθόδων

new Set()

Δημιουργεί ένα νέο σύνολο

add()

Προσθέτει ένα νέο στοιχείο στο Σετ

delete()

Αφαιρεί ένα στοιχείο από ένα σύνολο

has()

Επιστρέφει true εάν υπάρχει μια τιμή

clear()

Αφαιρεί όλα τα στοιχεία από ένα σύνολο

forEach()

Καλεί μια επανάκληση για κάθε στοιχείο

values()

Επιστρέφει έναν Iterator με όλες τις τιμές σε ένα σύνολο

keys()

Το ίδιο με τις τιμές()

entries()

Επιστρέφει έναν Iterator με τα ζεύγη [value,value] από ένα σύνολο

size

Επιστρέφει τα αριθμητικά στοιχεία σε ένα σύνολο

Πώς να δημιουργήσετε ένα σύνολο

Μπορείτε να δημιουργήσετε ένα σύνολο JavaScript από:

  • Μεταβίβαση πίνακα στο new Set()

  • Δημιουργήστε ένα νέο σύνολο και χρησιμοποιήστε το add() για να προσθέσετε τιμές

  • Δημιουργήστε ένα νέο σύνολο και χρησιμοποιήστε το add() για να προσθέσετε μεταβλητές

Η νέα μέθοδος Set()

Περάστε έναν πίνακα στον κατασκευαστή new Set():

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Δημιουργήστε ένα σύνολο και προσθέστε κυριολεκτικές τιμές:

Παράδειγμα

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

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

Δοκιμάστε το μόνοι σας →

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

Δημιουργήστε ένα σύνολο και προσθέστε μεταβλητές:

Παράδειγμα

// 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);

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Εάν προσθέσετε ίσα στοιχεία, θα αποθηκευτεί μόνο το πρώτο:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Η μέθοδος forEach() καλεί μια συνάρτηση για κάθε στοιχείο συνόλου:

Παράδειγμα

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

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

Δοκιμάστε το μόνοι σας →

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

Η μέθοδος values() επιστρέφει ένα αντικείμενο Iterator που περιέχει όλες τις τιμές σε ένα σύνολο:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Τώρα μπορείτε να χρησιμοποιήσετε το αντικείμενο Iterator για πρόσβαση στα στοιχεία:

Παράδειγμα

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

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

Δοκιμάστε το μόνοι σας →

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

Η μέθοδος keys()

Ένα σετ δεν έχει κλειδιά.

Το keys() επιστρέφει το ίδιο με values().

Αυτό καθιστά τα σύνολα συμβατά με τους Χάρτες.

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Η μέθοδος entries()

Ένα σετ δεν έχει κλειδιά.

Το entries() επιστρέφει ζεύγη [value,value] αντί για ζεύγη [key,value].

Αυτό καθιστά τα σύνολα συμβατά με τους Χάρτες:

Παράδειγμα

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

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

Δοκιμάστε το μόνοι σας →

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

Τα σύνολα είναι αντικείμενα

Για ένα σύνολο, ο τύπος επιστρέφει αντικείμενο:

typeof letters;      // Returns object

Δοκιμάστε το μόνοι σας →

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

Για ένα σύνολο, η παρουσίαση του συνόλου επιστρέφει true:

letters instanceof Set;  // Returns true

Δοκιμάστε το μόνοι σας →

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