3.1 Collection Map
In ECMAScript 2015 (ES6), JavaScript added two new data structures: Map and Set.
These data structures provide more flexible and efficient ways to store and manage collections of data
compared to traditional objects and arrays.
Map is a data structure that allows you to store key-value pairs, where keys
can be any type, including objects and functions.
1. Creating and initializing a Map:
const map = new Map();
2. Adding elements:
The set method is used to add new key-value pairs to a Map.
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
3. Retrieving elements:
The get method is used to retrieve a value by key.
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
console.log(map.get('key1')); // 'value1'
console.log(map.get(2)); // 'value2'
4. Checking for a key:
The has method checks if a key exists in a Map.
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
console.log(map.has('key1')); // true
console.log(map.has('key3')); // false
5. Deleting elements:
The delete method removes an element by key.
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
map.delete('key1');
console.log(map.has('key1')); // false
6. Clearing the Map:
The clear method removes all elements from a Map.
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
map.clear();
console.log(map.size); // 0
7. Iterating over a Map:
You can use a for...of loop to iterate over a Map.
Example:
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
for (const [key, value] of map) {
console.log(`${key}: ${value}`);
}
// 'key1: value1'
// '2: value2'
3.2 Collection Set
Set is a data structure that allows you to store unique values of any type,
including objects and primitives.
1. Creating and initializing a Set:
const set = new Set();
2. Adding elements:
The add method is used to add new values to a Set.
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
3. Checking for a value:
The has method checks if a value exists in a Set.
const set = new Set();
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
console.log(set.has(1)); // true
console.log(set.has('value3')); // false
4. Deleting elements:
The delete method removes a value from a Set.
const set = new Set();
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
set.delete(1);
console.log(set.has(1)); // false
5. Clearing the Set:
The clear method removes all elements from a Set.
const set = new Set();
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
set.clear();
console.log(set.size); // 0
6. Iterating over a Set:
You can use a for...of loop to iterate over a Set.
const set = new Set();
set.add(1);
set.add('value2');
for (const value of set) {
console.log(value);
}
// 1
// 'value2'
3.3 Comparing Map and Set
Advantages of Map:
- Arbitrary keys: In
Map, keys can be of any type, including objects and functions, unlike objects where keys can only be strings or symbols. - Ordered elements: Elements in a
Mapmaintain the order of insertion, making it easier to iterate over them in that order. - Collection size: The
sizemethod allows you to quickly get the number of elements in aMap.
Advantages of Set:
- Unique values: A
Setautomatically ensures that all its elements are unique. - Ordered elements: Elements in a
Setmaintain the order of insertion, making it easier to iterate over them in that order. - Optimized operations:
Setprovides optimized methods for adding, deleting, and checking for the presence of elements.
Practical Examples
Example of using Map to store user information:
const users = new Map();
users.set(1, { name: 'Alice', age: 25 });
users.set(2, { name: 'Bob', age: 30 });
for (const [id, user] of users) {
console.log(`User ID: ${id}, Name: ${user.name}, Age: ${user.age}`);
}
// User ID: 1, Name: Alice, Age: 25
// User ID: 2, Name: Bob, Age: 30
Example of using Set to filter unique values:
const numbers = [1, 2, 3, 1, 2, 4, 5, 3];
const uniqueNumbers = new Set(numbers);
for (const number of uniqueNumbers) {
console.log(number);
}
// 1
// 2
// 3
// 4
// 5
GO TO FULL VERSION