Javascript ofrece a lo menos 4 formas de completar un arreglo con diferentes valores utilizando solo métodos nativos del lenguaje. Estos métodos permiten crear un arreglo de un tamaño y contenido predefinido.

Es posible utilizar `Array.fill` para crear un arreglo con un tamaño definido y luego utilizar map para completar los items con un valor determinado, como un entero o un string. También es posible completar el arreglo con un objeto, pero es necesario utilizar otra función adicional ya que `Array.fill` copia la referencia al objeto original y no crea multiples objetos únicos. Para resolver esto utilizamos `Array.map`.

Otro método es utilizar un simple ciclo for, pero es un método mutable.

También es posible utilizar los métodos `Array.from` o la sintaxis spread en combinación con la función `Array.map`.


javascript

4 formas de llenar un arreglo en Javascript

Javascript ofrece diferentes formas de manipular un arreglo. Una de estas manipulaciones es la necesidad de modificar el contenido de uno de los items de un arreglo, para ello podemos hacer uso de métodos mutables, como utilizar acceso por indice o método inmutables como el uso de la función `Array.map` o una combinación de `Array.findIndex` y `Array.slice`

3 formas de actualizar un arreglo de objetos en JavaScript

La flexibilidad de Javascript provee de diferentes métodos para realizar una acción cotidiana como eliminar elementos de un arreglo. Existen métodos mutables como  `Array.pop`, `Array.shift` y `delete` y métodos inmutables como `Array.slice` y `Array.filter`.

Cada uno de éstos métodos resuelve el mismo problema de una forma distinta y con ciertos casos de usos en específico como el caso de `Array.filter` que permite filtrar un arreglo en base a una condición particular.

¿Cómo eliminar elementos dentro de un arreglo?

Remove elementos duplicados de un arreglo es una tarea de manipulación de arreglos bastante común, y para ello Javascript ofrece diferentes alternativas.
Puedes utilizar una mezcla de métodos como `Array.filter` y `Array.indexOf` o un método más complejo y más flexible como `Array.reduce` o un simple `Array.foreEach` que te permite iterar sobre tu arreglo de manera imperativa. O incluso utilizar estructuras de datos más complejas como `Set`

4 formas de remover elementos duplicados de un arreglo con Javascript

Una revisión de las nuevas características que la nueva versión de Javascript ES2020 o ES11 trae para esta iteración.

Nuevas Características de ES2020 en JavaScript

En esta colección encontrarás un paso a paso para construir un componente complejo utilizando diferentes patrones de diseño implementados gracias al uso de la API Hooks.

Construye Componentes Avanzados con React Hooks y Patrones de Diseño

egghead

Manipulación Eficiente de Arreglos con JavaScript

https://app.egghead.io/api/v1/lessons/javascript-4-formas-de-llenar-un-arreglo-en-javascript/subtitles

Matías Hernández: [0:00] Es posible crear un arreglo de un tamaño definido y con un objeto declarado utilizando Array.fill. Esto crear un arreglo con cinco ítems con el número 3.

[0:10] También es posible utilizar objetos. En este caso, utilizaremos esta pequeña función que crea objetos usuarios o simulados utilizando la galería faker. Este método también genera un arreglo de cinco elementos, en este caso, cinco usuarios, pero en consola podemos ver que se refiere al mismo objeto cada vez, ya que fill copia la referencia del objeto original y completa el arreglo.

[0:32] Para modificar esto, podemos utilizar la función map(). Aquí creamos un arreglo con cinco espacios null y luego mapeamos sobre el arreglo para crear los objetos únicos.

[0:43] También es posible utilizar un ciclo for, pero en este caso utilizaremos un método mutable, ya que modificaremos el arreglo original.

[0:52] También podemos utilizar el método Array.from(). El primer argumento es un objeto iterable, y el segundo una función de mapeo para cada elemento. En este caso, es un objeto vacío, con la propiedad length con valor 5.

[1:07] También podemos utilizar la sintaxis spread, en donde se expande el arreglo y luego utilizamos nuevamente map para completar los ítems.

https://app.egghead.io/api/v1/lessons/javascript-4-formas-de-llenar-un-arreglo-en-javascript/transcript

https://app.egghead.io/api/v1/lessons/javascript-3-formas-de-actualizar-un-arreglo-de-objetos-en-javascript/subtitles

Matías Hernández: [0:00] En JavaScript podemos actualizar el contenido de un arreglo de objetos. Utilizaremos esta pequeña función para crear objetos random utilizando la galería faker.

[0:08] Un método para actualizar el contenido del arreglo es utilizar el acceso mediante índice del arreglo, pero este método es un método mutable ya que modifica el arreglo original. Podemos utilizar formas inmutables para el mismo objetivo, como la función map.

[0:26] Map itera sobre el arreglo mediante el uso de una función de callback que permite el acceso a cada uno de sus ítems. Map crea un nuevo arreglo con el contenido retornado por la función de callback.

[0:38] En este caso, utilizamos un bloque condicional para, en caso de que el id del ítem sea 3, actualizar sólo su propiedad name utilizando object spread. En caso contrario retornamos el mismo ítem.

[0:52] Otra forma de actualizar el contenido de uno de los ítems sin conocer su índice es utilizando la función findIndex. Además utilizaremos la función array.slice como función auxiliar para evitar mutar al arreglo original. FindIndex permite utilizar una función de prueba y retornará al índice el elemento que cumple con la función de prueba utilizada.

[1:11] Luego de obtener el índice, podemos crear un nuevo ítem utilizando object spread y así modificar sólo la propiedad name para luego crear un nuevo arreglo utilizando array.slice para obtener dos porciones del arreglo, una antes y otra después del índice, y nuevamente utilizando array spread crearemos un nuevo arreglo.

