Introducción a arrays

Clase 20 de 55 • Fundamentos de JavaScript 2018

Resumen

Los arrays son estructuras que nos permiten organizar elementos dentro de una collección. Estos elementos pueden ser números, strings, booleanos, objetos, etc.

Jose Carlo Rojas Mora

student•

Para comenzar la clase. 😃

var sacha = {
    nombre: 'Sacha',
    apellido: 'Lifszyc',
    altura: 1.72
}

var alan = {
    nombre: 'Alan',
    apellido: 'Perez',
    altura: 1.86
}

var martin = {
    nombre: 'Martin',
    apellido: 'Gomez',
    altura: 1.85
}

var dario = {
    nombre: 'Dario',
    apellido: 'Juarez',
    altura: 1.71
}

var vicky = {
    nombre: 'Vicky',
    apellido: 'Zapata',
    altura: 1.56
}

var paula = {
    nombre: 'Paula',
    apellido: 'Barros',
    altura: 1.76
}

Juan Fernando Ramírez Vélez

student•

Gracias por el aporte

Erick Lugo

student•

Excelente, gracias!

Mauricio Hernan Cabrera

student•

const array = [
  function () {
    console.log('hola')
  },
  function () {
    console.log('mundo')
  },
  function () {
    console.log('!')
  }
]

array[0]()
array[1]()
array[2]()

no sabia que se podian meter funciones en arreglos

Eduardo Hidalgo Díaz Rugama

student•

Eso te sirve en lenguajes como React o Angular para hacer manejadores de eventos. En lenguajes como C# te tiras muuuucho tiempo para aprender esto y poder usarlo. Yo lo uso bastante.

Alan Quispe

student•

wow, yo tampoco sabía

Yadiel Vélez

student•

He aquí la documentación de los arreglos en JavaScript por mozilla (La mejor documentación en mi opinión).
Arrays - Español
Arrays - English

Jorge luis castro marchan

student•

Muy buena pagina,gracias por el aporte

Yadiel Vélez

student•

No hay de que colega. ¡Éxito!

Carlos Mario

student•

José Gregorio Block

company_admin•

#Gracias

Jonathan Restan Chamorro

student•

En cada clase que voy pasando bajo a ver si logro conseguir tus apuntes, muchas gracias!!!!!

Diego A de la Cruz Rojas

student•

Tambien podriamos utilizar un foreach estilo arrowfunction con menos código y obtener el mismo resultado.

personas.forEach(persona => {
    console.log(`${persona.nombre} mide ${persona.altura}`)
});

Christian Arturo Rios Mock

student•

Gracias por el aporte :D

Juan Nahuel Rodriguez Araujo

student•

Buena esa! Ahí replique:

Johan Mosquera

student•

Otra forma de iterar los objetos es usar for of. Ésta forma es muy usada para iterar arrays de objetos

