Scribd
Cargar
5K vistas5 páginas

Chuleta Javascript

El documento explica los arrays en JavaScript. Los arrays permiten almacenar colecciones de elementos de cualquier tipo, y se declaran usando corchetes. Se puede acceder y modificar los elementos de un array usando su índice. Los arrays tienen métodos como push(), pop(), y forEach() para añadir, eliminar y iterar sobre sus elementos.

Cargado por

Iván Adolfo Calderón
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como ODT, PDF, TXT o lee en línea desde Scribd
5K vistas5 páginas

Chuleta Javascript

El documento explica los arrays en JavaScript. Los arrays permiten almacenar colecciones de elementos de cualquier tipo, y se declaran usando corchetes. Se puede acceder y modificar los elementos de un array usando su índice. Los arrays tienen métodos como push(), pop(), y forEach() para añadir, eliminar y iterar sobre sus elementos.

Cargado por

Iván Adolfo Calderón
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como ODT, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 5

Arrays: colecciones de elementos

Hasta ahora hemos visto algunos tipos de datos. Cadenas de texto, números, booleanos... Pero... ¿Qué
pasa si queremos tener una colección de ellos? En JavaScript tenemos los arrays.

Declaración y asignación de arrays


Para declarar un array usamos los corchetes [] y dentro los elementos de la colección separados por
comas ,.

Por ejemplo, para crear una colección de números del 1 al 5:

[1, 2, 3, 4, 5]
Los elementos de un array pueden ser de cualquier tipo, incluso otros arrays.

[1, 2, 3, 4, [5, 6, 7, 8, 9]]


Y, aunque no siempre sea recomendable, puedes mezclar tipos de datos dentro:

['uno', 2, true, null, undefined]


Para asignar un array a una variable, lo hacemos igual que con los otros tipos de datos:

const numbers = [1, 2, 3, 4, 5]


let names = ['Dani', 'Miguel', 'Maria']
Acceso a los elementos de un array
Para acceder a los elementos de un array usamos los corchetes [] y dentro el índice del elemento que
queremos acceder. Los índices empiezan en 0.

const numbers = [1, 2, 3, 4, 5]

console.log(numbers[0]) // 1
console.log(numbers[2]) // 3
El índice es la posición del elemento dentro del array. El primer elemento tiene índice 0, el segundo
índice 1, el tercero índice 2...

Si intentamos acceder a un elemento que no existe, nos devolverá undefined.

const numbers = [1, 2, 3, 4, 5]

console.log(numbers[10]) // undefined
Puedes usar variables para acceder a los elementos de un array.

const numbers = [1, 2, 3, 4, 5]


let index = 2

console.log(numbers[index]) // 3
Modificar elementos de un array
Igual que podemos acceder a los elementos de un array, podemos modificarlos.

const numbers = [1, 2, 3, 4, 5]


numbers[0] = 10
numbers[2] = 30

console.log(numbers) // [10, 2, 30, 4, 5]

Métodos y propiedades de Array

Los arrays de JavaScript tienen una serie de métodos y propiedades que nos permiten trabajar con ellos
de forma sencilla.

Un método es una función que se ejecuta sobre un objeto. Una propiedad es una variable que pertenece
a un objeto. En este caso, el objeto es un array.

La longitud de un array
Puedes conocer la longitud de una colección de elementos usando la propiedad .length:

const frutas = ["manzana", "pera", "plátano", "fresa"]


console.log(frutas.length) // 4
También puedes cortar su longitud asignando un nuevo valor a la propiedad .length:

const frutas = ["manzana", "pera", "plátano", "fresa"]


frutas.length = 2

console.log(frutas) // ["manzana", "pera"]


console.log(frutas.length) // 2
Métodos de arrays
Cuando trabajamos con colecciones de elementos, vamos a querer hacer cosas con ellos. Por ejemplo:
añadir un elemento, eliminarlo, buscarlo, etc. Para ello, los arrays tienen una serie de métodos que nos
permiten hacer estas operaciones:

.push()
El método .push() nos permite añadir un elemento al final de un array:

const frutas = ["plátano", "fresa"]


frutas.push("naranja")
console.log(frutas) // ["plátano", "fresa", "naranja"]
Además, el método .push() devuelve la nueva longitud del array:

const frutas = ["plátano", "fresa"]


console.log(frutas.length) // 2

const newLength = frutas.push("naranja")


console.log(newLength) // 3
console.log(frutas) // ["plátano", "fresa", "naranja"]
.pop()
El método .pop() elimina y devuelve el último elemento de un array:

const frutas = ["plátano", "fresa", "naranja"]


const ultimaFruta = frutas.pop()
console.log(frutas) // ["plátano", "fresa"]
console.log(ultimaFruta) // "naranja"
.shift()
El método .shift() elimina y devuelve el primer elemento de un array. Es lo mismo que .pop(), pero con
el primer elemento en lugar del último:

const frutas = ["plátano", "fresa", "naranja"]


const primeraFruta = frutas.shift()

console.log(frutas) // ["fresa", "naranja"]


console.log(primeraFruta) // "plátano"
.unshift()
El método .unshift() añade un elemento al principio de un array. Es lo mismo que .push(), pero con el
primer elemento en lugar del último:

const frutas = ["plátano", "fresa", "naranja"]


frutas.unshift("manzana")

console.log(frutas) // ["manzana", "plátano", "fresa", "naranja"]


