¿Cómo agregar un objeto a una array en JavaScript?

Hay 3 métodos populares que se pueden usar para insertar o agregar un objeto a una array.

  • empujar()
  • empalme()
  • anular desplazamiento()

Método 1: método push() de Array

El método push() se usa para agregar uno o varios elementos al final de una array. Devuelve la nueva longitud de la array formada. Se puede insertar un objeto pasándolo como parámetro a este método. Por lo tanto, el objeto se agrega al final de la array.

Sintaxis:

array.push(objectName)

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>Adding object in array</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">Geeksforgeeks</h1>
    <p>Click the button to add new elements to the array.</p>
  
    <button onclick="pushFunction()">Add elements</button>
  
    <p id="geeks"></p>
  
    <script>
        var list = ["One", "Two", "Three"];
        document.getElementById("geeks").innerHTML = list;
  
        function pushFunction() {
            list.push("Four", "Five", );
            document.getElementById("geeks").innerHTML = list;
        }
    </script>
  
</body>
  
</html>

Producción:

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

Método 2: método de empalme()

El método de empalme se usa para eliminar y agregar elementos de un índice específico. Se necesitan 3 parámetros, el índice de inicio, la cantidad de elementos a eliminar y luego los elementos que se agregarán a la array. Un objeto solo se puede agregar sin eliminar ningún otro elemento especificando el segundo parámetro en 0.

Se pasa al método el objeto a insertar y se especifica el índice donde se va a insertar. Esto inserta el objeto en el índice especificado.

Sintaxis:

arr.splice(index, 0, objectName)

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>Adding object in array</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">Geeksforgeeks</h1>
    <p>Click the button to add new elements to the array.</p>
  
    <button onclick="spliceFunction()">Add elements</button>
  
    <p id="geeks"></p>
  
    <script>
        var list = ["HTML", "CSS", "JavaScript"];
        document.getElementById("geeks").innerHTML = list;
  
        function spliceFunction() {
            list.splice(2,0,"Angular", "SQL", );
            document.getElementById("geeks").innerHTML = list;
        }
    </script>
  
</body>
  
</html>            

Producción:

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

Método 3: método unshift()

El método unshift() se usa para agregar uno o varios elementos al comienzo de una array. Devuelve la longitud de la nueva array formada. Se puede insertar un objeto pasándolo como parámetro a este método. Por lo tanto, el objeto se agrega al comienzo de la array.

Sintaxis:

arr.unshift(object);

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>Adding object in array</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">Geeksforgeeks</h1>
    <p>Click the button to add new elements to the array.</p>
  
    <button onclick="unshiftFunction()">Add elements</button>
  
    <p id="geeks"></p>
  
    <script>
        var list = ["Geeks", "Contribute", "Explore"];
        document.getElementById("geeks").innerHTML = list;
  
        function unshiftFunction() {
            list.unshift("for", "Geeks", );
            document.getElementById("geeks").innerHTML = list;
        }
    </script>
  
</body>
  
</html>

Producción:

  • Antes de hacer clic en el botón:
    salida sin cambios
  • Después de hacer clic en el botón:
    consola-unshift
    Navegador compatible

  • Google Chrome 1.1 o superior
  • Mozilla Firefox 1.1 o superior
  • Safari
  • Internet Explore 5.5 o superior
  • Ópera

JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .

Publicación traducida automáticamente

Artículo escrito por sayantanm19 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 *