12. Map | WeakMap | ES6 | JavaScript | Typescript
0 likes675 views
The document provides a comprehensive overview of Maps and WeakMaps in ES6, detailing their syntax, methods, and differences from regular objects. It highlights that Maps store key-value pairs with any data type for keys, while WeakMaps use weak references for object-type keys. Live examples illustrate how to manipulate and retrieve data from both data structures.
![Object vs Map
Object allows keys only either strings or symbols. But map can allow any
type of data like primitives, functions, objects, etc.
We can get values from object by using object[“key”] or object.key. But to
get values from map by using map.get(“key”) method.
Data in the object can be any order. But in map the order of the keys based
on insertion of the data to map.](https://image.slidesharecdn.com/12-170916120933/85/12-Map-WeakMap-ES6-JavaScript-Typescript-4-320.jpg)
![Get Data from Map(cont…)
For…of
var map = new Map( );
for( let [ key, val ] of map ) {
console.log( key + “ “ + val );
}](https://image.slidesharecdn.com/12-170916120933/85/12-Map-WeakMap-ES6-JavaScript-Typescript-10-320.jpg)
![Get Data from Map(cont…)
For…of ( Cont…)
var map = new Map( );
for( let [ key, val ] of map.entries( ) ) {
console.log( key + “ “ + val );
}](https://image.slidesharecdn.com/12-170916120933/85/12-Map-WeakMap-ES6-JavaScript-Typescript-13-320.jpg)
![Get Data from Map(cont…)
Manual
var map = new Map( );
console.log( map.get( key ) ); OR
var keys = map.keys( );
for ( let index = 0; index < keys.length; index++ ){
console.log( map.get( keys[ index ] ) );
}](https://image.slidesharecdn.com/12-170916120933/85/12-Map-WeakMap-ES6-JavaScript-Typescript-14-320.jpg)
12. Map | WeakMap | ES6 | JavaScript | Typescript
- 1. Map, WeakMap | ES6 JAGADEESH PATTA ( PJ )
- 2. Agenda Introduction Object vs Map Map Syntax Method on Map Live Examples WeakMap WeakMap syntax Methods on WeakMap Live Example
- 3. Introduction The map object holds the data as key-value pair. The value may be any object or primitive data values. A map object iterates its elements in insertion order. Using for…of loop we can get key, values as an array for each iteration. We can give NaN as key in map.
- 4. Object vs Map Object allows keys only either strings or symbols. But map can allow any type of data like primitives, functions, objects, etc. We can get values from object by using object[“key”] or object.key. But to get values from map by using map.get(“key”) method. Data in the object can be any order. But in map the order of the keys based on insertion of the data to map.
- 5. Syntax Syntax let map = new Map(); Example let employeeMap = new Map();
- 6. Methods on Map Clear( ) Delete( key ) Entries( ) Get( key ) Has( key ) Keys( ) Values( ) Set( key, val )
- 7. Insert Data into Map let employeeMap = new Map( ); employeeMap.set(“empId”, 46); employeeMap.set(“name”, “Jagadeesh”); employeeMap.set(“designation”, “SSE”);
- 8. Get Data from Map Using forEach Using for…of Manual approach
- 9. Get Data from Map(cont…) forEach var map = new Map( ); map.forEach( function( key, val ){ console.log( key + “ “ + val ); });
- 10. Get Data from Map(cont…) For…of var map = new Map( ); for( let [ key, val ] of map ) { console.log( key + “ “ + val ); }
- 11. Get Data from Map(cont…) For…of ( cont…) var map = new Map( ); for( let key of map.keys( ) ) { console.log( key ); }
- 12. Get Data from Map(cont…) For…of ( cont…) var map = new Map( ); for( let val of map.values( ) ) { console.log( val ); }
- 13. Get Data from Map(cont…) For…of ( Cont…) var map = new Map( ); for( let [ key, val ] of map.entries( ) ) { console.log( key + “ “ + val ); }
- 14. Get Data from Map(cont…) Manual var map = new Map( ); console.log( map.get( key ) ); OR var keys = map.keys( ); for ( let index = 0; index < keys.length; index++ ){ console.log( map.get( keys[ index ] ) ); }
- 15. WeakMap The weakmap object holds the data as key-value pair. In weakmap the keys are weakly referenced. The keys must be objects, and the values can be any values. We cannot get length of weakmap. Weakmap not allowed to get keys by keys() method.
- 16. Syntax Syntax let map = new WeakMap(); Example let employeeMap = new WeakMap();
- 17. Methods on WeakMap Delete( key ) Get( key ) Has( key ) Set( key, val )
- 18. WeakMap Example let employeeMap = new WeakMap( ); var idObj = new Object( ); employeeMap.set( idObj, 46); console.log( employeeMap.get( idObj ) );
- 19. Any Q ?
- 20. Thank You