10 Metode Peta JavaScript yang Harus Anda Kuasai Hari Ini

Peta JavaScript adalah kumpulan yang menyimpan setiap elemennya sebagai pasangan nilai kunci. Tipe data ini juga disebut sebagai array asosiatif atau kamus.

Anda dapat menggunakan tipe data apa pun (primitif dan objek) sebagai kunci atau nilai. Objek Peta mengingat urutan penyisipan asli, meskipun Anda biasanya akan mengakses nilai dengan kuncinya.

Pada artikel ini, Anda akan belajar tentang sepuluh metode JavaScript Map yang harus Anda kuasai hari ini.

1. Cara Membuat Peta Baru di JavaScript

Anda dapat membuat objek Peta baru menggunakan Peta() konstruktor. Konstruktor ini menerima satu parameter: objek yang dapat diubah yang elemennya adalah pasangan nilai kunci.

biarkan mapObj = Peta baru([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman Kembali'],
[1995, 'Batman Selamanya'],
[2005, 'Batman Dimulai'],
[2008, 'Ksatria Kegelapan'],
[2012, 'Kebangkitan Ksatria Kegelapan']
]);
console.log (mapObj);

Keluaran:

Peta (7) {
1966 => 'Batman: Film',
1989 => 'Batman',
1992 => 'Batman Kembali',
1995 => 'Batman Selamanya',





instagram viewer


2005 => 'Batman Dimulai',
2008 => 'Ksatria Kegelapan',
2012 => 'Ksatria Kegelapan Bangkit'
}

Jika Anda tidak menyediakan parameter, JavaScript akan membuat Peta kosong baru.

biarkan mapObj = Peta baru();
console.log (mapObj);

Keluaran:

Peta (0) {}

Jika Anda mencoba membuat Peta dengan kunci duplikat, setiap kunci yang diulang akan menimpa nilai sebelumnya dengan nilai baru.

biarkan mapObj = Peta baru([
['kunci1', 'nilai1'],
['kunci2', 'nilai2'],
['key2', 'newValue2']
]);
console.log (mapObj);

Keluaran:

Peta (2) {
'kunci1' => 'nilai1',
'key2' => 'newValue2'
}

Di sini, nilai yang disimpan terhadap kunci2 kuncinya adalah nilai baru2, bukan yang sebelumnya nilai2.

Anda juga bisa membuat objek Peta yang menyimpan pasangan nilai kunci menggunakan tipe data campuran.

biarkan mapObj = Peta baru([
["string1", 1],
[2, "string2"],
["string3", 433.234],
[23.56, 45]
]);
console.log (mapObj);

Keluaran:

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

2. Tambahkan Elemen Baru ke Objek Peta

Anda dapat menambahkan elemen baru ke objek Peta menggunakan mengatur() metode. Metode ini menerima kunci dan nilai, lalu menambahkan elemen baru ke objek Peta. Metode ini kemudian mengembalikan objek Peta baru dengan nilai tambah. Jika kunci sudah ada di Peta, nilai baru akan menggantikan nilai yang ada.

biarkan mapObj = Peta baru();
mapObj.set (1966, 'Batman: The Movie');
mapObj.set (1989, 'Batman');
mapObj.set (1992, 'Batman Kembali');
mapObj.set (1995, 'Batman Selamanya');
console.log (mapObj);

Keluaran:

Peta (4) {
1966 => 'Batman: Film',
1989 => 'Batman',
1992 => 'Batman Kembali',
1995 => 'Batman Selamanya'
}

Anda juga dapat menggunakan variabel atau konstanta sebagai kunci atau nilai:

const tahun1 = 1966;
const movieName1 = 'Batman: Film';
misalkan tahun2 = 1989;
var movieName2 = 'Batman';
biarkan mapObj = Peta baru();
mapObj.set (tahun1, namafilm1);
mapObj.set (tahun2, namafilm2);
console.log (mapObj);

Keluaran:

Peta (2) {
1966 => 'Batman: Film',
1989 => 'Batman'
}

NS mengatur() metode mendukung chaining.

biarkan mapObj = Peta baru();
mapObj.set (1966, 'Batman: The Movie')
.set (1989, 'Batman')
.set (1992, 'Batman Kembali')
.set (1995, 'Batman Selamanya');
console.log (mapObj);