[1:32] En resumen, JavaScript ofrece diversas formas de actualizar un arreglo de objetos, algunos métodos mutables y otros inmutables.

https://app.egghead.io/api/v1/lessons/javascript-3-formas-de-actualizar-un-arreglo-de-objetos-en-javascript/transcript

https://app.egghead.io/api/v1/lessons/javascript-como-eliminar-elementos-dentro-de-un-arreglo/subtitles

Matías Hernández: [0:00] Eliminar elementos de un arreglo es una tarea cotidiana. JavaScript permite variadas formas de lograr esta tarea. Es posible remover elementos desde el final del arreglo utilizando Array.pop o desde el principio de éste utilizando Array.shift, pero ambos son métodos mutables que modifican el arreglo original.

[0:26] También es posible utilizar el método splice que te permite remover elementos. Splice recibe como primer argumento la posición donde comenzar a modificar elementos y el segundo argumento indica el número de elementos a remover. Splice retorna arreglos con los elementos removidos, pero también muta el arreglo original.

[0:46] También es posible hacer algo un poco más complejo y remover un elemento de índice desconocido utilizando findIndex() como método auxiliar. FindIndex retorna el índice del elemento que cumple con la condición de la función utilizada como argumento. En este caso, tenemos un arreglo de objetos y utilizamos findIndex para encontrar el índice número 2, y utilizamos splice para remover ese elemento.

[1:11] Otro método que podemos utilizar es Array.slice que también es un método inmutable. Slice crea un nuevo arreglo con los elementos indicados por los parámetros. El primer parámetro indica el índice inicial y el segundo la posición final desde donde cortar el arreglo.

[1:29] Para poder remover un elemento o varios, en realidad lo que hacemos es dividir el arreglo en dos o más partes utilizando el índice del elemento que queremos remover como límites de la división y luego utilizamos el operador spread para expandir el arreglo resultante y crear un nuevo arreglo.

[1:45] Otra forma inmutable de eliminar elementos de un arreglo es utilizar Array.filter. Filter crea un array que contiene todos los elementos que pasaron la función de filtro utilizadas como argumento para filtrar. En este caso queremos eliminar todos los ítems que contienen el string "Whatever" en su nombre.

[2:03] Es posible también eliminar un elemento especifico utilizando el operador delete. Esta acción muta el arreglo original, pero no modifica el tamaño del arreglo. El objetivo de delete es más liberar memoria, que eliminar elementos.

[2:17] En resumen, JavaScript otorga diferentes maneras de eliminar un elemento desde un arreglo incluyendo métodos mutables, como pop y shift, y también algunos inmutables, como filter.

https://app.egghead.io/api/v1/lessons/javascript-como-eliminar-elementos-dentro-de-un-arreglo/transcript

https://app.egghead.io/api/v1/lessons/javascript-4-formas-de-remover-elementos-duplicados-de-un-arreglo-con-javascript/subtitles

Matías Hernández: [0:00] Eliminar duplicado con arreglo es una tarea común. Puedes utilizar el elemento Array.filter junto con Array.indexOf para crear un nuevo arreglo sin elementos duplicados. Y Array.filter crea un nuevo arreglo con los elementos que compran la condición dada. Es decir, si el elemento pasa a la condición se retorna true, indicando que este será agregado al nuevo arreglo.

[0:19] Array.indexOf retorna al primer índice del arreglo en donde se encuentre un elemento dado. En este caso, podemos identificar un duplicado cuando el índice no es igual al resultado de indexOf. Así obtenemos un nuevo arreglo que podemos ver en pantalla sin duplicados.

[0:33] Entonces bien, puedes utilizar el objeto Set. Set es una estructura de datos que almacena valores únicos. Para esto simplemente creamos una offset basada en nuestro arreglo original y después compartimos dicho Set a un arreglo nuevamente utilizando la sintaxis spread. Esto nos da como resultado un nuevo arreglo sin valores duplicados.

[0:52] El método Array.reduce también puede ser utilizado con el mismo propósito. Array.reduce ejecuta una función sobre cada elemento y retorna un valor como método del resultado. Array.reduce recibe dos parámetros, una función llamada reductora que tiene al menos dos argumentos, el acumulador y el ítem actual de la iteración, y como segundo parámetro el valor inicial, en este caso un arreglo vacío.

[1:15] Para este ejemplo, la función utilizada simplemente revisa si el ítem actual se encuentra dentro del resultado identificado por la variable acc. De no estarlo, simplemente agrega el valor al acumulador. Como resultado tenemos un nuevo arreglo sin valores duplicados.

[1:30] Array.forEach es otra forma de iterar sobre el arreglo, y como tal también permite remover duplicados, pero de una forma más imperativa. Aquí utilizamos un arreglo auxiliar para almacenar los elementos no duplicados. Y al iterar sobre el arreglo se utiliza un bloque condicional que verifica que el ítem no exista ya en el elemento de valores únicos utilizando Array.includes.

[1:50] En resumen, las opciones para eliminar duplicados son variadas, pero se sustentan en la misma premisa. El uso de iteraciones para corroborar si un elemento ya existe o no y el uso de estructura de datos más complejas como Set.

https://app.egghead.io/api/v1/lessons/javascript-4-formas-de-remover-elementos-duplicados-de-un-arreglo-con-javascript/transcript

Manipulación Eficiente de Arreglos con JavaScript

Matías Hernández

You might also like these resources:

Nuevas Características de ES2020 en JavaScript

Construye Componentes Avanzados con React Hooks y Patrones de Diseño

Course Content

You might also like these resources:

Nuevas Características de ES2020 en JavaScript

Construye Componentes Avanzados con React Hooks y Patrones de Diseño