10 JavaScript-karttamenetelmää, jotka sinun pitäisi hallita tänään

JavaScript-kartta on kokoelma, joka tallentaa jokaisen elementtinsä avain-arvo-parina. Tätä tietotyyppiä kutsutaan myös assosiatiiviseksi taulukoksi tai sanakirjaksi.

Voit käyttää mitä tahansa tietotyyppiä (primitiivit ja objektit) joko avaimena tai arvona. Karttaobjekti muistaa alkuperäisen lisäysjärjestyksen, vaikka yleensä käytät arvoja niiden avaimella.

Tässä artikkelissa opit kymmenestä JavaScript-karttamenetelmästä, jotka sinun tulee hallita tänään.

1. Uuden kartan luominen JavaScriptissä

Voit luoda uuden karttaobjektin käyttämällä Kartta() rakentaja. Tämä konstruktori hyväksyy yhden parametrin: iteroitavan objektin, jonka elementit ovat avain-arvo-pareja.

anna mapObj = uusi kartta([
[1966, 'Batman: The Movie'],
[1989, "Batman"],
[1992, Batman Returns],
[1995, "Batman Forever"],
[2005, "Batman Begins"],
[2008, "The Dark Knight"],
[2012, "The Dark Knight Rises"]
]);
console.log (mapObj);

Lähtö:

Kartta (7) {
1966 => 'Batman: The Movie',
1989 => 'Batman',
1992 => 'Batmanin paluu',
1995 => 'Batman Forever',
2005 => 'Batman alkaa',
2008 => 'The Dark Knight',
2012 => 'The Dark Knight Rises'
}

Jos et anna parametria, JavaScript luo uuden tyhjän kartan.

anna mapObj = uusi kartta();
console.log (mapObj);

Lähtö:

Kartta (0) {}

Jos yrität luoda kartan päällekkäisillä avaimilla, jokainen toistuva näppäin korvaa edellisen arvon uudella arvolla.

anna mapObj = uusi kartta([
['avain1', 'arvo1'],
['avain2', 'arvo2'],
['key2', 'newValue2']
]);
console.log (mapObj);

Lähtö:

Kartta (2) {
'key1' => 'arvo1',
'key2' => 'newValue2'
}

Täällä arvo tallennettu vastaan avain2 avain on uusi Arvo2, ei aikaisempi arvo2.

Voit myös luoda Map-objektin, joka sisältää avain-arvo-pareja käyttämällä erilaisia ​​tietotyyppejä.

anna mapObj = uusi kartta([
["merkkijono1", 1],
[2, "merkkijono2"],
["string3", 433.234],
[23.56, 45]
]);
console.log (mapObj);

Lähtö:

Kartta (4) {
'string1' => 1,
2 => 'merkkijono2',
'string3' => 433.234,
23.56 => 45
}

2. Lisää uusia elementtejä karttaobjektiin

Voit lisätä uuden elementin karttaobjektiin käyttämällä aseta() menetelmä. Tämä menetelmä hyväksyy avaimen ja arvon ja lisää sitten uuden elementin karttaobjektiin. Menetelmä palauttaa sitten uuden karttaobjektin lisäarvon kanssa. Jos avain on jo olemassa kartassa, uusi arvo korvaa nykyisen arvon.

anna mapObj = uusi kartta();
mapObj.set (1966, 'Batman: The Movie');
mapObj.set (1989, 'Batman');
mapObj.set (1992, 'Batman Returns');
mapObj.set (1995, 'Batman Forever');
console.log (mapObj);

Lähtö:

Kartta (4) {
1966 => 'Batman: The Movie',
1989 => 'Batman',
1992 => 'Batmanin paluu',
1995 => 'Batman Forever'
}

Voit myös käyttää muuttujia tai vakioita avaimina tai arvoina:

vakiovuosi1 = 1966;
const movieName1 = 'Batman: The Movie';
anna vuosi2 = 1989;
var movieName2 = 'Batman';
anna mapObj = uusi kartta();
mapObj.set (vuosi1, elokuvan nimi1);
mapObj.set (vuosi2, elokuvan nimi2);
console.log (mapObj);

Lähtö:

Kartta (2) {
1966 => 'Batman: The Movie',
1989 => 'Batman'
}

The aseta() menetelmä tukee ketjutusta.