for (let persona of personas){
  console.log(`${persona.nombre} mide ${persona.altura.toFixed(2)} mts`);
}```

Christian Navarro Urra

student•

Ese es un foreach

Johan Mosquera

student•

Si, es prácticamente un foreach muy conocido en PHP. Aunque en JS hay otra función que se le pasa por parámetro la función callback. Yo no lo llamé foreach en ese caso porque JS ya tiene ese nombre asignado para la función que le comento

array.forEach(myFunctionCallback);

Sebastián Mera

student•

Les comparto mis apuntes sobre los arrays hechos en Cornell notes :D

Jefferson Andres Espejo Goez

student•

Hola. ¿tomaste esos apuntes con un iPAD, PC o celular?. Me interesa hacer unos similares

Sebastián Mera

student•

Hola! Tomo mis apuntes con Onenote de Microsoft en mi Pc, pero también puedes usar la misma aplicación en distintos dispositivos moviles. Y la plantilla es Cornell notes.

Jose L. Figueroa

student•

**Arrays ** son estructuras de datos que nos permiten agrupar datos dentro de una colección.

Para indicar que algo es un array utilizamos el símbolo "[ ]"
var personas = []

Dentro de los corchetes introducimos las variables que deseamos que contenga nuestro array, las variables pueden ser:

Números
Strings
Objetos
Funciones

Incluso podemos mezclar diferentes tipos de datos.

Si queremos acceder al 1er elemento de un array , escribimos el nombre del array seguido de los corchetes y el índice 0:

personas[0]

Si queremos acceder a los atributos de alguno de los elementos después del índice del elemento se agrega un “.” seguido del atributo:

personas[0].altura

Otra forma de acceder a los atributos es utilizando corchetes y el atributo pasarlo como un string:
personas[0].[‘altura’]

Se debe tomar en cuenta que estamos utilizando objetos, no colecciones, pero podemos acceder a los atributos.

NOTA: Los arrays como los strings tienen la propiedad length, indicándonos cuantos elementos contiene.

Benjamín Parra

student•

En la opción de personas[0].[‘altura’], no debe ir el punto entre los corchetes ya que da error.
Me pasó cuando intenté hacerlo así también, es la fuerza de la costumbre.

Jose L. Figueroa

student•

Muy cierto @Bparra jajajaja

Carlos Mario

student•

José Gregorio Block

company_admin•

#Excelente

ANGEL DAVID SULBARAN CALDERON

student•

INTRODUCCION A ARRAYS Los arrays o arreglos, nos permiten agrupar cierto tipo de datos por ejemplo, números, letras, strings, objetos o funciones, lo que sea, dentro de una colección y luego podemos realizar ciertas operaciones en una colección. En esta clase aprenderemos a crear una colección y a iterar por cada uno de los elementos que existen en esa colección Iniciamos creando varios objetos de personas.

var angel = {
    nombre: 'Angel',
    apellido: 'Sulbaran',
    altura: 1.70
}

var pepe = {
    nombre: 'Pepe',
    apellido: 'Trueno',
    altura: 1.90
}

var tom = {
    nombre: 'Tom',
    apellido: 'Holland',
    altura: 1.73
}

var marco = {
    nombre: 'Marco',
    apellido: 'Polo',
    altura: 1.75
}
var emma = {
    nombre: 'Emma',
    apellido: 'Stone',
    altura: 1.60
}

var robert = {
    nombre: 'Robert',
    apellido: 'Downey Jr.',
    altura: 1.74
}

Ahora todo esto podemos incluirlo en una variable que se llame personas, en caso de que quisiéramos guardarlas todas en una colección, pero de la siguiente manera.


var personas = [angel, pepe, tom, marco, emma, robert]

Al colocarlas dentro de los corchetes le estamos indicando que es un array, por lo que si vamos a la consola y escribimos “personas”.

Nos mostrara que tiene 7 objetos en este caso y al desplegarlo nos mostrara todos ellos.

Nota importante a tener en cuenta es que si queremos ver uno de los objetos individualmente usando el array, solo debemos tipear “personas[0]”, porque el orden de los arrays comienza desde 0. Si quisiéramos acceder a la altura o al apellido solamente, escribiríamos “personas[0].altura” lo mismo con el apellido u otros elementos de un objeto. Otra forma que tenemos de acceder a los atributos de los objetos, es con los corchetes, pero poniendo los atributos dentro de un string, de la siguiente manera personas[0][‘altura’] de las dos maneras son equivalentes, aquí podemos usar el ciclo for para recorrer el array y que nos diga la altura de cada uno de los objetos


for (var i = 0; i < personas.length; i++) {
    var persona = personas[i]
    console.log (`${persona.nombre} mide ${persona.altura}mts`)
}

Daniel Páez

student•

Aqui mi codigo

/* IDEAS CLAVES

=> propiedad length cuantos elementos tiene
=> creamos array
=> iteramos array
------------------------------*/

/*

Mis principios de programacion:
1. Un programador divide problemas grandes en problemas chiquitos
2. Cada 4 lineas de codigo comento mi codigo

//array

colección de datos

crearemos una colección
e iteraremos por cada uno de los elementos en la coleccion

*/

//Imprimiendo algo en la consola
console.log("inicializando archivo");



/*Declaración de objetos
=========================================*/

//estoy creando personas
var daniel = {
	nombre: "Daniel",
	apellido: "Páez",
	estatura: 1.73,
	ubicacion: "chile"
}

var amanda = {
	nombre: "Amanda",
	apellido: "Páez",
	estatura: 1.60,
	ubicacion: "chile"
}

var jonathan = {
	nombre: "Jonathan",
	apellido: "Páez",
	estatura: 1.70,
	ubicacion: "venezuela"
}

var betsabet = {
	nombre: "Betsabet",
	apellido: "Soto",
	estatura: 1.64,
	ubicacion: "chile"
}


/*Declaración de variables
=========================================*/
//pueden ser variables, textos, numeros, objetos, mezclas, funciones
var personas = [ daniel, amanda, jonathan, betsabet ]
var renderEstatura = document.getElementById("info-estatura");
renderEstatura.innerHTML = "";




/*Declaración de funciones
=========================================*/
function mostrarTexto(texto) {
	console.log(texto);
	renderEstatura.innerHTML =  renderEstatura.innerHTML + "<br />" + texto;
}


function mostrarEstaturaDePersonas() {

	for (var i = 0; i < personas.length; i ++) {

		var nombre = personas[i].nombre;
		var estatura = personas[i].estatura;

		texto = `${nombre} mide ${estatura.toFixed(2)} metros`;
		mostrarTexto(texto)
	}
}



/*Consola y consultas
=========================================*/
console.log(personas[0].nombre)
//ambas son equivalentes en la ejecucion
console.log(personas[0]["nombre"])	

/*Ejecución de funciones
=========================================*/
mostrarEstaturaDePersonas()

Joel Dominguez Merino

student•

Gracias por compartirnos el resumen de tu código! Saludos :D

Víctor Hugo Hernández Valencia

student•

Que pasa en memoria cuando dentro del for se crea la variable con “var”? en cada ciclo se crea un espacio en memoria diferente o se sobreescribe el existente? en ese caso es mejor declararla fuera del for o da igual?

Andrés Ramírez

student•

Se reserva un nuevo espacio en memoria. En terminos estrictamente tecnicos es mejor tener la variable fuera del for, aunque para que puedas notar una diferencia en desempeño, tendria que ser una rutina muy compleja y que se repita millones de veces.

Alejandro Giraldo Londoño

student•

RESUMEN:

Los arrays es un tipo de estructura de datos que nos permite almacenar de todo, objetos, texto, funciones y no son mutuamente excluyentes entre sí. Dejo el código de esta clase comentariado:

// Me permite agrupar objetos en una colección. Objetos, funciones, texto. Todo.




var hidrogeno ={
    //Key______________//Value 
     nombre_elemento: &quot;Hidrógeno&quot;,
     numero_atomico:1,
     configuracion_electronica: '1S-1',
     categoria: &quot;Gas&quot;,
     usos:&quot;Combustible&quot;
 }
 
 var carbono ={
     //Key______________//Value 
     nombre_elemento: &quot;Carbono&quot;,
     numero_atomico:12,
     configuracion_electronica: '4p-6',
     categoria: &quot;Sólido&quot;,
     usos:&quot;la vida misma como la conocemos.&quot;
 }

 var helio ={
    //Key______________//Value 
    nombre_elemento: &quot;Helio&quot;,
    numero_atomico:2,
    configuracion_electronica: 'NN',
    categoria: &quot;Gas noble&quot;,
    usos:&quot;El sol está hecho de helio&quot;
}

 

// Declaro el arreglo.
var elementos = [carbono,hidrogeno,helio]

// accedemos a los los elementos.

console.log(elementos[0]) // me trae todo el objeto
console.log(elementos[0].nombre_elemento) // me trae el nombre
elementos[0]['nombre_elemento']

//Para recorrer el array ciclo for.

for (var i=0; i &lt; elementos.length; i++){
    var elemento = elementos [i] // Aquí le dije que cada elemento dentro de mi array de elementos  se llamará elemento.
    console.log(`${elemento.nombre_elemento} tiene como categoría: ${elemento.categoria}`) // Aquí llamo al nombre del elemento y categorái del elemento
}

Martín David Roldán

student•

Me gusto que lo hagas con química :D

Britney Hadassa Ascencio Henriquez

student•

Buen aporte

Gilberto Riva Palacio Garcia

student•

¿Un array es una base de datos, o que diferencia tienen?

Carlos Eduardo Gomez García

teacher•

No, para nada, un array es simplemente una forma fácil de guardar datos temporales para manejarlos, una base de datos en completamente diferente, ya que ahí sí se guarda información sensible y te permite hacer varios tipos de operaciones :D

Mauro Nava

student•

Un array es un tipo de dato, independiente del lenguaje de programacion. Es usado para guardar listas de elementos de cualquier tipo, incluyendo mas arrays.

Una base de datos es una coleccion de informacion almacenada, de forma persistente. Sirve para guardar la informacion de aplicaciones o servicios web, entre muchas otras opciones. Para poder acceder a la informacion de la BD se usa un lenguaje llamado SQL, es un lenguaje de consultas. Existen muchos motores de BD como mysql, postgres, mariadb, entre muchos mas.

Enrique Garcia Stave

student•

Excelente clase, explica de una manera muy didactiva el array y una manera recursiva de recorrerlos a traves del ciclo for.

No olvidemos que** cuando recorres un ciclo for desde el 0**, tambien cuenta este mismo como parte del recorrido, es decir, por ejemplo si empiezas un ciclo for desde el 0 al 5, serán 6 veces las que se recorra el ciclo como tal. Una manera de evitar esto, es poner un -1 en el limite del ciclo. Hago una demostración con el mismo ejercicio de la clase:

var people = [sacha, alan, martin, dario, vicky, paula]

function arrayRoad(person)
{
    for(let i = 0; i <= person.length - 1; i++)
    {
        console.log(`La altura de ${person[i].nombre}  es: ${person[i].altura}`)
    }
}

Willy David Da Conceicao Lozada

student•

var sacha = {
    nombre: "Sacha",
    apellido: "Lifszyc",
    altura: 1.72
}

var alan = {
    nombre: "Alan",
    apellido: "Gomez",
    altura: 1.86
}

var martin = {
    nombre: "Martin",
    apellido: "Gomez",
    altura: 1.85
}

var dario = {
    nombre: "Dario",
    apellido: "Juarez",
    altura: 1.71
}

var vicky = {
    nombre: "Vicky",
    apellido: "Zapata",
    altura: 1.56
}

var paula = {
    nombre: "Paula",
    apellido: "Barros",
    altura: 1.76
}


// PARA ACCEDER A UN ELEMENTO DEL ARRAY | personas[indice] ejemplo persona[0] // retorna el objeto sacha
// PARA ACCEDER A UN ATRIBUTO DE UN OBJETO QUE ESTA DENTRO DEL ARRAY | personas[0].altura o personas[0]["altura"] // retorna el atributo altura de sacha

// Vamos a guardar a todas esas personas dentro de una misma coleccion
var personas = [sacha, alan, martin, dario, vicky, paula]

// recorreremos el array y imprimir la altura de cada objeto
// contador, condicion, incremento
for (var i = 0; i < personas.length; i++) { // en la condicion se lee asi: si el contador(indice) es menor que los elementos que tengo en el array
    var persona = personas[i] // guardamos a cada persona por su indice | la variable persona es el objeto
    console.log(`${persona.nombre} mide ${persona.altura}mts indice:${i}`)
}```

