Formas de implementar Object.values() en JavaScript

Hay un método Object.values() que devuelve los valores de JavaScript Object. Aquí vamos a ver todas las demás alternativas a este método con la ayuda de JavaScript. Aquí se discuten algunos enfoques.

Enfoque 1: use el método Object.keys() para obtener las claves y luego use el método map() para asignar las claves a los valores y almacenar los valores en una array.

Ejemplo: Este ejemplo implementa el enfoque anterior.

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        Alternative version for Object.values() in JavaScript.
    </title>
</head>
  
<body style="text-align:center;">
    <h1 style="color: green">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP">
    </p>
    <button onclick="gfg_Run()">
        Click Here
    </button>
    <p id="GFG_DOWN">
    </p>
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        var arr = [];
        var obj = {
            a: 'val_1',
            b: 'val_2'
        };
        el_up.innerHTML = 
          "Click on the button to get the values.<br>Object = "
        + JSON.stringify(obj);
  
        function gfg_Run() {
            var val = Object.keys(obj).map(function(e) {
                return obj[e];
            });
            el_down.innerHTML = JSON.stringify(val);
        }
    </script>
</body>
  
</html>

Producción:

Enfoque 2: Visite todas las propiedades del objeto ejecutando un bucle e inserte el valor en una array cada vez. Se utilizan los métodos obj.hasOwnProperty() y push() .

Ejemplo: Este ejemplo implementa el enfoque anterior.

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        Alternative version for Object.values() in JavaScript.
    </title>
</head>
  
<body style="text-align:center;">
    <h1 style="color: green">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP">
    </p>
    <button onclick="gfg_Run()">
        Click Here
    </button>
    <p id="GFG_DOWN">
    </p>
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        var arr = [];
        var obj = {
            a: 'val_1',
            b: 'val_2'
        };
        el_up.innerHTML = 
          "Click on the button to get the values.<br>Object = " 
        + JSON.stringify(obj);
  
        function getValues(obj) {
            var ret = [];
            for (var i in obj) {
                if (obj.hasOwnProperty(i)) {
                    ret.push(obj[i]);
                }
            }
            return ret;
        }
  
        function gfg_Run() {
            el_down.innerHTML = JSON.stringify(getValues(obj));
        }
    </script>
</body>
  
</html>

Producción:

Enfoque 3: (en formato ES6) use el método Object.keys() para obtener las claves y luego use el método map() para asignar las claves a los valores y almacenar los valores en una array.

Ejemplo: Este ejemplo implementa el enfoque anterior.

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        Alternative version for Object.values() in JavaScript.
    </title>
</head>
  
<body style="text-align:center;">
    <h1 style="color: green">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP">
    </p>
    <button onclick="gfg_Run()">
        Click Here
    </button>
    <p id="GFG_DOWN">
    </p>
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        var arr = [];
        var obj = {
            a: 'val_1',
            b: 'val_2'
        };
        el_up.innerHTML = 
          "Click on the button to get the values.<br>Object = "
        + JSON.stringify(obj);
  
        function gfg_Run() {
            el_down.innerHTML = Object.keys(obj).map(e => obj[e]);
        }
    </script>
</body>
  
</html>

Producció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 Cancelar la respuesta