У цьому посібнику ви дізнаєтесь про JavaScript Maps та WeakMaps за допомогою прикладів.
JavaScript ES6 представив дві нові структури даних, тобто Map
і WeakMap
.
Карта схожа на об’єкти в JavaScript, що дозволяє зберігати елементи в парі ключ / значення .
Елементи на карті вставляються в порядку вставки. Однак, на відміну від об’єкта, карта може містити об’єкти, функції та інші типи даних як ключ.
Створіть карту JavaScript
Для створення a Map
ми використовуємо new Map()
конструктор. Наприклад,
// create a Map const map1 = new Map(); // an empty map console.log(map1); // Map ()
Вставити елемент на карту
Після створення карти ви можете використовувати set()
метод, щоб вставити на неї елементи. Наприклад,
// 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))
Ви також можете використовувати об'єкти або функції як ключі. Наприклад,
// 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"))
Елементи карти доступу
Ви можете отримати доступ до Map
елементів за допомогою get()
методу. Наприклад,
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")
Перевірте елементи карти
За допомогою has()
методу можна перевірити, чи є елемент на карті. Наприклад,
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
Видалення елементів
Ви можете використовувати clear()
і в delete()
спосіб , щоб видалити елементи з карти.
У delete()
метод повертає , true
якщо пара вказано ключ / значення існує і була видалена або в іншому місці повертається false
. Наприклад,
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()
Метод видаляє всі пари ключ / значення з об'єкта на карті. Наприклад,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // removing all element map1.clear(); // false console.log(map1); // Map ()
Розмір карти JavaScript
Ви можете отримати кількість елементів на карті за допомогою size
властивості. Наприклад,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); console.log(map1.size); // 1
Повторіть через карту
Ви можете перебирати елементи Карти, використовуючи цикл for… of або forEach (). Доступ до елементів здійснюється в порядку вставки. Наприклад,
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); )
Вихідні дані
ім'я- Джек вік- 27
Ви також можете отримати ті ж результати, що і вищевказана програма, використовуючи forEach()
метод. Наприклад,
// 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) ))
Ітерація над ключами карти
Ви можете перебирати карту і отримувати ключ, використовуючи keys()
метод. Наприклад,
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) )
Вихідні дані
ім'я вік
Повторіть значення карт
Ви можете перебирати карту і отримувати значення за допомогою values()
методу. Наприклад,
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); )
Вихідні дані
Джек 27
Отримайте ключ / значення карти
Ви можете перебирати карту і отримувати ключ / значення карти, використовуючи entries()
метод. Наприклад,
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))`); )
Вихідні дані
ім'я: Джек вік: 27
Карта JavaScript проти об’єкта
Карта | Об'єкт |
---|---|
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 є методи get()
, set()
, delete()
, і has()
. Наприклад,
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 ()
WeakMaps не можна повторити
На відміну від Maps, WeakMaps не піддаються ітерації. Наприклад,
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 Map
і WeakMap
були введені в ES6 . Деякі браузери можуть не підтримувати їх використання. Щоб дізнатися більше, відвідайте підтримку JavaScript Map та підтримку JavaScript WeakMap.