José Ocando

student•

hice un programa sencillo.

var x = prompt(`Para saber la edad de sus amigos por favor marque su nombre (Jose, Maria, Juan, Carlos, Pedros)`);
var persona = [5];
persona [0] ={
    name: `Jose`,
    age: 22
}
persona [1] ={
    name: `Maria`,
    age: 23
}
persona [2] ={
    name: `Juan`,
    age: 24
}
persona [3] ={
    name: `Carlos`,
    age: 28
}
persona [4] ={
    name: `Pedro`,
    age: 20
}
for(var i = 0; i < persona.length; i++){
    if(x === persona[i].name){
        console.log(`La edad de ${persona[i].name} es ${persona[i].age}`);
    } else {
        console.log(`Error: Recargue e introduzca un nombre correcto.`)
    }
}```

Raundy Ibarras

student•

Muy clara la explicación

// Introducción a arrays
// Los arrays son estructuras que nos permiten orgnizar elementos dentro de una collecion.
// Estos elementos pueden ser numeros, string, objetos ect.

// Para este ejercicio, primero definimos una serie de objetos
var raundy = {
  nombre: &quot;Raundy&quot;,
  apellido: &quot;Ibarras&quot;,
  edad: 30,
  peso: 60,
  altura: 1.7
};
var randy = {
  nombre: &quot;Randy&quot;,
  apellido: &quot;Ibarras&quot;,
  edad: 8,
  peso: 20,
  altura: 1
};

var omaira = {
  nombre: &quot;Omaira&quot;,
  apellido: &quot;Ibarras&quot;,
  edad: 50,
  peso: 50,
  altura: 1.5
};

var jorli = {
  nombre: &quot;Jorli&quot;,
  apellido: &quot;Ibarras&quot;,
  edad: 8,
  peso: 25,
  altura: 1.1
};

// Luego declaramos dentro de una variable, los elementos que que tendra el array encerrado dentro de []
var personas = [raundy, randy, omaira, jorli];

// Luego iteramos dentro de cada elemento de array con el ciclo for, la posicion dentro
// de los arrays comienza desde 0
for (var i = 0; i &lt; personas.length; i++) {
  var persona = personas[i];
  console.log(`${persona.nombre} mide ${persona.altura}mts`);
}

Maria Emilia Taborda

student•

En otra vida fui un Array... el unico tema que comprendo jajaja

Enrique Devars

teacher•

jajajajaja muy bueno 😂

Carlos Mario

student•

José Gregorio Block

company_admin•

#Nice

Introducción a arrays

Introducción al curso

¡Alto! Tenemos una nueva versión de este curso para ti

Bienvenidos al Curso de Fundamentos de JavaScript

Repositorio de este curso de fundamentos de JS

Primeros pasos en JavaScript

Variables

Variables: Strings

Variables: Números

Funciones

El alcance de las funciones

Objetos

Desestructurar objetos

Parámetros como referencia o como valor

Comparaciones en JavaScript

Estructuras de Control y Funciones

Condicionales

Funciones que retornan valores

Arrow functions

Estructuras repetitivas: for

Estructuras repetitivas: while

Estructuras repetitivas: do-while

Condicional múltiple: switch

Arrays

Introducción a arrays

Filtrar un array

Transformar un array

Reducir un array a un valor

Programación Orientada a Objetos en JavaScript

Cómo funcionan las clases en JavaScript

Modificando un prototipo

El contexto de las funciones: quién es this

La verdad oculta sobre las clases en JavaScript

Clases en JavaScript

Asincronismo

Funciones como parámetros

Cómo funciona el asincronismo en JavaScript

Cómo funciona el tiempo en JavaScript

¿Qué pasó con swapi.co?

Callbacks

Haciendo múltiples requests

Manejando el Orden y el Asincronismo en JavaScript

Manejo de errores con callbacks

Promesas

Promesas Encadenadas

Múltiples promesas en paralelo

Async-await: lo último en asincronismo

Juego de HTML

Comenzando el juego

Generando una secuencia de números

Iluminando la secuencia de colores

Obteniendo el input del usuario

Agregando la verificación del color elegido

Agregando los estados finales del juego

Conclusiones del curso

Complementos

Diferencias entre var, let y const

Memoización: ahorrando cómputo

¿Hace cuántos días naciste?

Funciones recursivas

Entiende los closures de JavaScript

Estructuras de datos inmutables

Cambiando de contexto al llamar a una función

¿Cuándo hace falta poner el punto y coma al final de la línea?