¿Cómo reemplazar un elemento de una array en JavaScript?

Un elemento se puede reemplazar en una array utilizando dos enfoques:

Método 1: Usar el método splice()

El tipo de array en JavaScript nos proporciona el método splice() que nos ayuda a reemplazar los elementos de una array existente eliminando e insertando nuevos elementos en el índice requerido/deseado.

Acercarse:

Inicializamos una array y luego aplicamos el método splice(), lo que resultó en la inserción del elemento «Febrero» en el índice 1 sin eliminar ningún elemento.
Aplique otro método splice() en la array resultante después del primer splice(), para reemplazar el elemento «junio» que está en el índice 4 (en la array de salida del primer método splice()) por el elemento «mayo». .

Sintaxis:

Array.splice(start_index, delete_count, value1, value2, value3, ...)

Nota: el método Splice() elimina cero o más elementos de una array comenzando por incluir el elemento start_index y reemplaza esos elementos con cero o más elementos especificados en la lista de argumentos.
El método Splice() modifica la array directamente de manera diferente al método Slice() de nombre similar.

Ejemplo 1: A continuación se muestran algunos ejemplos para ilustrar el método Splice() :
Este ejemplo ilustra el uso simple del método de empalme.

<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <p>Click on the button to replace the array elements.
        </p>
        <button onclick="element_replace()">
            Replace
        </button>
        <p>The Updated Array Elements:</p>
        <p id="result"></p>
        <script>
            function element_replace() {
  
              // Initializing the array
              var list = ["January", 
                          "March",
                          "April",
                          "June"];
  
              // splicing the array elements using splice() method
              list.splice(1, 0, "February");
              // expected output [January, February, March, April, June]
  
              // splicing the output elements after the first splicing
              list.splice(4, 1, "May");
  
              document.getElementById(
                "result").innerHTML = list;
            }
        </script>
  
    </center>
</body>
  
</html>

Salida después de hacer clic en el botón:

Método 2: usar los métodos array map() y filter() .

El método map() en JavaScript crea una array llamando a una función específica en cada elemento presente en la array principal. arr.filter() la función se usa para crear una nueva array a partir de una array dada que consiste solo en aquellos elementos de la array dada que satisfacen una condición establecida por la función de argumento. Con la ayuda de

Acercarse:

Inicializar una array.
Seleccione el índice objetivo con la ayuda de los métodos .map y .filter .
Establecer el nuevo valor en el índice objetivo

Sintaxis:

ele[ele.map((x, i) => [i, x]).filter(x => x[1] == old_value)[0][0]] = new_value

Ejemplo 2:

<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <p>
            Click on the button to 
          replace the array elements.
        </p>
        <button onclick="element_replace()">
            Replace
        </button>
        <p>The Updated Array Elements:</p>
        <p id="result"></p>
        <script>
            function element_replace() {
  
                var ele = Array(10, 20, 300, 40, 50);
  
                ele[ele.map((x, i) => [i, x]).filter(
                  x => x[1] == 300)[0][0]] = 30
  
                console.log(ele);
            }
        </script>
  
    </center>
</body>
  
</html>

Producción:

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 akshatyadav y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta