5 Métodos para manejo de datos en JS

Cuando estamos desarrollando una aplicación web, el 90% de los datos que recibimos desde el back-end se encuentran contenidos en arreglos, por esta razón es fundamental que conozcas estos 5 métodos nativos de javascript que te harán la vida mas fácil a la hora de manipular los datos que contienen.

1. Array.map()

Para mi este, es el método mas importante de todos. Con esta función olvídate de utilizar ciclos for para recorrer y manipular arreglos.

    
    var array = [1,2,3,4,5];

    array.map(function(num){  
      return num * num; 
    });     
    

El método map() itera y retorna un nuevo arreglo con sus elementos modificados dependiendo de la función que se le aplique como parámetro. En este caso me devuelve un arreglo con cada elemento multiplicado por si mismo.

2. Array.filter()

El método filter() tiene un comportamiento similar al anterior, con la única diferencia de que el nuevo arreglo contendrá los elementos que pasen por un filtro.

Ejemplo:

    
    var array = [1,'a','b',0,15,1];

    array.filter(function(i){
        return typeof i == 'number';
    });    
    

En este caso el nuevo arreglo contiene los valores que sean de tipo number.

3. Array.reduce()

El método reduce() aplica una función que recibe dos parámetros, valor anterior y valor actual y retorna un nuevo valor reducido.

Sino se especifica un valor inicial, el valor anterior sera igual al primer elemento del arreglo y el valor actual al segundo:

    
    var array = [1,2,3];

    array.reduce(function(valorAnterior, valorActual){
        return valorAnterior + valorActual;
    });

    //Primer llamado
    //valorAnterior = 1 , valorActual = 2

    //Segundo Llamado
    //valorAnterior = 3, valorActual = 3

    //return 6;    
    

En el caso de que se especifique el valor inicial, el valor anterior sera igual a este:

    
    var array = [1,2,3];

    array.reduce(function(valorAnterior, valorActual){
        return valorAnterior + valorActual;
    }, 4);

    //Primer llamado
    //valorAnterior = 4 , valorActual = 1

    //Segundo Llamado
    //valorAnterior = 5, valorActual = 2

    //Tercer Llamado
    //valorAnterior = 7, valorActual = 3

    //return 10;    
    

4. Array.sort()

El método sort() nos devuelve un arreglo con los elementos ordenados, sino le pasamos una función que defina el tipo de ordenamiento, este lo hará de acuerdo a la posición de su valor en el estándar Unicode.

Ejemplo sin función de comparación

    
    var array = ["rojo","amarillo","verde"];

    array.sort(); 
    

Ejemplo con función de comparación

    
    var array = ["rojo","amarillo","verde"];

    array.sort(function(a,b){
        return a < b;
    });  
    

Podríamos decir que el primer caso el método sort() ordeno el arreglo de "menor a mayor" (abc) y en el segundo caso de "mayor a menor" (zyx).

5. Array.join()

El método join() es muy sencillo pero eficaz, siempre los usamos cuando queremos unir los elementos de nuestro arreglo en una cadena, le podemos pasar como parametro una cadena que se encarga de separa los elementos del arreglo, si se omite se separan por una coma.

    
    var array = ['script','web'];

    array.join(' ');  
    

Algunos ejemplos

Ahora te dejo unos ejemplos un poco mas complejos en donde veras la utilidad de las funciones que describimos anteriormente:

Si ves esta sintaxis

    
    (param1) => { statements }
    (param1) => expression  
    

Son Arrow functions y equivalen a

    
    function(param1){return param1}  
    function(param1)return param1  
    

1. Encuentra el entero impar

Dado un arreglo, encuentre el entero que aparece un numero impar de veces.Siempre habrá un único entero que aparece un numero impar de veces.

    
    function findOdd(A) {
        return A.reduce((a,b) => a ^ b);
    }

    console.log(findOdd([20,1,-1,2,-2,3,3,5,5,1,2,4,20,4,-1,-2,5]));
    console.log(findOdd([5,4,3,2,1,5,4,3,2,10,10]));
    console.log(findOdd([10]));  
    

2. Remover de un arreglo el valor especificado

Dado un arreglo de números, implementar una función que me retorne un nuevo arreglo sin el valor especificado.

    
    function array_diff(a, b) {
        return a.filter((i)=>i!=b);
    }

    console.log(array_diff([1,2],1));
    console.log(array_diff([1,2,2,2,3],2));
    

3. Ordenar personas

Implementar una función que me permita ordenar a un listado de personas por edad, de menor a mayor.

    
    function OrderPeople(people){
        return people.sort((a,b) => a.age - b.age  ); 
    }

    console.log(OrderPeople([   { age: 83, name: 'joel' },
                    { age: 46, name: 'roger' },
                    { age: 99, name: 'vinny' }
    ])); 
    

4. Orden, por favor

Tu tarea es ordenar un string, cada palabra del string contiene un numero del 1 al 9, el numero indica la posición de la palabra

    
    function order(words){              
        return words.split(' ').sort((a, b) => a.match(/\d/) - b.match(/\d/)).join(' ');
    }

    console.log(order("is2 Thi1s T4est 3a"));
    

5. Encuentra las mayusculas

Escribe una función que tome una palabra como argumento y que retorne una lista con los indices de las letras mayúsculas.

    
    var capitals = function (word) {                            
        return word.split('').map((i) => /[A-Z]/.test(i) ? word.indexOf(i) : 'x').filter((i) => i != 'x');
    }

    console.log(capitals('CodEWaRs'));
    

Bibliográfia

1. Array.prototype.map()
2. Array.prototype.filter()
3. Array.prototype.reduce()
4. Array.prototype.sort()
5. Array.prototype.join()