¿Cómo agregar un par clave/valor a un objeto JavaScript?

Para agregar un par clave/valor a un objeto de JavaScript, usamos la notación de puntos o la notación de corchetes . Ambos métodos son ampliamente aceptados.

Ejemplo 1: este ejemplo agrega {“nextFavColor”: “red”} al objeto GFG_p mediante la notación de puntos .

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        JavaScript | Add a key/value
        pair to JavaScript object 
    </title> 
</head> 
      
<body style = "text-align:center;"> 
    <h1 style = "color:green;" > 
        GeeksForGeeks 
    </h1> 
          
    <p id="GFG_up" style="color:red;"></p>
          
    <button onclick = "Geeks()"> 
        Click to add 
    </button> 
          
    <p id="GFG_down" style="color:green;"></p>
          
    <script> 
        var GFG_p = {fName:"Geeks", lName:"forGeeks",
                    age:100, favColor:"green"};
        var p_up = document.getElementById("GFG_up"); 
        var p_down = document.getElementById("GFG_down");
        p_up.innerHTML = JSON.stringify(GFG_p);
          
        function Geeks() {
            GFG_p.nextFavColor = "Red";
            p_down.innerHTML = JSON.stringify(GFG_p);     
        } 
    </script> 
</body> 
  
</html>                    

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Ejemplo 2: este ejemplo agrega {“thirdFavColor”: “blue”} al objeto GFG_p usando la notación de corchetes .

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        JavaScript | Add a key/value
        pair to JavaScript object 
    </title> 
</head> 
      
<body style = "text-align:center;"> 
    <h1 style = "color:green;" > 
        GeeksForGeeks 
    </h1> 
          
    <p id="GFG_up" style="color:blue;"></p>
          
    <button onclick = "Geeks()"> 
        Click to add 
    </button> 
          
    <p id="GFG_down" style="color:green;"></p>
          
    <script> 
        var GFG_p = {fName:"Geeks", lName:"forGeeks", 
                    age:100, favColor:"green"};
        var p_up = document.getElementById("GFG_up"); 
        var p_down = document.getElementById("GFG_down");
        p_up.innerHTML = JSON.stringify(GFG_p);
          
        function Geeks() {
            GFG_p["thirdFavColor"] = "blue";
            p_down.innerHTML = JSON.stringify(GFG_p);     
        } 
    </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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *