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. 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 usados para transformar arrays. Puedes encontrar una lista completa de los métodos disponibles en la documentación de MDN.

map (pura)

Crea un nuevo array transformando cada elemento según una función que se pasa 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]

Vale la pena señalar que el array resultante siempre tendrá la misma longitud que el original.

filter (pura)

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

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

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

reduce (pura)

Reduce el array a un solo valor usando una función que toma un acumulador y el elemento actual del array como parámetros. Esta función indica cómo se debe combinar 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 (pura)

Dado 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 incluirá. Además, todos los parámetros son opcionales: el índice de inicio es 0 por defecto y el índice de fin 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 y/o agrega 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 a eliminar
• los elementos 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 a strings y luego aplicando una comparación de strings (consulta Comparación). La ordenación se hace in-place, lo que significa que el array original se modifica. sort también devuelve ese array modificado, lo cual resulta útil 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. La función de comparación se llama con dos argumentos, que son dos elementos del array. Luego 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 permanecer igual

Con eso, el problema de ordenar números se puede corregir 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 de tiempo y espacio).