Bugün Ustalaşmanız Gereken 10 JavaScript Harita Yöntemi

JavaScript Haritası, öğelerinin her birini bir anahtar/değer çifti olarak saklayan bir koleksiyondur. Bu veri türü, ilişkisel dizi veya sözlük olarak da adlandırılır.

Herhangi bir veri türünü (ilkel ve nesneler) anahtar veya değer olarak kullanabilirsiniz. Map nesnesi orijinal ekleme sırasını hatırlar, ancak değerlere genellikle anahtarlarından erişirsiniz.

Bu makalede, bugün uzmanlaşmanız gereken on JavaScript Harita yöntemi hakkında bilgi edineceksiniz.

1. JavaScript'te Yeni Bir Harita Nasıl Oluşturulur

kullanarak yeni bir Harita nesnesi oluşturabilirsiniz. Harita() yapıcı. Bu yapıcı bir parametreyi kabul eder: öğeleri anahtar/değer çiftleri olan yinelenebilir bir nesne.

let mapObj = yeni Harita([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman Geri Dönüyor'],
[1995, 'Sonsuza Kadar Batman'],
[2005, 'Batman Başlıyor'],
[2008, 'Kara Şövalye'],
[2012, 'Kara Şövalye Yükseliyor']
]);
konsol.log (mapObj);

Çıktı:

Harita (7) {
1966 => 'Batman: Film',
1989 => 'Batman',
1992 => 'Batman Dönüyor',





instagram viewer


1995 => 'Sonsuza Kadar Batman',
2005 => 'Batman Başlıyor',
2008 => 'Kara Şövalye',
2012 => 'Kara Şövalye Yükseliyor'
}

Parametreyi sağlamazsanız, JavaScript yeni bir boş Harita oluşturacaktır.

let mapObj = new Map();
konsol.log (mapObj);

Çıktı:

Harita (0) {}

Yinelenen anahtarlarla bir Harita oluşturmaya çalışırsanız, tekrarlanan her anahtar, yeni değeri önceki değerin üzerine yazar.

let mapObj = yeni Harita([
['anahtar1', 'değer1'],
['anahtar2', 'değer2'],
['anahtar2', 'yeniDeğer2']
]);
konsol.log (mapObj);

Çıktı:

Harita (2) {
'anahtar1' => 'değer1',
'anahtar2' => 'yeniDeğer2'
}

Burada, karşı depolanan değer anahtar2 anahtar yeniDeğer2, daha önce değil değer2.

Karışık veri türlerini kullanarak anahtar/değer çiftlerini tutan bir Harita nesnesi de oluşturabilirsiniz.

let mapObj = yeni Harita([
["dize1", 1],
[2, "dize2"],
["dize3", 433.234],
[23.56, 45]
]);
konsol.log (mapObj);

Çıktı:

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

2. Bir Harita Nesnesine Yeni Öğeler Ekleme

kullanarak Map nesnesine yeni bir öğe ekleyebilirsiniz. Ayarlamak() yöntem. Bu yöntem bir anahtar ve bir değer kabul eder ve ardından Map nesnesine yeni bir öğe ekler. Yöntem daha sonra eklenen değerle yeni Map nesnesini döndürür. Anahtar Harita'da zaten mevcutsa, yeni değer mevcut değerin yerini alacaktır.

let mapObj = new Map();
mapObj.set (1966, 'Batman: The Movie');
mapObj.set (1989, 'Batman');
mapObj.set (1992, 'Batman Dönüyor');
mapObj.set (1995, 'Sonsuza Kadar Batman');
konsol.log (mapObj);

Çıktı:

Harita (4) {
1966 => 'Batman: Film',
1989 => 'Batman',
1992 => 'Batman Dönüyor',
1995 => 'Sonsuza Kadar Batman'
}

Değişkenleri veya sabitleri anahtar veya değer olarak da kullanabilirsiniz:

const yıl1 = 1966;
const filmName1 = 'Batman: Film';
yıl2 = 1989 olsun;
var movieName2 = 'Batman';
let mapObj = new Map();
mapObj.set (yıl1, filmAdı1);
mapObj.set (yıl2, filmAdı2);
konsol.log (mapObj);

Çıktı:

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

NS Ayarlamak() yöntem zincirlemeyi destekler.

let mapObj = new Map();
mapObj.set (1966, 'Batman: Film')
.set (1989, 'Batman')
.set (1992, 'Batman Geri Dönüyor')
.set (1995, 'Sonsuza Kadar Batman');
konsol.log (mapObj);

