Eliminar elemento de una matriz en JavaScript

E

En JavaScript, y al igual que en muchos otros lenguajes, es probable que en algún momento necesites eliminar un elemento de una matriz. Dependiendo de su caso de uso, esto podría ser tan fácil como usar el shift() o pop() comandos, pero eso solo funciona si el elemento está al principio o al final de la matriz, respectivamente. Muchos casos de uso requerirán que admita la eliminación de un elemento de una ubicación arbitraria en la matriz, que es lo que cubriremos aquí.

También explicaré cómo lograr esto de otras maneras, como con el uso de bibliotecas de utilidades que lo manejarán por usted, o si tiene que admitir navegadores más antiguos como IE 8.

JavaScript vainilla

Para eliminar un elemento en particular de una matriz en JavaScript, primero queremos encontrar la ubicación del elemento y luego eliminarlo.

Encontrar la ubicación por valor se puede hacer con el indexOf() método, que devuelve el índice para la primera aparición del valor dado, o -1 si no está en la matriz.

Usando este valor de índice, querremos eliminar el elemento, lo que podemos hacer con el splice() método.

function removeElement(array, elem) {
    var index = array.indexOf(elem);
    if (index > -1) {
        array.splice(index, 1);
    }
}

Así que si indexOf y splice son los únicos dos métodos que necesitamos para lograr esto, entonces, ¿para qué sirve la declaración if? Al verificar si el índice es mayor que -1, estamos verificando que el elemento esté realmente presente en la matriz. Si no lo fuera, y index es -1, luego usando este valor en splice en realidad eliminará el último elemento de la matriz, que no es lo que queremos.

Tenga en cuenta que esto solo elimina la primera aparición del elemento dado. Vea el siguiente ejemplo para ilustrar esto:

var arr = [1, 2, 3, 3, 4, 5];
removeElement(arr, 3);
console.log(arr);

// Output:
// [ 1, 2, 3, 4, 5 ]

Observe que el segundo ‘3’ todavía está presente.

Si queremos eliminar todas las instancias del elemento especificado, podemos lograrlo con un bucle while en lugar de la sentencia if:

function removeAllElements(array, elem) {
    var index = array.indexOf(elem);
    while (index > -1) {
        array.splice(index, 1);
        index = array.indexOf(elem);
    }
}

Ahora ejecutando el mismo código de ejemplo anterior, obtenemos lo siguiente:

var arr = [1, 2, 3, 3, 4, 5];
removeAllElements(arr, 3);
console.log(arr);

// Output:
// [ 1, 2, 4, 5 ]

Como puede ver, ambos elementos ‘3’ ahora se eliminan de la matriz.

Bibliotecas

Siendo este un caso de uso tan común, la mayoría (si no todas) de las bibliotecas de utilidades tienen una función para eliminar elementos de una matriz.

Lodash

Para eliminar un elemento, Lodash tiene la remove() método. Si tiene un caso de uso bastante simple, solo desea eliminar un elemento primitivo (como un número), entonces esta función probablemente sea excesiva para usted, ya que necesita pasar una función que determina si el elemento coincide con sus criterios.

Entonces, por ejemplo, así es como eliminaría el número 3:

var arr = [1, 2, 3, 3, 4, 5];
_.remove(arr, function(e) {
    return e === 3;
});
console.log(arr);

// Output:
// [ 1, 2, 4, 5 ]

Observe que ha eliminado todas las instancias de 3, que es el comportamiento predeterminado.

Sin embargo, este método es más útil cuando se eliminan elementos más complejos, como objetos. Por ejemplo, tal vez desee eliminar todos los objetos “personas” de una matriz si tienen menos de 21 años:

var people = [
    {name: 'Billy', age: 22},
    {name: 'Sally', age: 19},
    {name: 'Timmy', age: 29},
    {name: 'Tammy', age: 15}
];
_.remove(people, function(e) {
    return e.age < 21
});
console.log(people);

// Output
// [ { name: 'Billy', age: 22 }, { name: 'Timmy', age: 29 } ]

Funciona un poco como el filter método, excepto que elimina los elementos de la matriz que pasa y luego devuelve una matriz de los elementos eliminados del método en sí.

Guion bajo

La biblioteca de utilidades Underscore tiene un método similar al de Lodash, llamado reject. Funciona de manera muy similar, excepto por una diferencia notable. La matriz resultante se devuelve desde el método y la matriz que le pasa permanece sin cambios.

Consulte el siguiente código para ver un ejemplo:

var arr = [1, 2, 3, 3, 4, 5];
var ret = _.reject(arr, function(e) {
    return e === 3;
});
console.log(arr);
console.log(ret);

// Output:
// [ 1, 2, 3, 3, 4, 5 ]
// [ 1, 2, 4, 5 ]

De nuevo, como el de Lodash remove método, el reject El método es más adecuado para casos más complejos, como eliminar objetos o grupos de elementos.

Compatible con Internet Explorer

Si su proyecto requiere que admita versiones antiguas de Internet Explorer, específicamente IE 8 en este caso, entonces el indexOf() El método no funcionará para usted ya que no es compatible con esta versión de IE.

Para hacer frente a esto, una solución es ajustar el método, como se muestra en esta respuesta de Stack Overflow:

if (!Array.prototype.indexOf)
{
  Array.prototype.indexOf = function(elt /*, from*/)
  {
    var len = this.length >>> 0;

    var from = Number(arguments[1]) || 0;
    from = (from < 0)
         ? Math.ceil(from)
         : Math.floor(from);
    if (from < 0)
      from += len;

    for (; from < len; from++)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}

Según la publicación de SO, esta es la implementación de indexOf de MDN, utilizado en Firefox / SpiderMonkey.

Otra opción sería usar jQuery’s $.inArray() método:

var arr = [1, 2, 3, 3, 4, 5];
var idx = $.inArray(3, arr);
console.log(idx);

// Output:
// 2

Esto es aproximadamente equivalente a indexOf, que luego se puede utilizar para escribir el removeElement método como se muestra en la primera sección de este artículo.

 

About the author

Ramiro de la Vega

Bienvenido a Pharos.sh

Soy Ramiro de la Vega, Estadounidense con raíces Españolas. Empecé a programar hace casi 20 años cuando era muy jovencito.

Espero que en mi web encuentres la inspiración y ayuda que necesitas para adentrarte en el fantástico mundo de la programación y conseguir tus objetivos por difíciles que sean.

Add comment

Sobre mi

Últimos Post

Etiquetas

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con tus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, aceptas el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad