Χάρτες JavaScript

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

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

Ένας Χάρτης περιέχει ζεύγη κλειδιών-τιμών όπου τα κλειδιά μπορούν να είναι οποιοσδήποτε τύπος δεδομένων.

Ένας χάρτης θυμάται την αρχική σειρά εισαγωγής των κλειδιών.

Βασικές μέθοδοι χαρτών

new Map()

Δημιουργεί νέο χάρτη

set()

Ορίζει την τιμή για ένα κλειδί σε έναν Χάρτη

get()

Λαμβάνει την τιμή για ένα κλειδί σε έναν Χάρτη

delete()

Καταργεί ένα στοιχείο χάρτη που καθορίζεται από το κλειδί

has()

Επιστρέφει true εάν υπάρχει ένα κλειδί σε έναν χάρτη

forEach()

Καλεί μια συνάρτηση για κάθε ζεύγος κλειδιών/τιμών σε έναν Χάρτη

entries()

Επιστρέφει έναν επαναλήπτη με τα ζεύγη [key, value] σε έναν Χάρτη

size

Επιστρέφει τον αριθμό των στοιχείων σε έναν Χάρτη

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

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

  • Μεταβίβαση πίνακα στον νέο χάρτη()

  • Δημιουργήστε έναν χάρτη και χρησιμοποιήστε το Map.set()

Η μέθοδος new Map()

Μπορείτε να δημιουργήσετε έναν χάρτη περνώντας έναν πίνακα στον κατασκευαστή new Map():

Παράδειγμα

// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Creating a Map from an Array:</p>

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

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

Η μέθοδος set()

Μπορείτε να προσθέσετε στοιχεία σε έναν Χάρτη με τη μέθοδο set():

Παράδειγμα

// Create a Map
const fruits = new Map();

// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.set():</p>

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

<script>
// Create a Map
const fruits = new Map();

// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

Η μέθοδος set() μπορεί επίσης να χρησιμοποιηθεί για την αλλαγή των υπαρχουσών τιμών του χάρτη:

Παράδειγμα

fruits.set("apples", 200);

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.set():</p>

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

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

fruits.set("apples", 200);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

Η μέθοδος get()

Η μέθοδος get() λαμβάνει την τιμή ενός κλειδιού σε έναν Χάρτη:

Παράδειγμα

fruits.get("apples");    // Returns 500

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.get():</p>

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

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

Η ιδιότητα size

Η ιδιότητα size επιστρέφει τον αριθμό των στοιχείων σε έναν Χάρτη:

Παράδειγμα

fruits.size;

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.size:</p>

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

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

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

</body>
</html>

Η μέθοδος delete()

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

Παράδειγμα

fruits.delete("apples");

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Deleting Map elements:</p>

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

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

// Delete an Element
fruits.delete("apples");

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

</body>
</html>

Η μέθοδος has()

Η μέθοδος has() επιστρέφει true εάν υπάρχει ένα κλειδί σε έναν χάρτη:

Παράδειγμα

fruits.has("apples");

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.has():</p>

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

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.has("apples");
</script>

</body>
</html>

Δοκιμάστε αυτό:

fruits.delete("apples");
fruits.has("apples");

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.has():</p>

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

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

// Delete an Element
fruits.delete("apples");

document.getElementById("demo").innerHTML = fruits.has("apples");
</script>

</body>
</html>

Αντικείμενα JavaScript vs Χάρτες

Διαφορές μεταξύ αντικειμένων JavaScript και Χαρτών:

Αντικείμενο

Επανάληψη: Δεν επαναλαμβάνεται άμεσα

Μέγεθος: Δεν υπάρχει ιδιότητα μεγέθους

Τύποι κλειδιών: Τα κλειδιά πρέπει να είναι συμβολοσειρές (ή σύμβολα)

Σειρά κλειδιών: Τα κλειδιά δεν είναι σωστά ταξινομημένα

Προεπιλογές: Έχετε προεπιλεγμένα κλειδιά

Χάρτης

Επανάληψη: Αμεσα επαναλαμβανόμενο

Μέγεθος: Έχετε μια ιδιότητα μεγέθους

Τύποι κλειδιών: Τα κλειδιά μπορεί να είναι οποιοσδήποτε τύπος δεδομένων

Σειρά κλειδιών: Τα κλειδιά ταξινομούνται με εισαγωγή

Προεπιλογές: Δεν υπάρχουν προεπιλεγμένα κλειδιά

Η μέθοδος forEach()

Η μέθοδος forEach() καλεί μια συνάρτηση για κάθε ζεύγος κλειδιού/τιμής σε έναν Χάρτη:

Παράδειγμα

// List all entries
let text = "";
fruits.forEach (function(value, key) {
  text += key + ' = ' + value;
})

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.forEach():</p>

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

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

let text = "";
fruits.forEach (function(value, key) {
  text += key + ' = ' + value + "<br>"
})

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

</body>
</html>

Η μέθοδος entries()

Η μέθοδος entries() επιστρέφει ένα αντικείμενο επαναλήπτη με το [key, values] σε έναν Χάρτη:

Παράδειγμα

// List all entries
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.entries():</p>

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

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

let text = "";
for (const x of fruits.entries()) {
  text += x + "<br>";
}

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

</body>
</html>

Υποστήριξη προγράμματος περιήγησης

Οι Χάρτες JavaScript υποστηρίζονται σε όλα τα προγράμματα περιήγησης, εκτός από τον Internet Explorer:

Chrome Edge Firefox Safari Opera