Transformaciones de arrays en

Acerca de Transformaciones de arrays

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 con 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. Otros métodos, sin embargo, 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 que se pasa como argumento. Estas funciones de callback suelen escribirse 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 toma un acumulador y el elemento actual del array como parámetros. 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 uno de fin, crea un subarray a partir del array sobre el que se llama.

El elemento en el índice de fin no se incluye. Además, todos los parámetros son opcionales: el índice de inicio tiene como valor predeterminado 0, y el índice de fin tiene como valor predeterminado 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, 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 hay que eliminar
• los elementos que hay que 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 a strings y aplicando después una comparación de strings (consulta Comparación de conceptos). La ordenación se realiza in-place, lo que significa que el array original se modifica. sort también devuelve ese array modificado, lo cual resulta práctico 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']

const arr = [3, 1, 2, 10];
arr.sort();
// => [1, 10, 2, 3]
// Because the string '10' comes before '2' in dictionary order.

Para personalizar el comportamiento de la ordenación, puedes pasar una función de comparación como argumento. A la propia función de comparación se le pasan dos argumentos, que son dos elementos del array. A continuación, 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

Con esto, el problema de ordenar números se puede solucionar pasando la función de comparación correcta.

const arr = [3, 1, 2, 10];
arr.sort((a, b) => a - b);
// => [1, 2, 3, 10]
// "a - b" is negative when b is greater than a, positive when
// a is greater than b and 0 when they are equal.

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 } ]

Desde 2019, la especificación del lenguaje establece que la ordenación debe ser estable, pero no hay garantías en cuanto al rendimiento (complejidad temporal y espacial).