hand Inicio

SERVICIOS

Salir

nochedía

DESARROLLO WEB con
GATSBY y WORDPRESS

emoji Cursos [24]
emoji Themes Gatsby [5]
emoji Themes WordPress [2]
emoji Blog [83]
emoji Herramientas [11]

Cómo crear Arrays en JavaScript

200 palabras
1 minutos
July 4, 2020
blogjavascript

Hay varias maneras de crear arrays, todas idénticas, con la única excepció de si quieres crear arrays con todas las posiciones ya ocupadas desde el principio

Creando arrays

Crear arrays en JavaScript es sencillo

js
const miArray = []
const miArray2 = new Array() // dos formas idénticas de crear un array

Listos, ya lo tenemos

Podemos utilizar const y no let porque la variable miArray almacena la referencia del array, por lo que cuando cambiamos el contenido del array no estamos cambiando la referencia

Y si queremos crear un array de 10 elementos?

Así, no

js
// así en realidad estamos creando un array con el valor 10
const miArray = [10]
console.log(miArray) // [10]
console.log(miArray.length) // 1

Así estamos creando un array con el valor 10 en su primera y única posición

En su lugar podemos hacer esto

js
const miArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(miArray) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(miArray.length) // 10

Pero no querremos hacer esto con un array de 100, en su lugar podríamos hacer esto

js
const miArray = new Array(100)
const miArray2 = Array(100) // es lo mismo
console.log(miArray) // [undefined, undefined, undefined, undefined ...]
console.log(miArray.length) // 100

Hecho, ya tenemos un array con 100 posiciones

Y si queremos que tengan algún valor dentro?

Podríamos utilizar Array.map

js
const miArray = Array(100).map((el, i) => {
console.log(i) // no aparece por ningún lado
return i
})
console.log(miArray) // [undefined, undefined, undefined, undefined ...]
console.log(miArray.length) // 100
Ver en CodeSandBox

Pero no funciona, porque aunque el array que creamos con Array(100) tiene la propiedad length de 100, en realidad es un array vació y map no tiene nada sobre qué iterar

Otro intento con Array.fill

js
const miArray = Array(100).fill('e')
console.log(miArray) // ["e", "e", "e", "e", "e", ...]
console.log(miArray.length) // 100
Ver en CodeSandBox

Ahora sí, ya lo tenemos!

Pero cuidado, si quieres asignar un objeto estarás asignando el mismo objeto

js
const miArray = Array(100).fill({ status: 'pending' })
console.log(miArray) // [{status: "pending"}, {status: "pending"}, {status: "pending"} ...]
console.log(miArray.length) // 100
miArray[0].status = 'valid'
console.log(miArray) // [{status: "valid"}, {status: "valid"}, {status: "valid"} ...]
// han cambiado todos los estados!
Ver en CodeSandBox

Dependiendo de lo que quieras esto no es lo que buscabas

Solución?

Podríamos combinar lo que ya hemos visto

js
const miArray = Array(100)
.fill()
.map((el, i) => i)
console.log(miArray) // [0, 1, 2, 3, 4, 5, 6, 7 ...]
console.log(miArray.length) // 100
Ver en CodeSandBox

Así nos funciona, pero también podemos hacerlo con Array.from, que vendría a ser lo mismo pero escrito de forma algo distinto

js
const miArray = Array.from(Array(100), (el, i) => i)
console.log(miArray) // [0, 1, 2, 3, 4, 5, 6, 7 ...]
console.log(miArray.length) // 100
Ver en CodeSandBox

Cuál de los dos métodos es mejor?

Si voy a measurethat.net tengo lo siguiente

  • fill().map() 1400K operaciones por segundo
  • from() 300K operaciones por segundo

Es decir, mucho mejor la primera opción, que además es IMO la más legible

Pero y si asignamos un objeto? sirven las dos?

js
const miArray1 = Array(100)
.fill()
.map(() => ({ status: 'pending' }))
const miArray2 = Array.from(Array(100), () => ({ status: 'pending' }))
miArray1[0].status = 'valid'
miArray2[0].status = 'valid'
console.log(miArray1) // [{status: "valid"}, {status: "pending"}, {status: "pending"} ...]
console.log(miArray2) // [{status: "valid"}, {status: "pending"}, {status: "pending"} ...]
Ver en CodeSandBox

Sí, sirven los dos, listos!

Sólo me queda añadir una última alternativa con el operador spread

js
const miArray1 = Array(100)
.fill()
.map((el, i) => i)
const miArray2 = [...Array(100)].map((el, i) => i)
console.log(miArray1) // [0, 1, 2, 3, 4, 5, 6, 7 ...]
console.log(miArray2) // [0, 1, 2, 3, 4, 5, 6, 7 ...]
Ver en CodeSandBox

Y cuál es más rápida?

  • miArray1 1400K operaciones por segundo
  • miarray2 1800K operaciones por segundo

La opción con el spread operator es más rápida, seleccionada!

🙋‍♂️

Qué tal la entrada?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Más entradas

Privacidad
by kuworking.com
[ 2020 >> kuworking ]