Keluaran:

Peta (4) {
1966 => 'Batman: Film',
1989 => 'Batman',
1992 => 'Batman Kembali',
1995 => 'Batman Selamanya'
}

3. Hapus Semua Elemen Dari Objek Peta

Anda dapat menghapus semua elemen dari objek Peta menggunakan jernih() metode. Metode ini selalu kembali tidak terdefinisi.

biarkan mapObj = Peta baru([
[1966, 'Batman: Film'],
[1989, 'Batman']
]);
console.log("Ukuran objek Peta: " + mapObj.size);
console.log (mapObj);
mapObj.clear();
console.log("Ukuran objek Peta setelah menghapus elemen: " + mapObj.size);
console.log (mapObj);

Keluaran:

Ukuran objek Peta: 2
Peta (2) { 1966 => 'Batman: Film', 1989 => 'Batman' }
Ukuran objek Peta setelah membersihkan elemen: 0
Peta (0) {}

4. Hapus Elemen Tertentu Dari Peta

Anda dapat menghapus elemen tertentu dari objek Peta menggunakan menghapus() metode. Metode ini menerima kunci elemen untuk dihapus dari Peta. Jika kuncinya ada, metodenya kembali benar. Jika tidak, itu akan kembali Salah.

biarkan mapObj = Peta baru([
[1966, 'Batman: Film'],
[1989, 'Batman']
]);
console.log("Peta Awal: ");
console.log (mapObj);
mapObj.delete (1966);
console.log("Peta setelah menghapus elemen yang memiliki kunci sebagai 1966");
console.log (mapObj);

Keluaran:

Peta Awal:
Peta (2) { 1966 => 'Batman: Film', 1989 => 'Batman' }
Petakan setelah menghapus elemen yang memiliki kunci sebagai 1966
Peta (1) { 1989 => 'Batman' }

5. Periksa apakah ada Elemen di Peta

Anda dapat memeriksa apakah suatu elemen ada di objek Peta menggunakan memiliki() metode. Metode ini menerima kunci elemen sebagai parameter untuk menguji keberadaan di objek Peta. Metode ini kembali benar jika kuncinya ada. Jika tidak, itu akan kembali Salah.

