{"id":194,"date":"2023-06-30T16:30:20","date_gmt":"2023-06-30T19:30:20","guid":{"rendered":"https:\/\/danielsegovia.com\/plataforma\/?p=194"},"modified":"2023-07-07T13:57:28","modified_gmt":"2023-07-07T16:57:28","slug":"09-arrays","status":"publish","type":"post","link":"https:\/\/danielsegovia.com\/plataforma\/09-arrays\/","title":{"rendered":"09 – Arrays"},"content":{"rendered":"\n

Es hora de continuar avanzando y hoy nos toca ver una estructura de datos m\u00e1s compleja, en la programaci\u00f3n, los arrays<\/strong> son una herramienta del d\u00eda a d\u00eda para almacenar y manejar datos de forma eficiente. Los arrays son una estructura de datos que nos permiten almacenar varios elementos dentro de una sola variable.
En JavaScript, los arrays se utilizan en todo tipo de aplicaciones, desde la manipulaci\u00f3n de listas de usuarios hasta el manejo de datos complejos en aplicaciones web.<\/p>\n\n\n\n

<\/div>\n\n\n\n

\u00bfQu\u00e9 es un array?<\/h2>\n\n\n\n

En programaci\u00f3n, un array es una estructura de datos que nos permite almacenar varios elementos de datos en una sola variable. Podemos pensar en un array como una lista de cosas, donde cada elemento en la lista tiene un \u00edndice que lo identifica de manera \u00fanica.<\/p>\n\n\n\n

La principal diferencia entre un array y una variable es que una variable puede contener un solo valor a la vez, mientras que un array puede contener varios valores. Por ejemplo, si queremos almacenar una lista de nombres de personas, podemos crear un array y agregar todos los nombres en \u00e9l. Si intentamos hacer esto con una variable, tendr\u00edamos que crear una variable diferente para cada nombre, lo cual ser\u00eda tedioso y poco pr\u00e1ctico.<\/p>\n\n\n\n

Adem\u00e1s, los arrays nos permiten realizar operaciones en masa en los elementos que contiene, como ordenarlos, filtrarlos, agregar nuevos elementos, eliminar elementos, y muchos otros. En el transcurso de todo el curso trabajaremos mucho con arrays y podremos realizar multiples operaciones<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Observa en el gr\u00e1fico como en la parte de la izquierda defino una variable y almaceno solamente<\/strong> el n\u00famero 71
De la parte derecha defino numeros<\/strong> y almaceno 5 valores diferentes, ya entraremos en detalle de como escribirlo, pero cada vez que veas un array en el c\u00f3digo recuerda este gr\u00e1fico porque as\u00ed es como debes visualizarlo.<\/p>\n\n\n\n

Sintaxis<\/h3>\n\n\n\n

En JavaScript, los arrays se pueden crear de varias formas. La forma m\u00e1s com\u00fan de crear un array es utilizando corchetes []<\/code> y separar con comas cada uno de los valores que deseas almacenar. Por ejemplo, para crear un array de n\u00fameros, podemos escribir lo siguiente:<\/p>\n\n\n\n

let numeros = [17, 31, 27, 45, 89];<\/code><\/pre>\n\n\n\n
Aqu\u00ed defin\u00ed un array donde almaceno 5 valores, los mismos que acabamos de ver en el gr\u00e1fico<\/p>\n\n\n\n
Acceso a la data<\/h3>\n\n\n\n
Ahora una pregunta que seguramente se nos venga a la cabeza es \u00bfc\u00f3mo acceder a cada uno de los valores?
Cada uno de los valores es llamado elemento y a cada elemento JavaScript autom\u00e1ticamente le asigna un \u00edndice, comienza desde el 0 y va incrementando en uno para cada elemento.
Por ejemplo, el valor del \u00edndice 0 del array es n\u00fameros es 17 y del \u00edndice 3 es 45
Ahora veamos en un ejemplo como trabajar con estos \u00edndices<\/p>\n\n\n\n
let numeros = [17, 31, 27, 45, 89];\nconsole.log(numeros[0]) \/\/imprime 17\nconsole.log(numeros[4]) \/\/imprime 89<\/code><\/pre>\n\n\n\n
Agregar valores<\/h3>\n\n\n\n
Es posible agregar valores a un array a trav\u00e9s del m\u00e9todo push, para hacerlo solamente hay que hacer nombre del array punto push y entre parentesis agregar el valor que queremos introducir al array.
Es importante destacar que cuando a\u00f1adimos un elemento ser agregar\u00e1 \u00faltimo en el array<\/p>\n\n\n\n
\"\"<\/figure>
\n
let nombres = [\"Mar\u00eda\", \"Juan\"]\nconsole.log(nombres) \/\/imprimo todos los nombres\nnombres.push(\"Estefan\u00eda\")\nconsole.log(nombres) \/\/imprimo todos los nombres<\/code><\/pre>\n<\/div><\/div>\n\n\n\n
<\/p>\n\n\n\n
Largo del array<\/h3>\n\n\n\n
JavaScript nos provee una propiedad que nos indica la cantidad de elementos que tiene un array, esto es algo realmente muy \u00fatil para trabajar.<\/p>\n\n\n\n
\"\"<\/figure>
\n
let nombres = [\"Mar\u00eda\", \"Juan\", \"Estefan\u00eda\"]\nfor(i =0; i<3; i++){\n    console.log(nombres[i])\n}<\/code><\/pre>\n<\/div><\/div>\n\n\n\n
<\/p>\n\n\n\n
Observa que mediante un ciclo for voy recorriendo cada uno de los elementos del array, es decir, la variable i<\/strong> en la primera vuelta del ciclo vale 0 y cuando imprimo el valor del ciclo hago nombres[i]<\/strong> es decir, para la primera vuelta ser\u00eda nombres[0].
Por cada vuelta del ciclo la variable se va incrementado de a uno en uno, es decir, nombres[0], nombres[1] y nombres[2] por eso raz\u00f3n mi c\u00f3digo imprime todos los nombres.
En este caso controlamos el largo del array, sabemos que hemos escrito en el c\u00f3digo 3 nombres, pero muchos veces ocurre que el array se va rellenando con datos externos y se inicializa trayendo datos de otro lugar, en esos casos no se cuantos elementos hay en el array, entonces al intentar ciclaros no sabr\u00eda que condici\u00f3n poner dentro del ciclo para que se detenga cuando no hay m\u00e1s.<\/p>\n\n\n\n
Para todos los array JavaScript tiene la propiedad length que nos dar\u00e1 un entero de la cantidad de elementos que tiene el array, observa el siguiente ejemplo y te quedar\u00e1 claro.<\/p>\n\n\n\n
\"\"<\/figure>
\n
let planetas = [\"Tierra\", \"Marte\", \"Jupiter\"]\nplanetas.push(\"Pluton\") \/\/a\u00f1ado un planeta m\u00e1s\n\nconsole.log(`Mi array tiene ${planetas.length} elementos`)\nconsole.log(\"=======================================\")\n\nfor(i =0; i<planetas.length; i++){\n    console.log(planetas[i])\n}<\/code><\/pre>\n<\/div><\/div>\n\n\n\n
<\/p>\n\n\n\n
Observa como en la l\u00ednea 4 la aplicaci\u00f3n imprime que hay 4 elementos
Por \u00faltimo, observa que en la condici\u00f3n del medio en el ciclo utilizo planetas.length<\/strong> es decir, no importa cuantos elementos haya dentro del array, con el c\u00f3digo que cre\u00e9 los puedo recorrer todos.<\/p>\n\n\n\n
\u00bfQu\u00e9 puedo almacenar?<\/h3>\n\n\n\n
En los ejemplos que hemos visto hoy hemos almacenado dentro de un array n\u00fameros y strings pero es importante que sepas que puedes almacenar cualquier tipo de dato, inclusive un array dentro de un array<\/p>\n\n\n\n
let cosas = [true, false, \"hola\", 7, [\"dani\", 41, true]]\n\nconsole.log(cosas[0]); \/\/true\nconsole.log(cosas[3]); \/\/7\nconsole.log(cosas[4][0]); \/\/dani<\/code><\/pre>\n\n\n\n
Presta atenci\u00f3n al \u00faltimo console.log estoy seleccionado 2 \u00edndice [4][0]
Al seleccionar el elemento 4 me encuentro con un array por lo tanto para acceder a los valores tengo que acceder a trav\u00e9s de su \u00edndice, selecciono 0 y por esa raz\u00f3n me devuelve \u00abdani\u00bb. El siguiente ejemplo te ayudar\u00e1 a clarificarlo<\/p>\n\n\n\n
let cosas = [true, false, \"hola\", 7, [\"dani\", 41, true]]\nlet nuevo_array = cosas[4]\n\nconsole.log(nuevo_array[0]); \/\/dani\nconsole.log(cosas[4][0]); \/\/dani<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Mini desaf\u00edo<\/h3>\n\n\n\n
Crea un array con 10 elementos num\u00e9ricos y sobre ese array dime cual es el valor m\u00e1s alto
Nota: No busques en internet la soluci\u00f3n, aprovecha el ejercicio para ejercitar tu l\u00f3gica, con un array, una variable y un ciclo for lo puedes resolver.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Reviv\u00ed la clase en vivo<\/h2>\n\n\n\n
\n