JavaScript Haritaları

İçindekiler

    İçindekiler tablosunu göster

Bir Harita, anahtarların herhangi bir veri türü olabileceği anahtar/değer çiftlerini tutar.

Harita, anahtarların orijinal ekleme sırasını hatırlar.

Temel Harita Yöntemleri

new Map()

Yeni bir Harita oluşturur

set()

Haritadaki bir anahtarın değerini ayarlar

get()

Haritadaki bir anahtarın değerini alır

delete()

Anahtar tarafından belirtilen bir Harita öğesini kaldırır

has()

Haritada bir anahtar mevcutsa true değerini döndürür

forEach()

Haritadaki her anahtar/değer çifti için bir işlev çağırır

entries()

Haritadaki [anahtar, değer] çiftlerine sahip bir yineleyici döndürür

size

Bir Haritadaki öğelerin sayısını döndürür

Harita Nasıl Oluşturulur

Aşağıdakileri yaparak bir JavaScript Haritası oluşturabilirsiniz:

  • new Map()'a Dizi Aktarma

  • Bir Harita oluşturun ve Map.set()'i kullanın

yeni Harita() Yöntemi

new Map() yapıcısına bir Dizi ileterek bir Harita oluşturabilirsiniz:

Örnek

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

Kendiniz Deneyin →

<!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() Yöntemi

set() yöntemini kullanarak bir Haritaya öğe ekleyebilirsiniz:

Örnek

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

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

Kendiniz Deneyin →

<!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() yöntemi, mevcut Harita değerlerini değiştirmek için de kullanılabilir:

Örnek

fruits.set("apples", 200);

Kendiniz Deneyin →

<!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() Yöntemi

get() yöntemi, Haritadaki bir anahtarın değerini alır:

Örnek

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

Kendiniz Deneyin →

<!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 Özelliği

size özelliği, bir Haritadaki öğelerin sayısını döndürür:

Örnek

fruits.size;

Kendiniz Deneyin →

<!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() Yöntemi

delete() yöntemi bir Harita öğesini kaldırır:

Örnek

fruits.delete("apples");

Kendiniz Deneyin →

<!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() Yöntemi

has() yöntemi, Haritada bir anahtar mevcutsa true değerini döndürür:

Örnek

fruits.has("apples");

Kendiniz Deneyin →

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

Bunu dene:

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

Kendiniz Deneyin →

<!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 Nesneleri ve Haritalar

JavaScript Nesneleri ve Haritalar arasındaki farklar:

Nesne

Yinelenebilir: Doğrudan yinelenemez

Boyut: size özelliği yok

Anahtar Türleri: Anahtarlar Dizeler (veya Semboller) olmalıdır

Anahtar Sırası: Anahtarlar iyi sıralanmamış

Varsayılanlar: Varsayılan anahtarlara sahip olun

Harita

Yinelenebilir: Doğrudan yinelenebilir

Boyut: Bir boyut özelliğine sahip olun

Anahtar Türleri: Anahtarlar herhangi bir veri türü olabilir

Anahtar Sırası: Anahtarlar eklemeye göre sıralanır

Varsayılanlar: Varsayılan anahtarlarınız yok

forEach() Yöntemi

forEach() yöntemi, bir Haritadaki her anahtar/değer çifti için bir işlevi çağırır:

Örnek

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

Kendiniz Deneyin →

<!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() Yöntemi

entries() yöntemi, bir Haritada [key,values] içeren bir yineleyici nesnesi döndürür:

Örnek

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

Kendiniz Deneyin →

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

Tarayıcı Desteği

JavaScript Haritaları, Internet Explorer dışındaki tüm tarayıcılarda desteklenir:

Chrome Edge Firefox Safari Opera