Eliminar elemento de una matriz en JavaScript

En JavaScript, y al igual que en muchos otros idiomas, es probable que en algún momento necesite eliminar un elemento de una matriz. Dependiendo de su uso de los casos esto podría ser tan fácil como utilizar el built-in shift()pop()comandos, pero que sólo funciona si el elemento es al principio o al final de la matriz, respectivamente. Muchos casos de uso requerirán que apoye 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.

Vanilla JavaScript

Para eliminar un elemento en particular de una matriz en JavaScript, primero querremos encontrar la ubicación del elemento y luego eliminarlo.
La búsqueda de 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);
    }
}
Entonces, si indexOfspliceson los dos únicos métodos que necesitamos para lograr esto, entonces, ¿para qué sirve la sentencia if? Al verificar si el índice es mayor que -1, estamos verificando que el elemento está realmente presente en la matriz. Si no lo fue, y indexes -1, el uso de este valor en splicerealidad 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 lograr esto 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

Dado que este es 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 el remove()método. Si tiene un caso de uso bastante simple, solo quiere eliminar un elemento primitivo (como un número), entonces esta función es probablemente una exageración para usted, ya que necesita pasar una función que determine si el elemento coincide con sus criterios.
Entonces, por ejemplo, aquí es cómo se 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 al eliminar elementos más complejos, como los objetos. Por ejemplo, tal vez desee eliminar todos los objetos de "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 filtermétodo, excepto que elimina los elementos de la matriz que se pasa y luego devuelve una matriz de los elementos eliminados del propio método.

Guion bajo

La biblioteca de utilidad Underscore tiene un método similar al de Lodash, llamado rejectFunciona 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.
Vea el siguiente código para 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, al igual que el removemétodo de Lodash , el rejectmétodo es el más adecuado para casos más complejos, como eliminar objetos o grupos de elementos.

Apoyo a Internet Explorer

Si su proyecto requiere que admita versiones antiguas de Internet Explorer, específicamente IE 8 en este caso, entonces el indexOf()método no funcionará para usted ya que no es compatible con esta versión de IE.
Para lidiar con esto, una solución es cambiar el método, como se muestra en esta respuesta de desbordamiento de pila :
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 SO, esta es la implementación de indexOfMDN, utilizada en Firefox / SpiderMonkey.
Otra opción sería usar el $.inArray()método de jQuery :
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 usar para escribir el removeElementmétodo como se muestra en la primera sección de este artículo.

Acerca de: Programator

Somos Instinto Programador

0 comentarios:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Con tecnología de Blogger.