anna mapObj = uusi kartta();
mapObj.set (1966, 'Batman: The Movie')
.set (1989, 'Batman')
.set (1992, "Batman Returns")
.set (1995, 'Batman Forever');
console.log (mapObj);

Lähtö:

Kartta (4) {
1966 => 'Batman: The Movie',
1989 => 'Batman',
1992 => 'Batmanin paluu',
1995 => 'Batman Forever'
}

3. Poista kaikki elementit karttaobjektista

Voit poistaa kaikki elementit karttaobjektista käyttämällä asia selvä() menetelmä. Tämä menetelmä palaa aina määrittelemätön.

anna mapObj = uusi kartta([
[1966, 'Batman: The Movie'],
[1989, "Batman"]
]);
console.log("Karttaobjektin koko: " + mapObj.size);
console.log (mapObj);
mapObj.clear();
console.log("Karttaobjektin koko elementtien poistamisen jälkeen: " + mapObj.size);
console.log (mapObj);

Lähtö:

Karttaobjektin koko: 2
Kartta (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Karttaobjektin koko elementtien poistamisen jälkeen: 0
Kartta (0) {}

4. Tietyn elementin poistaminen kartalta

Voit poistaa tietyn elementin karttaobjektista käyttämällä poistaa() menetelmä. Tämä menetelmä hyväksyy kartasta poistettavan elementin avaimen. Jos avain on olemassa, menetelmä palaa totta. Muuten se palaa väärä.

anna mapObj = uusi kartta([
[1966, 'Batman: The Movie'],
[1989, "Batman"]
]);
console.log("Alkuperäinen kartta: ");
console.log (mapObj);
mapObj.delete (1966);
console.log("Kartta sen elementin poistamisen jälkeen, jonka avain on 1966");
console.log (mapObj);

Lähtö:

Alkuperäinen kartta:
Kartta (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Kartta sen jälkeen, kun on poistettu elementti, jonka avain on 1966
Kartta (1) { 1989 => 'Batman' }

5. Tarkista, onko kartalla elementtiä

Voit tarkistaa, onko karttaobjektissa elementtiä käyttämällä on () menetelmä. Tämä menetelmä hyväksyy elementin avaimen parametriksi, jolla testataan sen läsnäolo karttaobjektissa. Tämä menetelmä palaa totta jos avain on olemassa. Muuten se palaa väärä.

anna mapObj = uusi kartta([
[1966, 'Batman: The Movie'],
[1989, "Batman"],
[1992, Batman Returns],
[1995, "Batman Forever"],
[2005, "Batman Begins"],
[2008, "The Dark Knight"],
[2012, "The Dark Knight Rises"]
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

Lähtö:

totta
väärä

Elementti avaimella 1966 on olemassa Map-objektissa, joten menetelmä palasi totta. Mutta koska avaimella ei ole elementtiä 1977 Kartta-objektissa menetelmä palasi väärä toisesta puhelusta.

Aiheeseen liittyvä: Mikä on JavaScript ja miten se toimii?

6. Tietyn avaimen arvon käyttäminen

The saada() menetelmä palauttaa tietyn elementin karttaobjektista. Tämä menetelmä hyväksyy elementin avaimen parametriksi. Jos avain on olemassa Map-objektissa, menetelmä palauttaa elementin arvon. Muuten se palaa määrittelemätön.

anna mapObj = uusi kartta([
[1966, 'Batman: The Movie'],
[1989, "Batman"],
[1992, Batman Returns],
[1995, "Batman Forever"],
[2005, "Batman Begins"],
[2008, "The Dark Knight"],
[2012, "The Dark Knight Rises"]
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Lähtö:

Batman: Elokuva
määrittelemätön

Elementti avaimella 1966 on olemassa Map-objektissa, joten menetelmä palautti elementin arvon. Ei ole elementtiä avaimella 1988 Map-objektissa, joten menetelmä palasi määrittelemätön.

7. Käytä karttamerkintöjä iteraattorin kautta

Virkamiehen mukaan MDN Web Docs:

Metodi entries() palauttaa uuden Iterator-objektin, joka sisältää [avain, arvo]-parit jokaiselle Map-objektin elementille lisäysjärjestyksessä. Tässä nimenomaisessa tapauksessa tämä iteraattoriobjekti on myös iteroitavissa, joten for-of-silmukkaa voidaan käyttää. Kun protokollaa [Symbol.iterator] käytetään, se palauttaa funktion, joka kutsuttaessa palauttaa itse tämän iteraattorin.

Voit käyttää kaikkia kartan elementtejä käyttämällä tätä iteraattoria ja a varten...ja lausunto:

anna mapObj = uusi kartta([
[1966, 'Batman: The Movie'],
[1989, "Batman"],
[1992, Batman Returns],
[1995, "Batman Forever"],
[2005, "Batman Begins"],
[2008, "The Dark Knight"],
[2012, "The Dark Knight Rises"]
]);
for (anna mapObj.entries()) {
console.log (merkintä);
}

Lähtö:

[ 1966, 'Batman: The Movie']
[1989, "Batman"]
[ 1992, 'Batman Returns']
[ 1995, 'Batman Forever']
[2005, "Batman alkaa"]
[2008, 'The Dark Knight']
[ 2012, "The Dark Knight Rises"]

Tai voit käyttää ES6:n tuhoavan määritysominaisuutta kunkin avaimen ja arvon käyttämiseen:

anna mapObj = uusi kartta([
[1966, 'Batman: The Movie'],
[1989, "Batman"],
[1992, Batman Returns],
[1995, "Batman Forever"],
[2005, "Batman Begins"],
[2008, "The Dark Knight"],
[2012, "The Dark Knight Rises"]
]);
for (olkoon [avain, arvo] of mapObj.entries()) {
console.log("Avain: " + avain + " Arvo: " + arvo);
}

Lähtö:

Avain: 1966 Arvo: Batman: The Movie
Avain: 1989 Arvo: Batman
Avain: 1992 Arvo: Batman Returns
Avain: 1995 Arvo: Batman Forever
Avain: 2005 Arvo: Batman alkaa
Avain: 2008 Arvo: The Dark Knight
Avain: 2012 Arvo: The Dark Knight Rises

8. Kartan arvojen toistaminen

The arvot() menetelmä palauttaa an Iteraattori objekti, joka sisältää kaikki kartan arvot, ja se tekee tämän lisäysjärjestyksessä.

anna mapObj = uusi kartta([
[1966, 'Batman: The Movie'],
[1989, "Batman"],
[1992, "Batman Returns"]
]);
const iteratorObj = mapObj.values();
for (anna iteratorObj: n arvo) {
console.log (arvo);
}

Lähtö:

Batman: Elokuva
Lepakkomies
Batmanin paluu

9. Toista kartan näppäimillä

The avaimet () menetelmä palauttaa an Iteraattori objekti, joka sisältää kaikki kartan avaimet, ja se tekee tämän lisäysjärjestyksessä.

anna mapObj = uusi kartta([
[1966, 'Batman: The Movie'],
[1989, "Batman"],
[1992, "Batman Returns"]
]);
const iteratorObj = mapObj.keys();
for (IteratorObj: n avain) {
console.log (avain);
}

Lähtö:

1966
1989
1992

Aiheeseen liittyvä: JavaScript-nuolitoiminnot voivat tehdä sinusta paremman kehittäjän

10. Iteroi kartan elementtejä takaisinsoittoa käyttämällä

The jokaiselle() menetelmä kutsuu takaisinkutsun jokaiselle karttaobjektin elementille. Takaisinsoittotoiminto ottaa kaksi parametria: avain ja arvo.

function printKeyValue (avain, arvo) {
console.log("Avain: " + avain + " Arvo: " + arvo);
}
anna mapObj = uusi kartta([
[1966, 'Batman: The Movie'],
[1989, "Batman"],
[1992, "Batman Returns"]
]);
mapObj.forEach (printKeyValue);

Lähtö:

Avain: Batman: The Movie Arvo: 1966
Avain: Batman Arvo: 1989
Avain: Batman Returns Value: 1992

Nyt tiedät JavaScript-kartoista

Nyt sinulla on tarpeeksi tietoa hallitsemaan Mapsin käsite JavaScriptissä. Karttatietorakennetta käytetään laajasti monissa ohjelmointitehtävissä. Kun olet oppinut sen, voit siirtyä muihin alkuperäisiin JavaScript-objekteihin, kuten joukkoihin, taulukoihin ja niin edelleen.

15 JavaScript-taulukkomenetelmää, jotka sinun pitäisi hallita tänään

Haluatko ymmärtää JavaScript-taulukoita, mutta et pääse niihin käsiksi? Katso ohjeita JavaScript-taulukkoesimerkeistämme.

Lue Seuraava

Kirjailijasta