Array de Java. Parte 6 del curso de JavaScript de Principiante a Avanzado en 10 publicaciones de blog.

Esta es la parte 6 de la serie de publicaciones del blog sobre JavaScript que te llevará de principiante a avanzado. Al final de esta serie, conocerás todos los conceptos básicos que necesitas saber para comenzar a programar en JavaScript. Sin más preámbulos, comencemos con el sexto tutorial.

Arreglo de Java – índice:

1. Arreglos – información básica
2. Agregar elementos a un arreglo de Java
3. Eliminar elementos de un arreglo
4. Encontrar la longitud en arreglos
5. Ordenar arreglos
6. Invertir elementos en arreglos
7. Para cada uno
8. Incluye en arreglos

Este tutorial asume que ya tienes un entorno de codificación configurado. Si has estado siguiendo los tutoriales anteriores, ya deberías tenerlo abierto. Si por alguna razón has cerrado tu configuración, puedes encontrar las instrucciones completas de configuración en la Parte 4 de esta serie. En ese tutorial, explicamos cómo configurar tu entorno de Snippets de Google Chrome para codificar.

Si te sientes algo cómodo usando Google Chrome, aquí hay una forma rápida de configurarte para este tutorial; de lo contrario, puedes consultar la Parte 4 para el conjunto completo de instrucciones paso a paso sobre cómo configurar tu entorno de codificación.

Si estás en una Mac, el atajo de teclado para abrir la consola es presionar “Opción + Comando + J”, después de abrir Chrome. Si estás usando un dispositivo Windows, puedes usar el atajo de teclado “Control + Shift + J” para abrir la Consola de JavaScript, una vez que abras Chrome. O también puedes ir al menú en la parte superior y seleccionar Ver -> Desarrollador -> Consola de JavaScript. Una vez que abras la consola, puedes hacer clic en la pestaña “Fuentes”, que está justo al lado de “Consola”. Ahora deberías ver Snippets. Puedes continuar codificando en un snippet que ya comenzaste a usar antes, o puedes crear un nuevo Snippet haciendo clic en el botón “+ Nuevo snippet”. Mientras tengas un entorno de codificación configurado para este tutorial donde puedas practicar, estás listo para comenzar.

Arreglo de Java – información básica

Los arreglos se utilizan mucho en muchos lenguajes de programación y JavaScript no es una excepción. Y es por una buena razón. Pero podrías estar preguntándote, ¿qué es un arreglo para empezar? Los arreglos son esencialmente una colección de datos relacionados que se pueden acceder y manipular con ciertos métodos definidos. Veamos algunos ejemplos de un arreglo para tener una comprensión más completa.

const numbersUntilTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const testAnswers = [true, true, false, false, true];
const pets = ["perros", "gatos", "aves", "peces"];

Podemos usar un arreglo de Java para almacenar diferentes tipos de datos. Por ejemplo, en el código anterior hemos almacenado algunos números, booleanos, así como el tipo de dato cadena.

Podemos crear un arreglo de Java de la misma manera que creamos otras variables, con las palabras clave const o let en el lado izquierdo y el contenido de los arreglos en el lado derecho de las ecuaciones. Una cosa a la que debes prestar atención es que cuando estamos creando arreglos, usamos corchetes cuadrados para rodear los elementos, tal como lo hicimos en el código anterior. También separamos cada elemento con una coma en el medio, independientemente de su tipo de dato.

En este tutorial, escribiremos el código de tal manera que puedas copiar y pegar todo en este tutorial, secuencialmente, o escribir todo en un snippet de JavaScript en Chrome, y funcionará como se espera siempre que sigas el orden. Por ejemplo, lo que esto significa para ti es que, si estamos definiendo una variable con la palabra clave const una vez en el tutorial, normalmente no puedes definir otra variable con el mismo nombre exacto nuevamente. Por eso, si vas a copiar y pegar parcialmente parte del código, es una buena idea asegurarte de que también defines esas variables en tu código. Esto no debería ser un problema si estás siguiendo el tutorial en el orden en que se presenta.

Una de las primeras cosas que debes saber sobre un arreglo de Java es que, una vez que creas un arreglo, necesitas acceder a sus elementos. Los arreglos tienen algo llamado “índices numerados”, y lo que esto significa para ti en la práctica es que cada elemento que creas en JavaScript tiene un número asociado de izquierda a derecha, desde cero hasta la longitud del arreglo de Java menos uno.

