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.

Tärkeät karttamenetelmät

new Map()

Luo uuden kartan

set()

Asettaa avaimen arvon kartassa

get()

Hakee avaimen arvon kartassa

delete()

Poistaa avaimella määrittämän karttaelementin

has()

Palauttaa tosi, jos avain on olemassa kartassa

forEach()

Kutsuu funktion jokaiselle avain/arvo-parille kartassa

entries()

Palauttaa iteraattorin, jossa on [avain, arvo]-parit kartassa

size

Palauttaa kartan elementtien 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 Map()-menetelmä

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>


set()-menetelmä

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", 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([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

fruits.set("apples", 200);

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

</body>
</html>


get()-menetelmä

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>



size-ominaisuus

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>


delete()-menetelmä

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>


has()-menetelmä

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>


JavaScript-objektit vs. kartat

Erot JavaScript-objektien ja karttojen välillä:

Esine

Iteroitavissa: Ei suoraan iteroitavissa

Koko: Ei ole kokoominaisuutta

Avaintyypit: näppäinten on oltava merkkijonoja (tai symboleja)

Avainjärjestys: Avaimia ei ole järjestetty kunnolla

Oletusasetukset: oletusavaimet

Kartta

Iteroitavissa: Suoraan iteroitavissa

Koko: ole koko-ominaisuus

Avaintyypit: Avaimet voivat olla mitä tahansa tietotyyppejä

Avainjärjestys: Avaimet järjestetään lisäyksen mukaan

Oletusasetukset: Ei ole oletusavaimia


forEach()-menetelmä

Metodi forEach() kutsuu funktiota jokaiselle kartan avain/arvo-parille:

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>

entries()-menetelmä

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>

Selaimen tuki

JavaScript-karttoja tuetaan kaikissa selaimissa, paitsi Internet Explorerissa:

Chrome Edge Firefox Safari Opera