Bu eğitimde, örnekler yardımıyla JavaScript Haritaları ve WeakMaps hakkında bilgi edineceksiniz.
JavaScript ES6 iki yeni veri yapısı sunmuştur , yani Mapve WeakMap.
Harita, öğeleri bir anahtar / değer çiftinde saklamamıza izin veren JavaScript'teki nesnelere benzer .
Bir Haritadaki öğeler bir ekleme sırasına eklenir. Ancak, bir nesneden farklı olarak, bir harita anahtar olarak nesneleri, işlevleri ve diğer veri türlerini içerebilir.
JavaScript Haritası Oluşturun
Bir oluşturmak için Mapyapıcıyı kullanırız new Map(). Örneğin,
// create a Map const map1 = new Map(); // an empty map console.log(map1); // Map ()
Eşlemeye Öğe Ekle
Bir harita oluşturduktan sonra, set()ona eleman eklemek için yöntemi kullanabilirsiniz . Örneğin,
// create a set let map1 = new Map(); // insert key-value pair map1.set('info', (name: 'Jack', age: 26)); console.log(map1); // Map ("info" => (name: "Jack", age: 26))
Ayrıca nesneleri veya işlevleri anahtar olarak kullanabilirsiniz. Örneğin,
// Map with object key let map2 = new Map(); let obj = (); map2.set(obj, (name: 'Jack', age: "26")); console.log(map2); // Map (() => (name: "Jack", age: "26"))
Harita Öğelerine Erişim
Yöntemi Mapkullanarak öğelere erişebilirsiniz get(). Örneğin,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // access the elements of a Map console.log(map1.get('info')); // (name: "Jack", age: "26")
Harita Öğelerini Kontrol Edin
has()Öğenin bir Harita içinde olup olmadığını kontrol etmek için yöntemi kullanabilirsiniz . Örneğin,
const set1 = new Set((1, 2, 3)); let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // check if an element is in Set console.log(map1.has('info')); // true
Elemanların Kaldırılması
Bir Haritadan öğeleri kaldırmak için clear()ve delete()yöntemini kullanabilirsiniz.
delete()Yöntem, döner truebelirli bir anahtar / değer çifti vardır ve çıkardığını ya da döner olması halinde false. Örneğin,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // removing a particular element map1.delete('address'); // false console.log(map1); // Map ("info" => (name: "Jack", age: "26")) map1.delete('info'); // true console.log(map1); // Map ()
clear()Yöntem, bir ilk nesnesinden tüm anahtar / değer çiftlerini kaldırır. Örneğin,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // removing all element map1.clear(); // false console.log(map1); // Map ()
JavaScript Harita Boyutu
sizeÖzelliği kullanarak bir Haritadaki öğelerin sayısını alabilirsiniz . Örneğin,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); console.log(map1.size); // 1
Harita İçinde Yineleyin
For… of döngüsünü veya forEach () yöntemini kullanarak Harita öğelerinde yineleme yapabilirsiniz. Öğelere, ekleme sırasından erişilir. Örneğin,
let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through Map for (let (key, value) of map1) ( console.log(key + '- ' + value); )
Çıktı
isim- Jack yaş- 27
forEach()Yöntemi kullanarak yukarıdaki programla aynı sonuçları da alabilirsiniz . Örneğin,
// using forEach method() let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through Map map1.forEach(function(value, key) ( console.log(key + '- ' + value) ))
Harita Anahtarlarını Yineleyin
Harita üzerinde yineleme yapabilir ve keys()yöntemi kullanarak anahtarı alabilirsiniz . Örneğin,
let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through the Map for (let key of map1.keys()) ( console.log(key) )
Çıktı
isim yaş
Harita Değerlerini Yineleyin
Harita üzerinde yineleme yapabilir ve values()yöntemi kullanarak değerleri alabilirsiniz . Örneğin,
let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through the Map for (let values of map1.values()) ( console.log(values); )
Çıktı
Jack 27
Haritanın Anahtar / Değerlerini Alın
entries()Yöntemi kullanarak Harita üzerinde yineleme yapabilir ve bir Haritanın anahtarını / değerini alabilirsiniz . Örneğin,
let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through the Map for (let elem of map1.entries()) ( console.log(`$(elem(0)): $(elem(1))`); )
Çıktı
İsim: Jack yaş: 27
JavaScript Haritası ve Nesne
| Harita | Nesne |
|---|---|
| Maps can contain objects and other data types as keys. | Objects can only contain strings and symbols as keys. |
| Maps can be directly iterated and their value can be accessed. | Objects can be iterated by accessing its keys. |
The number of elements of a Map can be determined by size property. | The number of elements of an object needs to be determined manually. |
| Map performs better for programs that require the addition or removal of elements frequently. | Object does not perform well if the program requires the addition or removal of elements frequently. |
JavaScript WeakMap
The WeakMap is similar to a Map. However, WeakMap can only contain objects as keys. For example,
const weakMap = new WeakMap(); console.log(weakMap); // WeakMap () let obj = (); // adding object (element) to WeakMap weakMap.set(obj, 'hello'); console.log(weakMap); // WeakMap (() => "hello")
When you try to add other data types besides objects, WeakMap throws an error. For example,
const weakMap = new WeakMap(); // adding string as a key to WeakMap weakMap.set('obj', 'hello');
// throws error // TypeError: Attempted to set a non-object key in a WeakMap
WeakMap Methods
WeakMaps sahip yöntemleri get(), set(), delete(), ve has(). Örneğin,
const weakMap = new WeakMap(); console.log(weakMap); // WeakMap () let obj = (); // adding object (element) to WeakMap weakMap.set(obj, 'hello'); console.log(weakMap); // WeakMap (() => "hello") // get the element of a WeakMap console.log(weakMap.get(obj)); // hello // check if an element is present in WeakMap console.log(weakMap.has(obj)); // true // delete the element of WeakMap console.log(weakMap.delete(obj)); // true console.log(weakMap); // WeakMap ()
WeakMap'ler yinelenemez
Haritalar'dan farklı olarak WeakMap'ler yinelenemez. Örneğin,
const weakMap = new WeakMap(); console.log(weakMap); // WeakMap () let obj = (); // adding object (element) to WeakMap weakMap.set(obj, 'hello'); // looping through WeakMap for (let i of weakMap) ( console.log(i); // TypeError )
JavaScript Mapve ES6'daWeakMap tanıtıldı . Bazı tarayıcılar bunların kullanımını desteklemeyebilir. Daha fazla bilgi edinmek için JavaScript Harita desteğini ve JavaScript WeakMap desteğini ziyaret edin.
