🖖 Inicio

SERVICIOS

Salir

nochedía

Cómo crear Arrays en JavaScript

200 palabras
1 minutos
February 13, 2020
blogjavascript

Hay varias maneras de crear arrays, todas idénticas, excepto si quieres crear arrays con todas las posiciones ya ocupadas de inicio

Creando arrays

Crear arrays en JavaScript es sencillo

js
const miArray = []

Listos

Y si queremos crear un array de 10 elementos?

Así, no

js
const miArray = [10]
console.log(miArray) // [10]
console.log(miArray.length) // 1

Y es que sí estamos creando un array con el valor 10 en la 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

Así sí

Pero y si tenemos que crear un array de 100?

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

Hecho

Por cierto, no necesitamos la palabra new, es opcional

Y si queremos que tengan algún valor dentro?

js
const miArray = Array(100).map((el, i) => i)
console.log(miArray) // [undefined, undefined, undefined, undefined ...]
console.log(miArray.length) // 100

No funciona, y esto es porque aunque miArray tenga la propiedad .length bien definida, en realidad está vacío y .map() no recorre ningún elemento

Otro intento

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

Ahora sí

Pero ojo, si quieres asignar un valor que sea un objeto, fíjate bien

js
const miArray = Array(100).fill({ nombre: 'kuworking' })
console.log(miArray) // [{nombre: "kuworking"}, {nombre: "kuworking"}, {nombre: "kuworking"} ...]
console.log(miArray.length) // 100
miArray[0].nombre = 'eustakio'
console.log(miArray) // [{nombre: "eustakio"}, {nombre: "eustakio"}, {nombre: "eustakio"} ...]

No funciona

O en otras palabras, el objeto es el mismo para todos los elementos del Array

Si quiero cambiar un valor, no puedo, los estoy cambiando todos

Y entonces, cómo lo hago para poner objetos distintos?

js
const miArray = Array.from(Array(100))
console.log(miArray) // [undefined, undefined, undefined, undefined ...]
console.log(miArray.length) // 100

Y ahora para añadir un valor

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

Y con un objeto, que ésta vez sí será distinto

js
const miArray = Array.from(Array(100), () => ({ nombre: 'kuworking' }))
console.log(miArray) // [{nombre: "kuworking"}, {nombre: "kuworking"}, {nombre: "kuworking"} ...]
console.log(miArray.length) // 100
miArray[0].nombre = 'eustakio'
console.log(miArray) // [{nombre: "eustakio"}, {nombre: "kuworking"}, {nombre: "kuworking"} ...]

Ahora sí funciona, listos!

Ah, y tenemos una alternativa

Recuerdas este código de antes, que no funcionaba?

js
const miArray = Array(100).map((el, i) => i)
console.log(miArray) // [undefined, undefined, undefined, undefined ...]
console.log(miArray.length) // 100

Pues prueba con el operador spread

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

Con el spread conseguimos un array que podemos recorrer con .map(), por lo que también funciona 🤠

Listos!

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 🙏

Newsletter de kuworking, un correo de tanto en cuanto

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]