Concatenar arrays

Podemos concatenar dos arrays usando el método concat().

const numbers = [1, 2, 3]


const numbers2 = [4, 5]

const allNumbers = numbers.concat(numbers2)

console.log(allNumbers) // [1, 2, 3, 4, 5]
Otra forma de concatenar arrays es usando el operador ... (spread operator). Este operador propaga los
elementos de un array. Así que podríamos hacer lo siguiente:

const numbers = [1, 2, 3]


const numbers2 = [4, 5]

// 1, 2, 3 4, 5
const allNumbers = [...numbers, ...numbers2]

console.log(allNumbers) // [1, 2, 3, 4, 5]
Más adelante hablaremos más de este operador y sus diferentes utilidades.

Iteración de Arrays en JavaScript

Ya hemos visto en clases anteriores cómo podemos crear bucles con for y while. Con estas estructuras
de control, y una nueva que veremos en este clase, podemos también recorrer cada uno de los
elementos de un array.
Además, veremos como los propios arrays tienen un método .forEach que nos permite ejecutar una
función para cada uno de los elementos del array.

Bucle while
El bucle while vimos que permitía ejecutar un bloque de código mientras una condición era verdadera.
En el caso de la iteración de arrays, la condición generalmente se basa en el índice del elemento.

Podemos, por ejemplo, crear una variable con let para guardar un puntero al índice del elemento que
estamos iterando. En cada iteración, podemos incrementar el valor de la variable en 1, para que en la
siguiente iteración se imprima el siguiente elemento.

let frutas = ['🍎', '🍌', '🍓']


let i = 0 // lo usaremos como índice

while (i < frutas.length) {


console.log(frutas[i]) // imprime el elemento en la posición i
i++ // incrementamos el índice en 1 para la siguiente iteración
}
Bucle for
El bucle for nos permitía ejecutar un bloque de código un número determinado de veces. En el caso de
la iteración de arrays, podemos usarlo para recorrer cada uno de los elementos del array, usando la
longitud del array como condición.

let frutas = ['🍎', '🍌', '🍓']

for (let i = 0; i < frutas.length; i++) {


console.log(frutas[i]) // imprime el elemento en la posición i
}
También podrías recorrer el array en orden inverso, empezando desde el último elemento hasta el
primero, usando i-- en lugar de i++.

let frutas = ['🍎', '🍌', '🍓']

for (let i = frutas.length - 1; i >= 0; i--) {


console.log(frutas[i]) // imprime el elemento en la posición i
}

Bucle for...of
Además de while y for, existe otra estructura de control que nos permite iterar sobre los elementos de
un array: for...of. Esta estructura de control es más simple que for, ya que no necesitamos crear una
variable para guardar el índice del elemento que estamos iterando.

Es mucho más sencilla y fácil de entender:

let frutas = ['🍎', '🍌', '🍓']

for (let fruta of frutas) {


console.log(fruta) // imprime el elemento en la posición i
}
Como ves, hay algunas limitaciones en el uso de for...of. Por ejemplo, no podemos usarlo para recorrer
un array en orden inverso y tampoco tenemos acceso al índice del elemento que estamos iterando.

El método array.forEach()
Ya hemos visto en la clase anterior que los arrays tienen métodos que nos permiten realizar operaciones
sobre ellos, como añadir elementos o eliminarlos. Pero tiene muchos más métodos que iremos viendo
que nos ayuda a trabajar con ellos.

Uno de esos métodos es array.forEach(), que nos permite ejecutar una function para cada uno de los
elementos del array. Esta función recibe como parámetros el elemento que se está iterando en ese
momento, el índice del elemento y el propio array.

let frutas = ['🍎', '🍌', '🍓']

frutas.forEach(function (fruta, index, originalArray) {


console.log(fruta) // imprime el elemento en la posición i
})
Usando una arrow function e indicando sólo los parámetros que necesitamos de nuestra función
podemos simplificarlo aún más:

let frutas = ['🍎', '🍌', '🍓']

frutas.forEach((fruta) => {
console.log(fruta) // imprime el elemento en la posición i
})
Algo importante es que array.forEach() no devuelve nada, por lo que no podemos asignar el resultado a
una variable.

¿Cuál usar? Depende...


MÉTODO ACCESO AL ÍNDICE ACCESO AL VALOR PUEDE USAR BREAK
CONTROL MANUAL DEL ÍNDICE
for ✅ ✅ ✅ ✅
while ✅ ✅ ✅ ✅
for...of ❌ ✅ ✅ ❌
forEach ✅ ✅ ❌* ❌
Aunque técnicamente no puedes utilizar la sentencia break para salir de forEach, puedes simular esto
lanzando una excepción y capturándola en un bloque try/catch externo. Obviamente es una mala
práctica que no te recomiendo.
Cada uno de estos métodos tiene sus propios casos de uso. for y while son más generales y te permiten
controlar el índice manualmente, lo que es útil si necesitas saltar a índices específicos, cambiar el orden
de iteración o salir del bucle antes de que se complete.

for...of es más fácil de usar cuando solo necesitas los valores de un array y no te importa el índice. Es
especialmente útil también cuando estás trabajando con iterables que no son arrays, como las cadenas
de caracteres o los conjuntos (sets).

Finalmente, forEach es una forma muy eficiente y legible de iterar sobre un array si no necesitas break
y si no necesitas controlar manualmente el índice.

También podría gustarte

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy