Eliminar elemento de una matriz en JavaScript

    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.

     

    Etiquetas:

    Deja una respuesta

    Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *