Χάρτες JavaScript

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

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

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

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

Ένας Χάρτης έχει μια ιδιότητα που αντιπροσωπεύει το μέγεθος του χάρτη.

Μέθοδοι χάρτη

new Map(): Δημιουργεί ένα νέο αντικείμενο χάρτη
set(): Ορίζει την τιμή για ένα κλειδί σε έναν Χάρτη
get(): Λαμβάνει την τιμή για ένα κλειδί σε έναν Χάρτη
clear(): Αφαιρεί όλα τα στοιχεία από έναν χάρτη
delete(): Καταργεί ένα στοιχείο χάρτη που καθορίζεται από ένα κλειδί
has(): Επιστρέφει true εάν υπάρχει ένα κλειδί σε έναν χάρτη
forEach(): Καλεί μια επανάκληση για κάθε ζεύγος κλειδιού/τιμής σε έναν Χάρτη
entries(): Επιστρέφει ένα αντικείμενο επαναλήπτη με τα ζεύγη [key, value] σε έναν Χάρτη
keys(): Επιστρέφει ένα αντικείμενο επαναλήπτη με τα πλήκτρα σε έναν Χάρτη
values(): Επιστρέφει ένα αντικείμενο επανάληψης των τιμών σε έναν Χάρτη

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

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

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

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

`νέος χάρτης()`

Μπορείτε να δημιουργήσετε έναν χάρτη περνώντας έναν πίνακα στον κατασκευαστή 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>

`Map.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", 500);

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

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

`Map.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>

`Map.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>

`Map.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>

`Map.clear()`

Η μέθοδος clear() αφαιρεί όλα τα στοιχεία από έναν Χάρτη:

Παράδειγμα

fruits.clear();

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Clearing a Map:</p>

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

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

// Clear the Map
fruits.clear();

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

</body>
</html>

`Map.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>

Οι χάρτες είναι αντικείμενα

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

Παράδειγμα

// Returns object:
typeof fruits;

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Map typeof:</p>

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

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

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

</body>
</html>

παρουσίαση Ο χάρτης επιστρέφει true:

Παράδειγμα

// Returns true:
fruits instanceof Map;

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Map instanceof:</p>

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

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

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

</body>
</html>

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

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

Not directly iterable: Άμεσα επαναλαμβανόμενο
Do not have a size property: Έχετε μια ιδιότητα μεγέθους
Keys must be Strings (or Symbols): Τα κλειδιά μπορεί να είναι οποιουδήποτε τύπου δεδομένων
Keys are not well ordered: Τα κλειδιά ταξινομούνται με εισαγωγή
Have default keys: Δεν υπάρχουν προεπιλεγμένα κλειδιά

`Map.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>

`Map.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>

`Map.keys()`

Η μέθοδος keys() επιστρέφει ένα αντικείμενο επαναλήπτη με τα κλειδιά σε έναν Χάρτη:

Παράδειγμα

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

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.keys():</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.keys()) {
  text += x + "<br>";
}

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

</body>
</html>

`Map.values()`

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

Παράδειγμα

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

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.values():</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.values()) {
  text += x + "<br>";
}

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

</body>
</html>

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

Παράδειγμα

// Sum all values
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

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

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

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

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

let total = 0;
for (const x of fruits.values()) {
  total += x;
}

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

</body>
</html>

Αντικείμενα ως κλειδιά

Η δυνατότητα χρήσης αντικειμένων ως πλήκτρων είναι ένα σημαντικό χαρακτηριστικό του χάρτη.

Παράδειγμα

// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};

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

// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Being able to use objects as keys is an important Map feature:</p>

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

<script>
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};

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

// Add the Objects to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

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

</body>
</html>

Θυμηθείτε: Το κλειδί είναι ένα αντικείμενο (μήλα), όχι μια συμβολοσειρά ("μήλα"):

Παράδειγμα

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

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>

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

<script>
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};

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

// Add Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

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

</body>
</html>

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

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


Chrome	Edge	Firefox	Safari	Opera