Por ejemplo, en el código anterior para mascotas, podemos acceder al primer elemento de “perros” escribiendo el nombre de la variable, abriendo corchetes cuadrados, poniendo el índice del elemento que queremos acceder y cerrando el paréntesis cuadrado:

alert(pets[0]);

De manera similar, poner números más altos mostrará otros elementos en el cuadro de alerta que estamos mostrando.

alert(pets[1]);
alert(pets[2]);
alert(pets[3]);

Dado que teníamos 4 elementos en el arreglo de mascotas, y comenzamos los índices desde 0, el último elemento en el arreglo se accede con pets[3], que es 1 menos que la longitud total del arreglo. En este punto, podrías estar preguntándote, ahora que podemos crear un arreglo y acceder a un elemento de ese arreglo, ¿qué hay de hacer modificaciones a ese arreglo? ¿Qué tal agregar nuevos elementos, cambiar elementos existentes o eliminar elementos? Bueno, tomémoslo paso a paso y comencemos con agregar nuevos elementos a un arreglo.

Agregar elementos a un arreglo de Java

Hay múltiples formas en las que podemos agregar diferentes elementos a un arreglo. Si sabemos que queremos agregar el nuevo elemento al final del arreglo, entonces podemos usar el método “push”. Esto también se llama empujar un nuevo elemento al arreglo. Ten en cuenta que el elemento empujado irá al final del arreglo. Por ejemplo:

pets.push("serpientes");
// verifiquemos que tenemos serpientes como el último elemento
// mostrando el contenido del arreglo
alert(pets);

Si sabemos que queremos agregar un elemento al arreglo de Java como el primer elemento, podemos usar la palabra clave “unshift”. Veamos eso con un ejemplo:

// ejecutar este código desplazará todos los valores
// a un lado y agregará el primer animal de dragón
pets.unshift(“dragones”); 
// verifiquemos esto mostrando el contenido del arreglo
alert(pets);

Es genial que podamos agregar elementos al final del arreglo o al principio del arreglo, pero ¿qué pasa si por alguna razón quiero inyectar elementos al arreglo en posiciones específicas? Digamos que quiero agregar tortugas en la tercera posición. ¿Es eso posible? Sí, lo es. Para inyectar un elemento en un arreglo, podemos definirlo de la misma manera que creamos esa parte del arreglo y asignar un valor a la parte específica del arreglo. Además, no olvides usar los valores de índice al insertar valores. Desde un punto de vista práctico, se ve así:

pets[2] = "tortugas";
// verifiquemos que tenemos tortugas como el tercer elemento
// mostrando el contenido del arreglo
alert(pets);

Eliminar elementos de un arreglo

En este punto, podrías estar preguntándote, ¿qué hay de eliminar elementos de un arreglo? Bueno, hay múltiples formas para eso también. Probablemente la más famosa es usar el método “pop”. Esto, de alguna manera, eliminará tu último elemento de un arreglo. // esto eliminará el último elemento en el arreglo pets.pop(); // verifiquemos los resultados mostrando el contenido del arreglo alert(pets);

Como puedes ver, con el método pop, hemos eliminado el último elemento de mascota, que es serpientes, de nuestro arreglo de mascotas.

Otra forma en la que puedes eliminar elementos de un arreglo de Java es usar la palabra clave “shift”. Cuando usamos shift, se eliminará el primer elemento y el resto de los valores de índice se adaptarán a ellos. Por ejemplo:

// esto eliminará el primer elemento
// y desplazará los otros elementos a sus nuevos valores de índice
// que serán uno menos que los valores de índice anteriores
pets.shift();
// también verifiquemos esto mostrando el arreglo
alert(pets);

El nombre “shift” proviene en realidad de cómo funciona la asignación de memoria en la memoria de la computadora. Así que si al principio parece relativamente poco intuitivo, está perfectamente bien también. Por ahora, debes saber que, usando el método shift, podemos eliminar el primer elemento de un arreglo.

Encontrar la longitud en arreglos

Cuando tratamos con arreglos en la vida real, puede haber muchas ocasiones en las que queramos contar el número de elementos en un arreglo. Esto puede ser necesario en una variedad de lugares, incluyendo listas de tareas, listas de participantes en la escuela o el trabajo, y así sucesivamente. Para lograr esto, tenemos una propiedad de arreglo incorporada llamada “length” y nos dirá la longitud total del arreglo. Por ejemplo:

alert(pets.length);

