La tarea es convertir un objeto de JavaScript en un mapa ES6 simple usando JavaScript. vamos a discutir algunas técnicas.
Acercarse
- Crea un objeto.
- Crear un nuevo mapa.
- Pase el objeto al mapa y establezca sus propiedades.
Ejemplo 1:
<!DOCTYPE HTML> <html> <head> <title> How to convert a plain object into ES6 Map using JavaScript ? </title> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP" style= "font-size: 15px; font-weight: bold;"> </p> <button onclick="GFG_Fun()"> click here </button> <p id="GFG_DOWN" style= "color:green; font-size: 20px; font-weight: bold;"> </p> <script> var up = document.getElementById('GFG_UP'); up.innerHTML = "Click on the button to "+ "convert the JavaScript Object into map."; var down = document.getElementById('GFG_DOWN'); var obj = { prop_1: 'val_1', prop_2: 'val_2', prop_3: 'val_3' }; var heading = document.getElementById('h1'); function GFG_Fun() { const map = new Map(Object.entries(obj)); down.innerHTML = "Val of prop_2 is " + map.get('prop_2'); } </script> </body> </html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2:
<!DOCTYPE HTML> <html> <head> <title> How to convert a plain object into ES6 Map using JavaScript ? </title> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP" style= "font-size: 15px; font-weight: bold;"> </p> <button onclick="GFG_Fun()"> click here </button> <p id="GFG_DOWN" style= "color:green; font-size: 20px; font-weight: bold;"> </p> <script> var up = document.getElementById('GFG_UP'); up.innerHTML = "Click on the button to "+ "convert the JavaScript Object into map."; var down = document.getElementById('GFG_DOWN'); var obj = { prop_1: 'val_1', prop_2: 'val_2', prop_3: 'val_3' }; function createMap(obj) { let map = new Map(); Object.keys(obj).forEach(key => { map.set(key, obj[key]); }); return map; } function GFG_Fun() { const map = createMap(obj); down.innerHTML = "Val of prop_1 is " + map.get('prop_1'); } </script> </body> </html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA