¿Cómo agregar un elemento en una array en JavaScript?

Hay varios métodos para agregar nuevos elementos a una array de JavaScript.

push() : el método push() agregará un elemento al final de una array, mientras que su función gemela, el método pop(), eliminará un elemento del final de la array. Si necesita agregar uno o varios elementos al final de una array, el método push() casi siempre será su opción más simple y rápida.

Sintaxis:

array.push(item1, item2, ..., itemX)

Parámetro: item1, item2, …, itemX: Estos son parámetros requeridos. Los elementos hasta el final de la array.

Ejemplo:

<!DOCTYPE html>
<html>
<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <button onclick="GFG()">Click</button>
        <p id="geeks"></p>
        <script>
        var Geeks = ["Geeks1", "Geeks2", "Geeks3", "Geeks4"];
        document.getElementById("geeks").innerHTML = Geeks;
        function GFG() {
          Geeks.push("Geeks5", "Geeks6");
          document.getElementById("geeks").innerHTML = Geeks;
        }
        </script>    
    </center>
</body>
</html>

Producción:

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

unshift() : El método unshift() agregará un elemento al comienzo de una array, mientras que su función gemela, shift(), eliminará un elemento del comienzo de la array.
Sintaxis:

array.unshift(item1, item2, ..., itemX)

Parámetro: item1, item2, …, itemX: Estos son parámetros requeridos. Los elementos que se agregarán al comienzo de la array.

Ejemplo:

<!DOCTYPE html>
<html>
<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <button onclick="GFG()">Click</button>
        <p id="geeks"></p>
        <script>
        var Geeks = ["Geeks1", "Geeks2", "Geeks3", "Geeks4"];
        document.getElementById("geeks").innerHTML = Geeks;
        function GFG() {
          Geeks.unshift("Geeks5", "Geeks6");
          document.getElementById("geeks").innerHTML = Geeks;
        }
        </script>    
    </center>
</body>
</html>

Producción:

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

splice() : El método splice() modifica el contenido de una array eliminando elementos existentes y/o agregando nuevos elementos.

Sintaxis:

array.splice(index, howmany, item1, ....., itemX)

Parámetro:

índice: Este es un parámetro obligatorio. Un número entero que especifica en qué posición agregar/eliminar elementos. Use valores negativos para especificar la posición desde el final de la array.
cuántos: este es un parámetro opcional. El número de elementos a eliminar. Si se establece en 0, no se eliminará ningún elemento.
item1, item2, …, itemX: estos son parámetros opcionales. Los nuevos elementos que se agregarán a la array.

Ejemplo:

<!DOCTYPE html>
<html>
<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <button onclick="GFG()">Click</button>
        <p id="geeks"></p>
        <script>
        var Geeks = ["Geeks1", "Geeks2", "Geeks3", "Geeks4"];
        document.getElementById("geeks").innerHTML = Geeks;
        function GFG() {
          Geeks.splice(2, 1, "Geeks5", "Geeks6");
          document.getElementById("geeks").innerHTML = Geeks;
        }
        </script>    
    </center>
</body>
</html>

Producción:

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

concat() : el método concat() devuelve una nueva array combinada compuesta por la array en la que se llama, unida a la array (o arrays) de su argumento. Este método se usa para unir dos o más arrays y este método no no cambia las arrays existentes, pero devuelve una nueva array que contiene los valores de las arrays unidas.

Sintaxis:

array1.concat(array2, array3, ..., arrayX)

Parámetro:

array2, array3, …, arrayX: estos son parámetros obligatorios. Las arrays a unir.

Ejemplo:

<!DOCTYPE html>
<html>
<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <button onclick="GFG()">Click</button>
        <p id="geeks"></p>
        <script>
        function GFG() {
          var g1 = ["Geeks1", "Geeks2"];
          var g2 = ["Geeks3", "Geeks4"];
          var g3 = ["GeeksForGeeks"];
          var g4 = g1.concat(g2, g3); 
          document.getElementById("geeks").innerHTML = g4;
        }
        </script>    
    </center>
</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 rathbhupendra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta