Encantamientos transformadores de Elyse

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

Algunos métodos son puros, lo que significa que no modifican el array original. En su lugar, devuelven uno nuevo. Otros, en cambio, 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 usados 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 que se pasa como argumento. Estas funciones 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 señalar 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 recibe como parámetros un acumulador y el elemento actual del array. Esta función indica cómo debe combinarse el elemento actual con 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 final, crea un subarray a partir del array que se pasa como parámetro.

El elemento que está en el índice final no se incluye. Además, todos los parámetros son opcionales: el índice de inicio es 0 por defecto, y el índice final es la longitud del array por defecto.

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 elementos de un array y/o agrega nuevos.

Recibe los siguientes parámetros:

• el índice del elemento donde empezar a modificar el array
• la cantidad 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

De forma predeterminada, sort ordena los elementos de un array convirtiéndolos primero en strings y luego aplicando una comparación de strings (consulta la Comparación). La ordenación se realiza in situ, lo que significa que se modifica el array original. sort también devuelve ese array modificado, lo cual es útil si quieres encadenarle 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 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 del segundo
• 0 si el orden de los elementos debe mantenerse igual

Aquí tienes un ejemplo de cómo 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 } ]