Los métodos de matriz llegarán a JavaScript en 2022

En artículos anteriores, he cubierto que Javascript almacena objetos y arreglos en almacenamiento dinámico. Eso significa que una matriz se crea una vez, y luego cualquier actualización en el futuro actualizará esa matriz original. Por ejemplo:

 let myArray = [ 1, 2, 3 ]; let newArray = myArray; newArray[0] = 2; // Both return [ 2, 2, 3 ] console.log(newArray, myArray);

Como tal, a menudo nos encontramos haciendo copias o clonando arreglos para hacer cambios en ellos sin afectar el original. Una forma común de hacerlo es con el operador de tres puntos :

 let myArray = [ 1, 2, 3]; let newArray = [...myArray]; newArray[0] = 2; // Returns [ 2, 2, 3 ] and [ 1, 2, 3 ] console.log(newArray, myArray);

Dado que la clonación es tan común, se ha escrito una nueva especificación que ha llegado a la etapa 3, que nos brindará una gran cantidad de nuevas formas de copiar y luego cambiar una matriz. Esta propuesta se denomina propuesta "Cambiar matriz por copia" . Echemos un vistazo a cómo funciona.

Apoyo

Actualmente, estas características no son compatibles con ningún navegador principal o versión de Node.JS. Sin embargo, podemos esperar que sean compatibles pronto, ya que esta especificación ha alcanzado la Etapa 3 en el proceso de propuesta de Javascript. Esta sección se actualizará a medida que cambie el soporte.

Dicho esto, existe un polyfill para recrear el comportamiento de esta propuesta, que puedes usar hoy.

Nueva matriz de cambios por métodos de copia

La nueva propuesta agrega 4 nuevos métodos que copiarán una matriz y luego la cambiarán de alguna manera. Estos son:

• Array.prototype.toReversed() - clona una matriz y luego la invierte
• Array.prototype.toSorted(compareFn) - clone una matriz y luego ordénela.
• Array.prototype.toSpliced(start, deleteCount, ...items) - clone una matriz y empalme de alguna manera.
• Array.prototype.with(index, value) - clona una matriz y agrega un nuevo elemento en algún lugar dentro de ella.

Todos estos métodos también funcionarán en datos de TypedArray , por ejemplo, Int8Array .

al revés()

toReversed hace exactamente lo que dice: toma una matriz y la invierte. Dado que esta función clona la matriz, no necesitamos hacer ninguna copia para crear una nueva versión de nuestra matriz original:

 let x = [ 1, 2, 3 ]; let y = x.toReversed(); // Returns [ 1, 2, 3 ], [ 3, 2, 1 ] console.log(x, y);

ordenados()

toSorted , es una versión no destructiva de sort() , lo que significa que no altera la matriz original. Por defecto, tomará una matriz y la ordenará numéricamente. Por ejemplo:

 let x = [ 5, 3, 4, 2, 1 ]; let y = x.toSorted(); // [ 1, 2, 3, 4, 5 ]

También acepta una función de comparación, que funciona igual que el método sort() en Javascript y es útil cuando se trabaja con una matriz de objetos. Por ejemplo:

 let x = [ { value: 0 }, { value: 4 }, { value: 2 }, { value: 3 } ]; // y becomes: // [ // { value: 0 }, // { value: 2 }, // { value: 3 }, // { value: 4 } // ] let y = x.toSorted((a, b) => { return a.value - b.value });

empalmado()

toSpliced() es una versión no destructiva de splice() , lo que significa que no altera la matriz original. Acepta tres argumentos:

• start - la posición en la que empezar.
• deleteCount - el número de elementos a eliminar.
• ...items : cualquier elemento para insertar en la posición de inicio después de la eliminación.

Por ejemplo:

 let x = [ "Dog", "Cat", "Zebra", "Bat", "Tiger", "Lion" ]; // y is [ "Dog", "Snake", "Bat", "Tiger", "Lion" ] let y = x.toSpliced(1, 2, "Snake"); // z is [ "Dog, "Tiger", "Lion" ] let z = x.toSpliced(1, 3);

Lo anterior es un ejemplo perfecto de cómo estas funciones de copia son útiles: usando el método splice() original, eliminaríamos elementos de x y los cambiaríamos permanentemente. Usando toSpliced() , podemos cambiar x muchas veces, sin preocuparnos de que cambie su contenido.

con()

Finalmente, tenemos with() , que simplemente cambia un elemento en una matriz existente. En esencia, tome la matriz A y muéstrela with otra cosa. Aquí hay un ejemplo de esto en acción.

 let x = [ "Dog", "Cat", "Lizard" ] // y is now [ "Dog", "Zebra", "Lizard" ] let y = x.with(1, "Zebra") // z is now [ "Tiger", "Cat", "Lizard" ] let z = x.with(0, "Tiger")

Una vez más, hemos podido crear varias matrices nuevas a partir de una matriz inicial , sin tener que crear una copia cada vez.

Conclusión

Estas adiciones de matrices son bastante poco controvertidas y muy necesarias para un lenguaje que normalmente mantiene solo una copia de una matriz u objeto. Usando estos nuevos métodos, Javascript elimina la confusión y la complejidad del código. Aunque no es un cambio tan grande como algo como Temporal , sigue siendo una adición bienvenida al idioma.

También publicado aquí