Ordenar arreglos

Ordenar arreglos es una operación bastante común en JavaScript. Hay diferentes implementaciones específicas para ordenar elementos en JavaScript. Estas implementaciones específicas, en general, se llaman algoritmos de ordenamiento. Diferentes algoritmos de ordenamiento pueden traer diferentes ventajas y desventajas. Por ejemplo, un algoritmo de ordenamiento podría ser elegido sobre otro porque es simplemente mucho más fácil de implementar en código, en comparación con otro, aunque puedan mostrar un rendimiento ligeramente mejor. Puede que hayas oído hablar de diferentes algoritmos de ordenamiento para un rendimiento optimizado. En este tutorial, utilizaremos el método de ordenamiento incorporado proporcionado por JavaScript. Ordenar es un problema bastante común, especialmente en el desarrollo web. Por ejemplo, si estás construyendo un sitio web de comercio electrónico, necesitas implementar diferentes situaciones de ordenamiento para que el usuario elija. Aunque no hay reglas estrictas sobre qué opciones y capacidades debes proporcionar a tu audiencia, hay estándares bastante comunes que se esperan de ti como creador de sitios web. Por ejemplo, como usuario, hay una alta probabilidad de que desees listar algunos artículos de la tienda tanto en precio ascendente como en precio descendente. Al implementar el ordenamiento para esas tareas, debes tener en cuenta cómo implementarlo dado que el usuario también puede limitar los resultados de búsqueda a ciertas otras categorías, como camisetas, gorras, bolsas, etc. Podemos ordenar un arreglo agregando “.sort()” al final de él.

pets.sort();
alert(pets);

Invertir elementos en arreglos

Invertir un arreglo es probablemente más común combinarlo con el ordenamiento. En este caso, como también estamos ejecutando estos códigos de arriba hacia abajo, también estamos aplicando la inversión después de ordenar el arreglo. Podemos invertir un arreglo agregando “.reverse()” al final de él. pets.reverse(); alert(pets);

Debido a que hemos ordenado el arreglo en el paso anterior, puedes ver que ahora tenemos un arreglo que está tanto ordenado como invertido.

Para cada uno

Cuando trabajamos con arreglos, JavaScript nos proporciona una forma conveniente de recorrer los elementos del arreglo con “.forEach()”. Si realmente queremos, aún podemos usar un bucle for regular para recorrer un arreglo. De hecho, primero veamos cómo construir un bucle for para recorrer un arreglo, luego veremos cómo usar forEach().

// esto nos alertará 4 veces para alimentar a nuestra mascota
for (let a = 0; a < pets.length; a++) {
    alert("Es hora de alimentar a mi mascota");
}

También podemos lograr el mismo resultado usando forEach.

pets.forEach(alert("Es hora de alimentar a mi mascota"));

Cuando comparamos el uso de bucles for o For each, dependiendo de tus preferencias y tu situación específica, puedes preferir usar uno de ellos sobre el otro. En esencia, ambos logran las mismas salidas con diferentes estilos en el código. ForEach puede ser relativamente más fácil y ahorrarte una línea de código para leer y escribir, pero al final será tu elección. No tienes que tomar tal decisión ahora y apegarte a ella tampoco. A medida que escribes código, puedes experimentar resolviendo el mismo problema usando diferentes enfoques mientras avanzas en tu viaje de programación.

Incluye en arreglos

También podemos verificar si un elemento existe dentro de un arreglo de Java. Un ejemplo de un uso real de este método sería si un evento privado incluye el nombre de una persona en la lista de invitados. La implementación real también es bastante directa. Primero escribimos el nombre del arreglo, en este caso estamos trabajando con el arreglo de mascotas. Luego ponemos un punto, para acceder a diferentes propiedades y métodos del arreglo, luego escribimos “includes”, luego abrimos y cerramos paréntesis, y escribimos el nombre del elemento que queremos verificar dentro. Aquí hay un ejemplo que verifica un elemento que sabemos que existe en el arreglo:

alert(pets.includes("perros"));

Si también intentamos lo mismo con un elemento que sabemos que no existe en el arreglo de Java, esperamos recibir falso como respuesta. Veamos también ese caso con un ejemplo:

alert(pets.includes("cachorro")); [/code>

Dado que no teníamos ningún cachorro en el arreglo de mascotas, obtenemos falso como esperábamos. En el próximo tutorial veremos otro concepto importante tanto en el mundo de la programación como en JavaScript.