Çıktı:

Harita (4) {
1966 => 'Batman: Film',
1989 => 'Batman',
1992 => 'Batman Dönüyor',
1995 => 'Sonsuza Kadar Batman'
}

3. Bir Harita Nesnesinden Tüm Öğeleri Kaldırma

kullanarak bir Map nesnesinden tüm öğeleri kaldırabilirsiniz. açık() yöntem. Bu yöntem her zaman döndürür Tanımsız.

let mapObj = yeni Harita([
[1966, 'Batman: Film'],
[1989, 'Batman']
]);
konsol.log("Harita nesnesinin boyutu: " + mapObj.size);
konsol.log (mapObj);
mapObj.clear();
console.log("Elementleri temizledikten sonra Map nesnesinin boyutu: " + mapObj.size);
konsol.log (mapObj);

Çıktı:

Harita nesnesinin boyutu: 2
Harita (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Öğeleri temizledikten sonra Map nesnesinin boyutu: 0
Harita (0) {}

4. Haritadan Belirli Bir Öğeyi Silme

kullanarak belirli bir öğeyi bir Map nesnesinden kaldırabilirsiniz. silmek() yöntem. Bu yöntem, Haritadan silinecek öğenin anahtarını kabul eder. Anahtar varsa, yöntem döner NS. Aksi halde döner YANLIŞ.

let mapObj = yeni Harita([
[1966, 'Batman: Film'],
[1989, 'Batman']
]);
konsol.log("İlk Harita: ");
konsol.log (mapObj);
mapObj.delete (1966);
konsol.log("Anahtarı 1966 olarak olan eleman silindikten sonra haritalandır");
konsol.log (mapObj);

Çıktı:

İlk Harita:
Harita (2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
1966 olarak anahtara sahip öğeyi sildikten sonra harita
Harita (1) { 1989 => 'Batman' }

5. Haritada Bir Elemanın Var Olup Olmadığını Kontrol Edin

kullanarak bir Map nesnesinde bir öğenin var olup olmadığını kontrol edebilirsiniz. vardır() yöntem. Bu yöntem, Map nesnesindeki varlığı test etmek için öğenin anahtarını bir parametre olarak kabul eder. Bu yöntem döner NS anahtar varsa. Aksi halde döner YANLIŞ.

let mapObj = yeni Harita([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman Geri Dönüyor'],
[1995, 'Sonsuza Kadar Batman'],
[2005, 'Batman Başlıyor'],
[2008, 'Kara Şövalye'],
[2012, 'Kara Şövalye Yükseliyor']
]);
konsol.log (mapObj.has (1966));
konsol.log (mapObj.has (1977));

Çıktı:

NS
YANLIŞ

Anahtarlı bir eleman 1966 Map nesnesinde var, bu nedenle yöntem döndürüldü NS. Ancak, anahtarlı bir öğe olmadığı için 1977 Map nesnesinde, döndürülen yöntem YANLIŞ ikinci aramadan.

İlgili: JavaScript Nedir ve Nasıl Çalışır?

6. Belirli Bir Anahtarın Değerine Erişme

NS elde etmek() method, Map nesnesinden belirli bir öğe döndürür. Bu yöntem, öğenin anahtarını parametre olarak kabul eder. Anahtar, Map nesnesinde varsa, yöntem, öğenin değerini döndürür. Aksi halde döner Tanımsız.

let mapObj = yeni Harita([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman Geri Dönüyor'],
[1995, 'Sonsuza Kadar Batman'],
[2005, 'Batman Başlıyor'],
[2008, 'Kara Şövalye'],
[2012, 'Kara Şövalye Yükseliyor']
]);
konsol.log (mapObj.get (1966));
konsol.log (mapObj.get (1988));

Çıktı:

Batman: Film
Tanımsız

Anahtarlı bir eleman 1966 Map nesnesinde var, bu nedenle yöntem, öğenin değerini döndürdü. Anahtarlı öğe yok 1988 Map nesnesinde, bu nedenle yöntem döndürüldü Tanımsız.

7. Bir Yineleyici aracılığıyla Harita Girişlerine Erişin

Yetkiliye göre MDN Web Belgeleri:

input() yöntemi, Map nesnesindeki her öğe için ekleme sırasındaki [anahtar, değer] çiftlerini içeren yeni bir Yineleyici nesnesi döndürür. Bu özel durumda, bu yineleyici nesnesi de yinelenebilirdir, bu nedenle for-of döngüsü kullanılabilir. [Symbol.iterator] protokolü kullanıldığında, çağrıldığında bu yineleyicinin kendisini döndüren bir işlev döndürür.

Bu yineleyiciyi ve bir için... Beyan:

let mapObj = yeni Harita([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman Geri Dönüyor'],
[1995, 'Sonsuza Kadar Batman'],
[2005, 'Batman Başlıyor'],
[2008, 'Kara Şövalye'],
[2012, 'Kara Şövalye Yükseliyor']
]);
for (mapObj.entries() girişine izin verin) {
konsol.log (giriş);
}

Çıktı:

[ 1966, 'Batman: Film' ]
[ 1989, 'Batman' ]
[ 1992, 'Batman Geri Dönüyor' ]
[ 1995, 'Sonsuza Kadar Batman' ]
[ 2005, 'Batman Başlıyor' ]
[ 2008, 'Kara Şövalye' ]
[ 2012, 'Kara Şövalye Yükseliyor' ]

Veya her bir anahtara ve değere erişmek için ES6 yok edici atama özelliğini kullanabilirsiniz:

let mapObj = yeni Harita([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman Geri Dönüyor'],
[1995, 'Sonsuza Kadar Batman'],
[2005, 'Batman Başlıyor'],
[2008, 'Kara Şövalye'],
[2012, 'Kara Şövalye Yükseliyor']
]);
for (let [anahtar, değer] mapObj.entries()) {
konsol.log("Anahtar: " + anahtar + " Değer: " + değer);
}

Çıktı:

Anahtar: 1966 Değer: Batman: The Movie
Anahtar: 1989 Değer: Batman
Anahtar: 1992 Değer: Batman Geri Dönüyor
Anahtar: 1995 Değer: Batman Forever
Anahtar: 2005 Değer: Batman Başlıyor
Anahtar: 2008 Değer: Kara Şövalye
Anahtar: 2012 Değer: Kara Şövalye Yükseliyor

8. Bir Haritanın Değerleri Üzerinde Yineleme Nasıl Yapılır?

NS değerler() yöntem bir döndürür yineleyici bir Haritadaki tüm değerleri içeren nesnedir ve bunu ekleme sırasına göre yapar.

let mapObj = yeni Harita([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman Geri Dönüyor']
]);
const yineleyiciObj = mapObj.values();
for (iteratorObj'nin let değeri) {
konsol.log (değer);
}

Çıktı:

Batman: Film
yarasa Adam
Batman Geri Dönüyor

9. Bir Haritanın Anahtarlarını Yineleyin

NS anahtarlar() yöntem bir döndürür yineleyici bir Haritadaki tüm anahtarları içeren nesnedir ve bunu ekleme sırasına göre yapar.

let mapObj = yeni Harita([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman Geri Dönüyor']
]);
const yineleyiciObj = mapObj.keys();
for (iteratorObj anahtarının let anahtarı) {
konsol.log (anahtar);
}

Çıktı:

1966
1989
1992

İlgili: JavaScript Ok İşlevleri Sizi Daha İyi Bir Geliştirici Yapabilir

10. Geri Çağırma Kullanarak Haritadaki Öğeler Üzerinde Yineleme

NS her biri için() yöntemi, Map nesnesinin her öğesi için bir geri çağırma işlevi çağırır. Geri arama işlevi iki parametre alır: anahtar ve değer.

function printKeyValue (anahtar, değer) {
konsol.log("Anahtar: " + anahtar + " Değer: " + değer);
}
let mapObj = yeni Harita([
[1966, 'Batman: Film'],
[1989, 'Batman'],
[1992, 'Batman Geri Dönüyor']
]);
mapObj.forEach (printKeyValue);

Çıktı:

Anahtar: Batman: Film Değeri: 1966
Anahtar: Batman Değer: 1989
Anahtar: Batman İade Değeri: 1992

Artık JavaScript'teki Haritaları Biliyorsunuz

Artık JavaScript'te Haritalar kavramına hakim olmak için yeterli bilgiye sahipsiniz. Harita veri yapısı, birçok programlama görevinde yaygın olarak kullanılmaktadır. Bir kez ustalaştıktan sonra, Kümeler, Diziler vb. gibi diğer yerel JavaScript nesnelerine geçebilirsiniz.

Bugün Ustalaşmanız Gereken 15 JavaScript Dizi Yöntemi

JavaScript dizilerini anlamak istiyor ancak bunlarla başa çıkamıyor musunuz? Rehberlik için JavaScript dizisi örneklerimize bakın.

Sonrakini Oku

Yazar hakkında