• 10 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 6/12/20

Arrays

Log in or subscribe for free to enjoy all this course has to offer!

 

En este capítulo introduciremos un nuevo concepto, el array o lista. Un array es similar a una variable en que puede guardar información de cualquier tipo de dato. Sin embargo, mientras que una variable sólo puede almacenar un valor, un array puede almacenar más de un valor al mismo tiempo. Un array es un tipo de dato que permite guardar un conjunto de elementos.

Una variable puede guardar un determinado valor, por ejemplo, podemos crear una variable y asignarle el valor 3.  Más adelante, podemos cambiar el valor de la variable a 10, como vemos a continuación.

// Declaro e inicio la variable con el valor 3
var myVariable = 3;
// Actualizo el valor de la variable a 10
myVariable = 10;

Sin embargo, cuando asignamos el valor 10 a la variable, el primer valor se pierde. La variable  myVariable contiene sólo el valor 10. Si necesitases guardar ambos valores, podrías utilizar un array.

 

Arrays en JavaScript

En JavaScript un array es un objeto que dispone de ciertas propiedades particulares. El prototipo de un array cuenta con un montón de métodos a que podemos utilizar, como vas a ver a continuación.

Crear un array

 La sintaxis para crear arrays en JavaScript es la siguiente:

var listaCompra = ["2 kg de patatas", "12 huevos", "cebollas", "yogures"];

Declaramos un arraylistaCompra envolviendo entre corchetes los valores que quieras guardar, separados por coma.  

En JavaScript también podemos guardar diferentes tipos de datos en el mismo array, por ejemplo:

var infoCiudad = ["Cádiz", 3121, true];

Ya que un array puede contener diferentes elementos, una buena práctica consiste en darle un nombre que represente bien los elementos que contendrá.

Obtener la longitud de un array

La longitud mide el número de elementos que contiene un array. Para obtener la longitud de un array (el número de elementos que lo componen), disponemos de la propiedad length.

var peliculas = ["El nombre de la rosa", "La vida es bella", "Volver"];
var libros = [];

console.log(peliculas.length); // Muestra 3
console.log(libros.length); // Muestra 0

 Acceder a un elemento de un array

Cada elemento presente en un array se identifica por un número, que se llama índice. Podemos representar gráficamente un array como un conjunto de casillas, cada una guardando un valor específico asociada a un índice.

El acceso a un elemento se efectúa en colocando el índice entre corchetes, como en el siguiente ejemplo.

var peliculas = ["El nombre de la rosa", "La vida es bella", "Volver"];

console.log(peliculas[0]); // Muestra "El nombre de la rosa"
console.log(peliculas[1]); // Muestra "La vida es bella"
console.log(peliculas[2]); // Muestra "Volver"
console.log(peliculas[3]); // Muestra undefined, ya que el elemento no existe

Utilizar un índice inválido para acceder a un elemento del array, JavaScript retorna el valorundefined.

Recorrer un array

Existen dos soluciones para recorrer los elementos de un array uno por uno.

La primera forma ya la conoces, consiste en utilizar un bucle for. El ejemplo de abajo permite mostrar las películas presentes en un array.

var peliculas = ["El nombre de la rosa", "La vida es bella", "Volver"];

for (var i = 0; i < peliculas.length; i++) {
    console.log(peliculas[i]);
}

 El resultado es el siguiente:

El bucle for recorre el array mostrando cada elemento
El bucle for recorre el array mostrando cada elemento

 

Con el bucle for, cambiamos el índice del array de 0 hasta la longitud del array - 1, para acceder a los elementos uno por uno.

Otra solución consiste en utilizar el métodoforEach() . Este método permite aplicar una función sobre cada elemento del array. Cada elemento del array se pasa sucesivamente como parámetro de la función asociada al método forEach().

Observa a continuación el ejemplo anterior, utilizando un forEach().

var peliculas = ["El nombre de la rosa", "La vida es bella", "Volver"];

peliculas.forEach(function (pelicula) {
    console.log(pelicula);
});

 El resultado obtenido es idéntico.

 

 

Cómo añadir elementos a un array

Para añadir un elemento al array hacemos uso del métodopush() .

var peliculas = ["El nombre de la rosa", "La vida es bella", "Volver"];

peliculas.push("V de vendetta");

console.log(peliculas[3]); // Muestra "V de vendetta"

El métodopush()toma como parámetro el elemento a insertar, que se ubica en el último lugar del array.

Si quieres sustituir un elemento del array por otro, asignas el valor como con una variable, la única diferencia es que debes especificar en qué índice.

var peliculas = ["El nombre de la rosa", "La vida es bella", "Volver"];

peliculas[0] = "El padrino";

console.log(peliculas); // El primer elemento de la lista es ahora "El padrino"

Un array o lista permite almacenar todo tipo de elementos, incluidos los objetos. Imagina que quieres guardar también el año de estreno de todas las película, podrías, por ejemplo almacenar objetos literales con el título y el año.

var peliculas = [
    { titulo: "El nombre de la rosa", estreno: 1986 }, 
    { titulo: "La vida es bella", estreno: 1997 }, 
    { titulo: "Volver", estreno: 2006 }
];

 

Practica tú mismo

Muestra los número pares del siguiente array de números 

var numeros = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

 

 Hazlo utilizando tanto un bucleforcomo el métodoforEach()

 

Crea una función que sume todos los números del array

Crea una función que que acepte un array de números como parámetro y muestre el resultado de sumar todos los números.

var numeros = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

function sumarArray(array) {
  // Retorna la suma de los números presentes en el array "números"
}

console.log(sumaArray(numeros)); // Muestra por consola 78 

 

Crea una función que elimine el último elemento del array y añada otro

Crea una función que extraiga el último elemento de un array para añadir otro elegido por el usuario. Como puedes ver en el ejemplo, pasamos a la función un array, el último elemento, 5, será sustituido por la cadena "cinco".

Función que extrae el último elemento de un array y añade otro
Función que extrae el último elemento de un array y añade otro

Valor máximo

Crea una función que retorne el valor más alto presente en un array de números.

var arr = [5, 2, 19, 14, 25, 11, 2];

function hallarMaximo(array) {
  // retorna el valor máximo del array
}

console.log(hallarMaximo(arr)); // Muestra 25

 

Solución de los ejercicios

Intenta primero resolver los ejercicios propuestos por ti mismo. Si ves que te bloqueas, suele venir bien cambiar de actividad y volver a intentarlo más adelante. Si no lo consigues, puedes consultar las soluciones aquí

 

Example of certificate of achievement
Example of certificate of achievement