Los encantamientos transformadores de Elyse

En JavaScript, la clase Array tiene muchos métodos integrados potentes para transformar arrays. Estos métodos hacen que sea mucho más fácil convertir un array en otro de lo que sería usando un simple bucle for o una manipulación más directa.

Algunos métodos son puros, lo que significa que no modifican el array original. En su lugar, devuelven uno nuevo. Sin embargo, otros métodos manipulan el array sobre el que se llaman y no devuelven el array modificado.

A continuación se presentan algunos de los métodos más utilizados para transformar arrays. Puedes encontrar una lista completa de los métodos disponibles en la documentación de MDN.

map (puro)

Crea un nuevo array transformando cada elemento según una función pasada como argumento. Estas funciones de callback a menudo se escriben como funciones flecha.

let arr = [1, 2, 3, 4];

const newArr = arr.map((value) => value - 1);
console.log(newArr);
// => [0, 1, 2, 3]
console.log(arr);
// => [1, 2, 3, 4]

Cabe destacar que el array resultante siempre tendrá la misma longitud que el original.

filter (puro)

Crea un array filtrando el actual, dada una función de filtrado (que devuelve true si el elemento debe conservarse y false si debe eliminarse).

let arr = [1, 2, 3, 4];

arr.filter((value) => value % 2 === 0);
// => [2, 4]

reduce (puro)

Reduce el array a un único valor usando una función que toma un acumulador y el elemento actual del array como parámetros. Esta función indica cómo debe fusionarse el elemento actual en el acumulador y devuelve el acumulador que se usará en la siguiente iteración.

let arr = [1, 2, 3, 4];

// Get the sum of elements
arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
// => 10

// Classify the numbers by whether they are odd or not
arr.reduce(
  (accumulator, currentValue) => {
    if (currentValue % 2 === 0) {
      accumulator.even.push(currentValue);
    } else {
      accumulator.odd.push(currentValue);
    }

    return accumulator;
  },
  { even: [], odd: [] },
);
// => { even: [2, 4], odd: [1, 3] }

reverse

Invierte los elementos de un array.

const arr = [1, 2, 3, 4];

arr.reverse();
// => [4, 3, 2, 1]

Este método modifica el array sobre el que se llama.

slice (puro)

Dados un índice de inicio y un índice de fin, crea un subarray a partir del array pasado como parámetro.

El elemento en el índice de fin no se incluirá. Además, todos los parámetros son opcionales: el índice de inicio toma 0 por defecto, y el índice de fin toma por defecto la longitud del array.

const arr = [1, 2, 3, 4];

arr.slice(1, 2); // [2]
arr.slice(1); // [2, 3, 4]
// You can also use negative numbers, that represent the indexes
// starting from the end of the array
arr.slice(-2); // [3, 4]

splice

Elimina o reemplaza y/o añade nuevos elementos de un array.

Toma los siguientes parámetros:

• el índice del elemento donde empezar a modificar el array
• el número de elementos que se van a eliminar
• los elementos que se van a insertar en el array (opcional)

splice devuelve los elementos que se han eliminado.

const arr = ['1', '2', '5', '6'];

// Insert an element at index 2
arr.splice(2, 0, '3');
console.log(arr);
// => ['1', '2', '3', '5', '6']

// Remove 2 elements, starting at index 3 and insert 2 elements
const removed = arr.splice(3, 2, '4', '5');
console.log(removed);
// => ['5', '6']
console.log(arr);
// => ['1', '2', '3', '4', '5']

// Remove 1 element at index 1
arr.splice(1, 1);
console.log(arr);
// => ['1', '3', '4', '5']

sort

Por defecto, sort ordena los elementos de un array convirtiéndolos primero en strings y luego aplicando una comparación de strings (consulta la comparación de conceptos). La ordenación se realiza in situ, lo que significa que el array original se modifica. sort también devuelve ese array modificado, lo cual es conveniente si quieres encadenar otros métodos.

const arr = ['c', 'a', 'z', 'b'];
const result = arr.sort();
console.log(result);
// => ['a', 'b', 'c', 'z']
console.log(arr);
// => ['a', 'b', 'c', 'z']

Para personalizar el comportamiento de la ordenación, puedes pasar una función de comparación como argumento. La propia función de comparación se llama con dos argumentos, que son dos elementos del array. Después debe devolver lo siguiente:

• un número negativo si el primer argumento debe ordenarse antes que el segundo
• un número positivo si el primer argumento debe ordenarse después que el segundo
• 0 si el orden de los elementos debe permanecer igual

Aquí tienes un ejemplo de cómo se puede usar una función de comparación personalizada para ordenar un array de objetos.

const arr = [
  { name: 'Lydia', age: 7 },
  { name: 'Anne', age: 34 },
  { name: 'Holger', age: 59 },
];

arr.sort((item1, item2) => {
  if (item1.name < item2.name) {
    return -1;
  }
  if (item1.name > item2.name) {
    return 1;
  }
  return 0;
});
// => [ { name: 'Anne', age: 34 }, { name: 'Holger', age: 59 },
// { name: 'Lydia', age: 7 } ]