JavaScript-kartat

Sisällysluettelo

Näytä sisällysluettelo

Kartta sisältää avain-arvo-pareja, joissa avaimet voivat olla mitä tahansa tietotyyppiä.

Kartta muistaa avainten alkuperäisen lisäysjärjestyksen.

Kartalla on ominaisuus, joka edustaa kartan kokoa.

Karttamenetelmät

new Map(): Luo uuden karttaobjektin
set(): Asettaa avaimen arvon kartassa
get(): Hakee avaimen arvon kartassa
clear(): Poistaa kaikki elementit kartasta
delete(): Poistaa avaimella määritellyn karttaelementin
has(): Palauttaa tosi, jos avain on olemassa kartassa
forEach(): Kutsuu takaisin jokaiselle avain/arvo-parille kartassa
entries(): Palauttaa iteraattoriobjektin, jossa on [avain, arvo] -parit kartassa
keys(): Palauttaa iteraattoriobjektin kartan avaimilla
values(): Palauttaa kartan arvojen iteraattoriobjektin

size: Palauttaa karttaelementtien määrän

Kartan luominen

Voit luoda JavaScript-kartan seuraavasti:

Array välitetään uudelle kartalle()
Luo kartta ja käytä Map.set()-ohjelmaa

`uusi kartta()`

Voit luoda kartan välittämällä taulukon uudelle Map()-konstruktorille:

Esimerkki

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

Kokeile itse →

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

Voit lisätä karttaan elementtejä set()-menetelmällä:

Esimerkki

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

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

Kokeile itse →

<!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()-menetelmää voidaan käyttää myös olemassa olevien kartta-arvojen muuttamiseen:

Esimerkki

fruits.set("apples", 500);

Kokeile itse →

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

Metodi get() saa avaimen arvon kartassa:

Esimerkki

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

Kokeile itse →

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

Ominaisuus koko palauttaa kartan elementtien määrän:

Esimerkki

fruits.size;

Kokeile itse →

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

Metodi delete() poistaa karttaelementin:

Esimerkki

fruits.delete("apples");

Kokeile itse →

<!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()-menetelmä poistaa kaikki elementit kartasta:

Esimerkki

fruits.clear();

Kokeile itse →

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

Metodi has() palauttaa tosi, jos kartassa on avain:

Esimerkki

fruits.has("apples");

Kokeile itse →

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

Kokeile tätä:

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

Kokeile itse →

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

Kartat ovat esineitä

typeof palauttaa objektin:

Esimerkki

// Returns object:
typeof fruits;

Kokeile itse →

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

instanceof Map palauttaa tosi:

Esimerkki

// Returns true:
fruits instanceof Map;

Kokeile itse →

<!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-objektit vs. kartat

Erot JavaScript-objektien ja karttojen välillä:

Not directly iterable: Suoraan iteroitavissa
Do not have a size property: Ole koon omaisuus
Keys must be Strings (or Symbols): Avaimet voivat olla mitä tahansa tietotyyppiä
Keys are not well ordered: Avaimet tilataan lisäämällä
Have default keys: Ei ole oletusnäppäimiä

`Map.forEach()`

Metodi forEach() kutsuu takaisin jokaiselle avain/arvo-parille kartassa:

Esimerkki

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

Kokeile itse →

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

Metodi entries() palauttaa iteraattoriobjektin, jossa on [avain,arvot] kartassa:

Esimerkki

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

Kokeile itse →

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

Metodi keys() palauttaa iteraattoriobjektin avaimilla kartassa:

Esimerkki

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

Kokeile itse →

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

Metodi values() palauttaa iteraattoriobjektin arvoineen kartassa:

Esimerkki

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

Kokeile itse →

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

Voit käyttää values()-menetelmää arvojen summaamiseen kartassa:

Esimerkki

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

Kokeile itse →

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

Objektit avaimina

Mahdollisuus käyttää esineitä avaimina on tärkeä kartta-ominaisuus.

Esimerkki

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

Kokeile itse →

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

Muista: Avain on objekti (omenat), ei merkkijono ("omenat"):

Esimerkki

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

Kokeile itse →

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

Selaimen tuki

JavaScript-karttoja tuetaan kaikissa selaimissa, paitsi Internet Explorerissa:


Chrome	Edge	Firefox	Safari	Opera