Nuevos metodos de Arreglos en Javascript
En el mundo del desarrollo web, el lenguaje JavaScript evoluciona constantemente. Con cada nueva versión de ECMAScript, se presentan emocionantes características y mejoras que transforman la manera en que escribimos código. En ECMAScript 2023, JavaScript ha introducido varios métodos nuevos para arrays, ampliando así la potencia y eficiencia en su manipulación.
En esta entrada de blog, exploraremos cinco nuevos métodos para arrays introducidos en ECMAScript 2023:
findLast(): Busca el último elemento que cumple con ciertos criterios en un array, útil para casos en los que se desea encontrar la última ocurrencia de un valor.findLastIndex(): Similar afindLast(), pero en lugar de devolver el elemento, proporciona el índice del último elemento que cumple con los criterios especificados.toReversed(): Invierte el orden de los elementos en un array, ofreciendo una manera rápida de obtener una versión invertida de la secuencia original.toSorted(): Este método ordena los elementos de un array, proporcionando una forma sencilla de organizar la información.toSpliced(): Permite realizar cortes precisos en un array, facilitando la manipulación y extracción de elementos específicos.
Analizaremos en detalle cómo estos nuevos métodos se diferencian de sus contrapartes existentes, destacando las ventajas y casos de uso específicos.
FindLast
Si usamos find este recorrer los elementos de izquierda a derecha:
const numbers = [10, 35, 55, 70, 80, 100, 20, 30];
// find
const foundNumber = numbers.find((number) => {
console.log("n", number);
return number === 100;
});
console.log({ foundNumber });
pero puede que en algunos casos necesitemos que lo haga de derecha a izquierda para evitar iteraciones innecesarias, para esto usaremos findLast:
const foundNumber = numbers.findLast((number) => {
console.log("n", number);
return number === 100;
});
console.log({ foundNumber });
findLastIndex
Similar a lo que teniamos con findIndex el cual buscaba un indice, empezando de izquierda a derecha
const index = numbers.findIndex((number) => {
console.log("n", number);
return number === 100;
});
console.log({ index });
tambien obtener findLastIndex, el cual busca de derecha a Izquierda:
const index = numbers.findLastIndex((number) => {
console.log("n", number);
return number === 100;
});
console.log({ index });
toReversed
En Javascript ya tenemos una funcion para invertir el orden de los elementos, sin embargo esta funcion muta el arreglo:
const numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers);
asi que ahora tenemos un nueva funcion que altera el orden sin mutarlo, sino que devuelve un nuevo arreglo:
const numbers = [1, 2, 3, 4, 5];
const newNumbers = numbers.toReversed();
console.log(numbers);
console.log(newNumbers);
toSorted
Para ordenar elementos ya teniamos un metodo capaz de lograr esto, sin embargo este metodo devolvia un arreglo ordenado pero tambien modifica el arreglo original, es decir muta el arreglo:
// const numbers = [11, 5, 7, 23, 44, 12, 10];
// const sortedNumbers = numbers.sort((a, b) => a - b);
// console.log(numbers)
// console.log(sortedNumbers)
asi que para evitar esto ahora tenemos el toSorted:
const numbers = [11, 5, 7, 23, 44, 12, 10];
const sortedNumbers = numbers.toSorted((a, b) => a - b);
console.log(numbers)
console.log(sortedNumbers)
toSpliced
El método splice en JavaScript se utiliza para modificar el contenido de un array al agregar o eliminar elementos en posiciones específicas aunque este metodo muta un arreglo:
const tasks = [
'task1',
'task2',
'task3',
]
const spliced = tasks.splice(1, 1, 'task4', 'task5');
console.log(tasks)
console.log(spliced)
asi que tambien tenemos el metodo toSpliced:
const spliced = tasks.toSpliced(1, 1, 'task4', 'task5');
console.log(tasks)
console.log(spliced)
with
El método de arreglos with() introdujo una nueva característica en ECMAScript 2023. El método with() ofrece una forma segura de actualizar elementos en una matriz sin cambiar el array original. Esto se logra devolviendo una nuevo arreglo con los elementos actualizados.
Por ejemplo antes para actualizar un elemento de un arreglo se necesita copiarlo porque este era mutable:
const flowers=['Lily', 'Daisy', 'Iris', 'Lotus', 'Allium'];
//old way of updating an array;
flowers [4]='Rose';
console.log(flowers);
//Output: ['Lily', 'Daisy', 'Iris', 'Lotus', 'Rose']
Sin embargo usando with ahora podemos actualizar un arreglo sin que este mute:
const updatedFlowers = flowers.with(4, "Aster");
console.log(flowers);
console.log(updatedFlowers);
coreJS
Finalmente si quieres usar todos estos metodos desde tus framework favoritos y aun estos no estan soportados puedes usar core-js y empezar a importar por funcionalidades las funciones que vas a necesitar usar en tu aplicacion.