biarkan mapObj = Peta baru([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman Kembali'],
[1995, 'Batman Selamanya'],
[2005, 'Batman Dimulai'],
[2008, 'Ksatria Kegelapan'],
[2012, 'Kebangkitan Ksatria Kegelapan']
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

Keluaran:

benar
Salah

Elemen dengan kunci 1966 ada di objek Peta, jadi metodenya kembali benar. Tapi, karena tidak ada elemen dengan kunci 1977 di objek Peta, metodenya dikembalikan Salah dari panggilan kedua.

Terkait: Apa Itu JavaScript dan Bagaimana Cara Kerjanya?

6. Mengakses Nilai untuk Kunci Tertentu

NS Dapatkan() metode mengembalikan elemen tertentu dari objek Peta. Metode ini menerima kunci elemen sebagai parameter. Jika kunci ada di objek Peta, metode mengembalikan nilai elemen. Jika tidak, itu akan kembali tidak terdefinisi.

biarkan mapObj = Peta baru([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman Kembali'],
[1995, 'Batman Selamanya'],
[2005, 'Batman Dimulai'],
[2008, 'Ksatria Kegelapan'],
[2012, 'Kebangkitan Ksatria Kegelapan']
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Keluaran:

Batman: Film
tidak terdefinisi

Elemen dengan kunci 1966 ada di objek Peta, jadi metode mengembalikan nilai elemen. Tidak ada elemen dengan kunci 1988 di objek Peta, jadi metodenya kembali tidak terdefinisi.

7. Akses Entri Peta melalui Iterator

Menurut pejabat Dokumen Web MDN:

Metode entri() mengembalikan objek Iterator baru yang berisi pasangan [kunci, nilai] untuk setiap elemen dalam objek Peta dalam urutan penyisipan. Dalam kasus khusus ini, objek iterator ini juga dapat diubah, sehingga perulangan for-of dapat digunakan. Ketika protokol [Symbol.iterator] digunakan, ia mengembalikan fungsi yang, ketika dipanggil, mengembalikan iterator ini sendiri.

Anda dapat mengakses setiap elemen Peta menggunakan iterator ini dan a untuk...dari penyataan:

biarkan mapObj = Peta baru([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman Kembali'],
[1995, 'Batman Selamanya'],
[2005, 'Batman Dimulai'],
[2008, 'Ksatria Kegelapan'],
[2012, 'Kebangkitan Ksatria Kegelapan']
]);
for (biarkan entri mapObj.entries()) {
console.log (entri);
}

Keluaran:

[ 1966, 'Batman: Film']
[ 1989, 'Batman' ]
[ 1992, 'Batman Kembali']
[ 1995, 'Batman Selamanya']
[ 2005, 'Batman Dimulai']
[ 2008, 'Ksatria Kegelapan']
[ 2012, 'Ksatria Kegelapan Bangkit' ]

Atau Anda dapat menggunakan fitur penugasan penghancuran ES6 untuk mengakses setiap kunci dan nilai:

biarkan mapObj = Peta baru([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman Kembali'],
[1995, 'Batman Selamanya'],
[2005, 'Batman Dimulai'],
[2008, 'Ksatria Kegelapan'],
[2012, 'Kebangkitan Ksatria Kegelapan']
]);
for (biarkan [kunci, nilai] dari mapObj.entries()) {
console.log("Kunci: " + kunci + " Nilai: " + nilai);
}

Keluaran:

Kunci: 1966 Nilai: Batman: The Movie
Kunci: 1989 Nilai: Batman
Kunci: 1992 Nilai: Batman Returns
Kunci: 1995 Nilai: Batman Forever
Kunci: Nilai 2005: Batman Begins
Kunci: 2008 Nilai: The Dark Knight
Kunci: Nilai 2012: The Dark Knight Rises

8. Cara Mengulangi Nilai Peta

NS nilai() metode mengembalikan sebuah Pengulangan objek yang berisi semua nilai dalam Peta, dan melakukan ini dalam urutan penyisipan.

biarkan mapObj = Peta baru([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman Kembali']
]);
const iteratorObj = mapObj.values();
for (biarkan nilai iteratorObj) {
console.log (nilai);
}

Keluaran:

Batman: Film
Batman
Batman Kembali

9. Iterate Over a Map's Keys

NS kunci() metode mengembalikan sebuah Pengulangan objek yang berisi semua kunci dalam Peta, dan melakukan ini dalam urutan penyisipan.

biarkan mapObj = Peta baru([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman Kembali']
]);
const iteratorObj = mapObj.keys();
for (biarkan kunci iteratorObj) {
console.log (kunci);
}

Keluaran:

1966
1989
1992

Terkait: Fungsi Panah JavaScript Dapat Membuat Anda Menjadi Pengembang yang Lebih Baik

10. Iterate Over Elements dalam Peta Menggunakan Callback

NS untuk setiap() metode memanggil fungsi panggilan balik untuk setiap elemen objek Peta. Fungsi panggilan balik mengambil dua parameter: kunci dan nilai.

function printKeyValue (kunci, nilai) {
console.log("Kunci: " + kunci + " Nilai: " + nilai);
}
biarkan mapObj = Peta baru([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman Kembali']
]);
mapObj.forEach (printKeyValue);

Keluaran:

Kunci: Batman: Nilai Film: 1966
Kunci: Nilai Batman: 1989
Kunci: Batman Mengembalikan Nilai: 1992

Sekarang Anda Tahu Tentang Peta di JavaScript

Sekarang Anda memiliki pengetahuan yang cukup untuk menguasai konsep Maps dalam JavaScript. Struktur data Peta banyak digunakan dalam banyak tugas pemrograman. Setelah Anda menguasainya, Anda dapat beralih ke objek JavaScript asli lainnya seperti Sets, Arrays, dan sebagainya.

15 Metode Array JavaScript yang Harus Anda Kuasai Hari Ini

Ingin memahami array JavaScript tetapi tidak dapat memahaminya? Lihat contoh larik JavaScript kami untuk panduan.

Baca Selanjutnya

Tentang Penulis