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?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Los arrays son estructuras que nos permiten organizar elementos dentro de una collección. Estos elementos pueden ser números, strings, booleanos, objetos, etc.
Aportes 297
Preguntas 24
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}`)
});
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`);
}```
Les comparto mis apuntes sobre los arrays hechos en Cornell notes 😄
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`)
}
Aqui mi codigo
=> 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()
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?
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: "Hidrógeno",
numero_atomico:1,
configuracion_electronica: '1S-1',
categoria: "Gas",
usos:"Combustible"
}
var carbono ={
//Key______________//Value
nombre_elemento: "Carbono",
numero_atomico:12,
configuracion_electronica: '4p-6',
categoria: "Sólido",
usos:"la vida misma como la conocemos."
}
var helio ={
//Key______________//Value
nombre_elemento: "Helio",
numero_atomico:2,
configuracion_electronica: 'NN',
categoria: "Gas noble",
usos:"El sol está hecho de helio"
}
// 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 < 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
}
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}`)
}
}
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}`)
}```
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.`)
}
}```
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: "Raundy",
apellido: "Ibarras",
edad: 30,
peso: 60,
altura: 1.7
};
var randy = {
nombre: "Randy",
apellido: "Ibarras",
edad: 8,
peso: 20,
altura: 1
};
var omaira = {
nombre: "Omaira",
apellido: "Ibarras",
edad: 50,
peso: 50,
altura: 1.5
};
var jorli = {
nombre: "Jorli",
apellido: "Ibarras",
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 < personas.length; i++) {
var persona = personas[i];
console.log(`${persona.nombre} mide ${persona.altura}mts`);
}
.
En otra vida fui un Array… el unico tema que comprendo jajaja
MI RETO DE LA CLASE CON ARRAY : ‘MINI PLATZI MARKET’
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Clase 17 - Arrays</title>
</head>
<body>
<h1>Mini Platzi Market</h1>
<h2>Productos:</h2>
<p><br>1. Arroz (1Kg)</br>
<br>2. Pollo (8Kg) </br>
<br>3. Papa (500g) </br>
<br>4. Pepinillo (750g) </br>
<br>5. Carne (7Kg) </br></p>
<p>¿Que desea Comprar?</p>
<p>Opcion: <input type="text" id='Opcion'></p>
<p>Unidades: <input type="text" id='Unidades'></p>
<p>Nombre: <input type="text" id="nombreCliente"></p>
<input type="button" value="Reservar Compra" id='Reservar'>
<input type="button" value="Finalizar Compra" id='Finalizar'>
<p id = 'Error'></p>
<p id = 'MiniBoleta'></p>
<script src="clase17.js"></script>
</body>
</html>
// MI RETO DE LA CLASE
var Opcion = document.getElementById("Opcion")
var Unidades = document.getElementById("Unidades")
var Nombre_Cliente= document.getElementById("nombreCliente")
var Reservar = document.getElementById("Reservar")
var Finalizar = document.getElementById("Finalizar")
var Error = document.getElementById("Error")
var MiniBoleta = document.getElementById("MiniBoleta")
Reservar.addEventListener("click",reservarCompra)
Finalizar.addEventListener("click",finalizarCompra)
var Productos_De_Clientes = []
var Orden = 0
var Orden_Cliente = 1
var Total = 0
var Producto
var Precio
function reservarCompra() {
var Numero_Opcion = parseInt(Opcion.value)
var Numero_Unidades = parseInt(Unidades.value)
switch (Numero_Opcion) {
case 1:
Producto = 'Arroz'
Productos_De_Clientes[Orden] = Producto
Precio = 3.5
Total += Precio*Numero_Unidades
break
case 2:
Producto = 'Pollo'
Productos_De_Clientes[Orden] = Producto
Precio = 15
Total += Precio*Numero_Unidades
break
case 3:
Producto = 'Papa'
Productos_De_Clientes[Orden] = Producto
Precio = 2.5
Total += Precio*Numero_Unidades
break
case 4:
Producto = 'Pepinillo'
Productos_De_Clientes[Orden] = Producto
Precio = 3
Total += Precio*Numero_Unidades
break
case 5:
Producto = 'Carne'
Productos_De_Clientes[Orden] = Producto
Precio = 20
Total += Precio*Numero_Unidades
break
default:
}
Orden++
}
function finalizarCompra() {
MiniBoleta.innerHTML +=
`---------------------------------------------------- </br>
..............MINI PLATZI MARKET.............. </br>
Cliente N°${Orden_Cliente} </br>
Nombre : ${Nombre_Cliente.value.toUpperCase()} </br>`
for(var i=0;i<Orden;i++){
MiniBoleta.innerHTML += `Productos ${i+1}: ${Productos_De_Clientes[i]} </br>`
}
MiniBoleta.innerHTML +=
`Total: ${Total.toFixed(1)} </br>
.............¡Gracias por su compra!................ </br>
---------------------------------------------------` + `</br>`
Orden_Cliente++
Orden=0
Total=0
}
Les comparto una arrow function para imprimir los nombres de un arreglo.
let imprimir = () => personas.forEach(({nombre}) => {
console.log(`Nombre: ${nombre}`)
});
imprimir()
excelente clase sobre los arrays, muy importantes para la programación.
Así quedó el mio 😃
personas.forEach(({nombre, altura}) =>{
console.log(`${nombre} mide ${altura}m.`)
})```
Los arrays son objetos de tipo lista cuyo prototipo tiene métodos para realizar operaciones de recorrido y mutación.
/******Clase 17 Introducción a arrays ******/
/* Los arrays son estructuras que nos permiten organizar elementos dentro de una collección.
Estos elementos pueden ser números, strings, booleanos, objetos, etc.*/
var jose ={
nombre: 'jose',
apellido: 'calvano',
estatura: 1.70
}
var elias ={
nombre: 'elias',
apellido: 'zigaran',
estatura: 1.60
}
var juan ={
nombre: 'juan',
apellido: 'caceres',
estatura: 1.68
}
var maria ={
nombre: 'maria',
apellido: 'gomez',
estatura: 1.33
}
// definicion del ARRAY
var personas = [];
//otra forma de agregar elementos a un array es el método push
personas.push(jose);
personas.push(elias);
personas.push(juan);
personas.push(maria);
//recorrer el arreglo usando for of de ES6
for(persona of personas){
console.log(`${persona.nombre} mide ${persona.estatura} mts`)
}
Estos son mis aportes, ojalá y los compañeros que estan iniciando les sirva de algo.
var alejandro = {
nombre: 'Alejandro',
apellidos: 'González Reyes',
altura: 1.72
}
var fernanda = {
nombre: 'Fernanda',
apellidos: 'Flores Castillo',
altura: 1.50
}
var vicky = {
nombre: 'Virginia',
apellidos: 'Moreno Valle',
altura: 1.55
}
var paula = {
nombre: 'Paula',
apellidos: 'Mondragón Figueroa',
altura: 1.75
}
var daniela = {
nombre: 'Daniela',
apellidos: 'Popoca Samaniego',
altura: 1.77
}
var maria = {
nombre: 'María Daniela',
apellidos: 'Reyes Reyes',
altura: 1.47
}
var mateo = {
nombre: 'Mateo',
apellidos: 'González Villareal',
altura: 1.71
}
// Un arreglo es una estructura compleja que almacena un grupo de elementos de cualquier tipo.
// En ocasiones un arreglo es considerado como una colección de elementos. Sin embargo, las colecciones ofrecen metodos más avanzados para recorrer sus elementos o realizar acciones con ellos
var personas = [alejandro, fernanda, vicky, paula, daniela, maria, mateo]
console.log(personas)
// Los arreglos tienen un atributo length, el cuál contiene un número que representa la cantidad de elementos dentro de dicho arreglo
console.log(personas.length)
// Para acceder a un elemento del arreglo se hace mediante su indice, que representa la posición de ese elemento dentro del arreglo. En este caso, la posición inicial siempre es 0
console.log(personas[1])
// En este arreglo se almacenan objetos, por tanto, accedo al objeto que se localiza en la posición 1 (es decir el segundo elemento) y accedo con un punto a su propiedad o atributo nombre
console.log(personas[1].nombre)
// Se puede acceder a una propiedad o atributo de un objeto agrupado en un arreglo, mediante la notación de arrlegos, es decir utilizando corchetes, sin embargo, no hay que perder de vista, que se trata de un objeto no de un arreglo. (esta notación puede ser confusa)
console.log(personas[1]["altura"])
// Recorrer los elementos de un arreglo. Considerar que el primer elemento se encuentra en la posicion 0 y se debe llegar hasta el total de elementos - 1 (puesto que todo inicia en 0)
for(var i = 0; i < personas.length; i++) {
var persona = personas[i];
console.log(`${persona.nombre} ${persona.apellidos} mide ${persona.altura}cm.`)
}
// Esta es otra forma de iterar a través de los contenidos de un arreglo.
// La estructura for of considera todos los elementos dentro del arreglo y los reccorre uno a uno.
// Para ello almacena temporalmente cada elemento dentro de la variable definida...
for(var persona of personas) {
if(persona.nombre === 'Paula') {
// La sentencia continue indica que la iteración actual no debe considerarse y continuar con la siguiente
continue
}
if(persona.altura === 1.47) {
// La sentencia break termina la ejecución completa del ciclo
break
}
console.log(persona.nombre)
}
[ ] => Corchetes
{ } => Llaves
MI equipo de fútbol personalizado
Arrays
var nombreArray = [ dato, dato, dato]
Para acceder a la informacion (En particular a un dato)
nombreArray[posicion].dato
Y para mostrar todo el array
for(var i = 0; i < nombreArray.lenght; i++){
console.log(nombreArray[i])
}
muy buena clase, contento por este curso
Este profesor es casi tan bueno como Freddy y evidentenmente es mejor que Diego de Granda.
Me anime un poco a utilizar lo aprendido anteriormente.
Primero cree una variable para determinar la persona menor a 1.70Mts utilizando filter como esta en el comentario me devuelve los dos objetos luego utilice el metodo map para traer los valores de esos objetos como aparece en el comentario y por ultimo realice un loop para que se imprimiera en consola
mis apuntes:
//Arrays
var liam = {
nombre: 'Liam',
apellido: 'León',
edad: 18,
altura: 1.72
}
var clifort = {
nombre: 'Clifort',
apellido: 'Collins',
edad: 19,
altura: 1.58
}
var paula = {
nombre: 'Paula',
apellido: 'Benavides',
edad: 21,
altura: 1.72
}
var natanael = {
nombre: 'Natanael',
apellido: 'León',
edad: 18,
altura: 1.82
}
var jhonatan = {
nombre: 'Jhonatan',
apellido: 'Lizcano',
edad: 19,
altura: 1.93
}
/* así se representa un array: [] y puede contener núm, objetos, funciones, incluso mezclar cosas etc*/
var personas = [liam, paula, clifort, natanael, jhonatan]
//la forma de acceder a los arrays es mediante la variable y el número índice que inicia en 0 por ejemplo: pesonas[0]
//para acceder a sus valores: personas[0].altura lo que es equivalente a: perosas[0]['altura']
//length retorna el número de elementos en el array
for (var i= 0; i < personas.length; i++){
//voy modificando el array personas aumentando i en cada ciclo del for
var persona = personas[i]
//llamó a imprimir en cada ciclo del for el elemento en turno
console.log(`${persona.nombre} mide ${persona.altura}mts`)
}
Utilize el map y el for of para recorrer mi arreglo, espero les guste 😃
var juan = {
name: 'juan',
lastname: 'patiño',
altura: '1.70'
}
var jose = {
name: 'jose',
lastname: 'guzman',
altura: '1.20'
}
var martin = {
name: 'martin',
lastname: 'patiño',
altura: '1.70'
}
var familia = []
familia.push(juan,jose,martin)
familia.map((x) =>{
console.log(`${x.name} ${x.altura}`);
})
for (var persona of familia) {
console.log(`${persona.name} tiene una altura de ${persona.altura}`);
}
var ulises = {
nombre: 'Ulises',
apellido: 'de Itaca',
altura: 1.70,
genero: 'Masculino'
}
var hector = {
nombre: 'Hector',
apellido: 'de Troya',
altura: 1.80,
genero: 'Masculino'
}
var penelope = {
nombre: 'Penelope',
apellido: 'de Itaca',
altura: 1.90,
genero: 'Femenino'
}
var helena = {
nombre: 'Helena',
apellido: 'de Troya',
altura: 2.00,
genero: 'Femenino'
}
var personas = [ulises, hector, penelope, helena];
for (var i=0; i <personas.length; i++) {
var persona = personas[i]
console.log(`Bienvenido ${persona.nombre} ${persona.apellido} en su documento registra una altura de: ${persona.altura} y registra como ${persona.genero}`)
}```
Otra forma de hacer el ejercicio de la clase
let personas = [sacha, alan, martin, dario, vicky, paula]
personas.forEach( (persona) => {
console.log(`${persona.nombre} mide ${persona.altura}m`)
}```
para una mejor visualizacion de su array pueden utilizar en su archivo js
console.table(array)
facilita mucho el entender el resultado que estas obteniendo
Código de la clase, en mi caso utilicé un forEach()
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}
var personas = [sacha, alan, martin, dario, vicky, paula];
personas.forEach(persona => {
console.log(`${persona.nombre} mide ${persona.altura}`)
})
const personas = [sacha, alan, martin, dario, vicky, paula]
for(let i=0; i<personas.length; i++){
let persona = personas[i]
console.log(`${persona.nombre} mide ${persona.altura}`)
}
Otra forma en la que se puede recorrer el array sería así:
for (persona of personas) {
console.log(`${persona.nombre} mide ${persona.altura} `)
}
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
}
var personas = [sacha,alan,martin,dario,vicky,paula];
for(var i=0;i<personas.length;i++){
var persona=personas[i];
console.log(`${persona.nombre} miden ${persona.altura}`);
}
Otra manera de recorrer el arreglo (ES6)
var people = [sacha, alan, martin, dario, vicky, paula];
for (let person of people)
console.log(person);
Otra forma de recorrer un array es .map
personas.map((persona) => {
return console.log(`${persona.nombre} ${persona.apellido} tiene ${persona.edad} años y mide ${persona.altura}` )
})
El siguiente ejemplo es otra forma de iterar un arreglo pero con programacion funcional:
var personas = [
{ name: 'Diego', lastName: 'Gomez', age: 28 },
{ name: 'Pedro', lastName: 'Mendez', age: 17 },
{ name: 'Vicky', lastName: 'Moreno', age: 23 },
]
const printPersonAge = ({ name, age }) => console.log(`${name} tiene ${age} años de edad`)
personas.forEach(printPersonAge)
podríamos utilizar un ciclo foreach para recorrer el array. Creo que de esa forma es mas legible el código.
Como parámetro solo enviamos lo que necesitamos de nuestro objeto, osea el nombre y la edad (en mi caso lo hice con la edad en vez de altura). Espero se entienda el código.
personas.forEach(({ nombre, edad }) => {
console.log(`${nombre} tiene ${edad} años`);
});
Se utiliza los arrays para agrupar varios datos de un mismo tipos y con ellos hacer operaciones de acuerdo a nuestra necesidad.
Cuando usamos arrays y nuestra intención es realizar un ciclo con ellos, podemos usar un ciclo forEach, funciona de manera igual al for, sin embargo no tenemos que darle más datos que el array que usaremos, porque inteligentemente sabe cuantas veces repetirse hasta pasar por todos y cada uno de los integrantes del array, es decir, si el array tiene 7 índices, el foreach recorre los 7 automaticamente. Ejemplo:
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
}
var array = [sacha, alan, martin, dario, vicky, paula]
array.forEach(person => {
console.log(`La altura de ${person.nombre} es ${person.altura}`)
});
(‘person’ es un identificador que utilizamos para hace referencia al indice actual que está siendo recorrido, es decir, ‘person’ se usa para todos uno por uno mientras se ejecuta el ciclo)
Resultado en consola:
La altura de Sacha es 1.72
La altura de Alan es 1.86
La altura de Martin es 1.85
La altura de Dario es 1.71
La altura de Vicky es 1.56
La altura de Paula es 1.76
no entendí muy bien porque puso los corchetes en la parte del console .son necesarios?
// Arrays
//definir varias variables
var claudia = {
nombre: ‘Claudia’,
apellido: ‘Aparicio’,
altura: 1.70
}
var alan = {
nombre: ‘Alan’,
apellido: ‘Perez’,
altura: 1.86
}
var martin = {
nombre: ‘Martin’,
apellido: ‘Gomez’,
altura: 1.85
}
var fernando = {
nombre: ‘Fernando’,
apellido: ‘Mendoza’,
altura: 1.80
}
//agrupar a estas personas en una coleccion:
//corchetes para indicar que es un array
var personas = [claudia, alan, martin, fernando]
for (var i = 0; i < personas.length; i++) {
var persona = personas[i]
console.log(${persona.nombre} mide ${persona.altura} mts
)
}
ARRYS
Nos ayudan a almacenar múltiples elementos dentro de una sola variable
así que digamos que tenemos 4 personas con estos datos:
y queremos almacenarlos dentro de un Arry. Para ello utilizamos
Ahora necesitamos imprimir una lista con en nombre y altura de nuestras personas
y listo !
for (var i = 0; i < familia.length; i++) {
console.log(`${familia[i].nombre} mide ${familia[i].altura}m `);
}
var personas = [
{ nombre: 'Alejandro', apellido: 'Silva', altura: 1.87 },
{ nombre: 'Carlos', apellido: 'Gutiérrez', altura: 1.75 },
{ nombre: 'Carol', apellido: 'Pérez', altura: 1.64 },
{ nombre: 'Juan', apellido: 'Castro', altura: 1.70 },
{ nombre: 'Francisco', apellido: 'Rodríguez', altura: 1.72 }
];
for (var i = 0; i < personas.length; i++) {
var persona = personas[i];
console.log(
`${persona.nombre} ${persona.apellido} mide ${persona.altura}`
);
}```
Que les parece asi ?
<function personasCreador(nombre, altura, peso) {
this.nombre = nombre;
this.altura = altura;
this.peso = peso;
}
let federico = new personasCreador('federico', 1.7, 76)
let eugenia = new personasCreador('Eugenia', 1.5, 45)
let ricardito = new personasCreador('Ricardito', 1.8, 83)
var persona = [federico, eugenia, ricardito]
for (let i = 0; i < persona.length; i++) {
var personas = persona[i]
console.log(`${personas.nombre} mide ${personas.altura}`)
}>
console.log('--- INTRODUCCIÓN A LOS ARRAYS ---\n');
var marco = {
nombre : 'Marco',
apellido : 'Arellano',
edad : 34,
ocupacion : 'Ingeniero en Sistemas',
estatura : 1.80
}
var juliette = {
nombre : 'Juliette',
apellido : 'González',
edad : 5,
ocupacion : 'Estudiante',
estatura : 1.12
}
var valeria = {
nombre : 'Valeria',
apellido : 'González',
edad : 6,
ocupacion : 'Estudiante',
estatura : 1.30
}
var veronica = {
nombre : 'Verónica',
apellido : 'Pineda',
edad : 38,
ocupacion : 'Profesora',
estatura : 1.59
}
var personas = [marco, juliette, valeria, veronica]
for (index=0 ; index < personas.length; index++){
console.log(`${personas[index].nombre} mide ${personas[index].estatura.toFixed(2)}`);
Aunque no es la clase de física, dejo este hilo sobre abreviatura de unidades, metros solo se abrevia como m.
https://es.wikipedia.org/wiki/Wikiproyecto:Corrección_de_errores_menores/Unidades_y_símbolos
var ana = {
name: 'ana',
lastname: 'marino',
age: 20,
hight: 1.50
}
var mary = {
name: 'mary',
lastname: 'moon',
age: 30,
hight: 1.60
}
var karina = {
name: 'karina',
lastname: 'nena',
age: 23,
hight: 1.55
}
var laura = {
name: 'laura',
lastname: 'moreno',
age: 23,
hight: 1.65
}
var personas = [ana,mary,karina,laura];
for (var i = 0; i < personas.length; i++)
{
console.log(`${personas[i].name} tiene una altura de ${personas[i].hight.toFixed(2)} mts`);
}
El foreach funciona para recorrer un arreglo de manera sencilla
<var personas = [{nombre:'Juan',apellido:'Moyano'},
{nombre:'Luis',apellido:'Carlos'}
];
personas.forEach(element => {
console.log(`Este es ${element.nombre} ${element.apellido}`);
});>
son como listas en python
// clase 17 Introducción a arrays
/* Los arrays son estructuras que nos permiten organizar elementos dentro de una collección.
Estos elementos pueden ser números, strings, booleanos, objetos, etc.*/
var jose ={
nombre: 'jose',
apellido: 'calvano',
estatura: 1.70
}
var elias ={
nombre: 'elias',
apellido: 'zigaran',
estatura: 1.60
}
var juan ={
nombre: 'juan',
apellido: 'caceres',
estatura: 1.68
}
var maria ={
nombre: 'maria',
apellido: 'gomez',
estatura: 1.33
}
// definicion del ARRAY
var personas = [jose, elias, juan, maria]
// para acceder a los elementos de un array "personas[posicion].campo"
//Otra manera es introducir el atributo del campo en un string "personas[posicion]['campo']"
//recorrer el arreglo
for(var i=0; i < personas.length; i++){
console.log(`${personas[i].nombre} mide ${personas[i].estatura}mts`)
}```
Este es mi aporte
var carlos = {
nombre: 'carlos',
apellido: 'gutierrez',
altura: 1.88
};
var arturo = {
nombre: 'arturo',
apellido: 'gonzalez',
altura: 1.80
};
var fabiola = {
nombre: 'fabiola',
apellido: 'Vela',
altura: 1.68
};
var nayeli = {
nombre: 'nayeli',
apellido: 'gutierrez',
altura: 1.70
};
var blondie = {
nombre: 'blondie',
apellido: 'hernandez',
altura: 1.60
};
var personas = [carlos, arturo, fabiola, nayeli, blondie]
var tipoOracion = ({nombre}) => nombre.charAt(0).toUpperCase() + nombre.slice(1)
for (var i = 0; i < personas.length; i++){
var persona = personas [i]
var n = tipoOracion(personas [i])
console.log (`${n} mide ${persona.altura} mts`)
}
/*
Carlos mide 1.88 mts array.js:33:13
Arturo mide 1.8 mts array.js:33:13
Fabiola mide 1.68 mts array.js:33:13
Nayeli mide 1.7 mts array.js:33:13
Blondie mide 1.6 mts
*/
Retomando lecciones y aprendiendo mucho de este curso. Excelente.
const sacha = {
nombre: "Sacha",
apellido: "Lifszyc",
altura: 1.72
}, alan = {
nombre: "Alan",
apellido: "Gomez",
altura: 1.86
}, martin = {
nombre: "Martin",
apellido: "Gomez",
altura: 1.85
}, dario = {
nombre: "Dario",
apellido: "Juarez",
altura: 1.71
}, vicky = {
nombre: "Vicky",
apellido: "Zapata",
altura: 1.56
}, paula = {
nombre: "Paula",
apellido: "Barros",
altura: 1.76
}
const personas = [sacha, alan, martin, dario, vicky, paula]
for(let {nombre, altura} of personas){
console.log(`${nombre} mide ${altura}m`)
}
// Alan mide 1.86m
// Martin mide 1.85m
// Dario mide 1.71m
// Vicky mide 1.56m
// Paula mide 1.76m
var osvaldo = {
nombre: 'Osvldo',
apellido: 'Trejo',
altura: 1.80
}
var veronica = {
nombre: 'Veronica',
apellido: 'Trejo',
altura: 1.60
}
var sergio = {
nombre: 'Sergio',
apellido: 'Trejo',
altura: 1.80
}
var personas = [osvaldo, veronica, sergio]
for(let i of personas){
console.log(`Nombre ${i['nombre']} y Altura ${i['altura']} `)
}
for (var i = 0; i < personas.length; i++) {
var persona = personas[i]
console.log(`${persona.nombre} mide ${persona.altura} mts`)
}
un buen ejercicio el de esta clase
También sirve hacer este ciclo, es mucho mas sencillo de entender:
var personas = [diego, alan, martin, sacha, dario, paula, vicky]
for(persona of personas){
console.log(`${persona.nombre} mide ${persona.altura} metros`);
}
También existe una forma mas simplificada de recorrrer arrays con el foreach, de la siguiente forma:
personas.forEach(element => {
console.log(`Hola soy ${element.nombre} y tengo ${element.edad} años`)
});```
var vicky = {
nombre:'Vicky',
apellido:'Zapata',
altura:1.56
}
var luis = {
nombre:'Luis',
apellido:'Camarena',
altura:1.94
}
var carlos = {
nombre:'Carlos',
apellido:'Ortega',
altura:1.79
}
var personas = [vicky,luis,carlos];
for(var i=0;i<personas.length;i++){
persona = personas[i];
console.log(`${persona.nombre} mide: ${persona.altura} mts`);
}
Además de la forma del foreach también está disponoble la de la función map para recorrer todo el array:
personas.map(item => {
console.log(`Hola soy ${item.nombre} y tengo ${item.edad} años`)
})
good class.
Las matrices son objetos en forma de lista cuyo prototipo tiene métodos para realizar operaciones de desplazamiento y mutación. Ni la longitud de una matriz de JavaScript ni los tipos de sus elementos son fijos. Dado que la longitud de una matriz puede cambiar en cualquier momento, y los datos pueden almacenarse en ubicaciones no contiguas en la matriz, no se garantiza que las matrices de JavaScript sean densas; esto depende de cómo el programador elija usarlos. En general, estas son características convenientes; pero si estas características no son deseables para su uso particular, puede considerar el uso de matrices escritas.
Las matrices no pueden usar cadenas como índices de elementos (como en una matriz asociativa ) pero deben usar enteros. Establecer o acceder a través de no enteros utilizando la notación de paréntesis (o la notación de punto ) no establecerá ni recuperará un elemento de la lista de la matriz en sí, sino que establecerá o accederá a una variable asociada con la colección de propiedades de objeto de esa matriz . Las propiedades del objeto de la matriz y la lista de elementos de la matriz son independientes, y las operaciones de desplazamiento y mutación de la matriz no se pueden aplicar a estas propiedades con nombre.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
var sasha = {
nombre: 'Sasha',
apellido: 'Lifszyc',
altura: 1.56
}
var dario = {
nombre: 'Dario',
apellido: 'Susnisky',
altura: 1.78
}
var pepe = {
nombre: 'Pepe',
apellido: 'Perez',
altura: 1.45
}
var juan = {
nombre: 'Juan',
apellido: 'Gomez',
altura: 1.90
}
//Definir un array con [elemento, elemento]
var personas = [sasha, dario, pepe, juan]
for (let index = 0; index < personas.length; index++) {
const persona = personas[index];
console.log(`Persona ${ persona.nombre } mide ${ persona.altura } mts`)
}
probe diferentes maneras de mostrar los valores del arreglo aunque desconozco las diferencias entre ellas
for(var i =0; i<personas.length; i++){
var persona = personas[i]
console.log(`${persona.nombre} mide ${persona.altura} mts`)
}
for(var persona of personas){
console.log(`${persona.nombre} mide ${persona.altura} mts`)
}
personas.forEach( persona=>
console.log(`${persona.nombre} mide ${persona.altura} mts`)
)
personas.map( persona=>
console.log(`${persona.nombre} mide ${persona.altura} mts`)
)
Excelente explicación!!
Excelente clase… uno de los objetos que mas se van a usar en la carrera sin ninguna duda
Cabe mencionar que el persona[0][‘nombre’] tambien funciona sin tener un arreglo, puede ser:
objeto.atributo
o
objeto[‘atributo’]
var Steffany={
nombre:“Sttef”,
grupo:1442
}
var lili={
nombre:“Lilian”,
grupo:1443
}
var ale={
nombre:“Alejandra”,
grupo:1443
}
var arreglo=[Steffany,lili,ale];
for(i=0;i<arreglo.length;i++){
document.write(“Me llamo “+arreglo[i].nombre+”</br>”);
}
Buena introduccion
Un array parece ser un coleccionador de datos y sus tipos, puedes encontrarte de todo.
Cada elemento dentro del array tiene una posicion que estara marcado por el indice, importante saber que empieza desde cero.
Por que el Array tiene una longitud, correspondiente al numero de elementos dentro de este.
Finalmente, en el caso de tener un objeto en un Array, se puede
acceder a este por medio de indice (array[i]) y obtener su propied
ades y metodos como si de un objeto fuese (Array[i].propiedad).
Interesante: pensé en que no es bueno repetir palabras en programación, ya que esto confunde a las personas que apenas están viendo código.
Ejemplo: persona y personaS.
Seria mejor diferentes nombre y así nos queda mas claro, que va enlazado con que linea de código o a quien estamos llamando.
Siempre he tenido este punto de vista, no se ustedes.
Gracias!! muy interesante la clase.
Aqui hay 3 formas de como recorrer los arrays
for (let i =0; i < personas.length;i++ ){
var persona =personas[i]
console.log(`${persona.nombre} mide ${persona.altura}`)
}
personas.forEach(persona => {
console.log(`${persona.nombre} mide ${persona.altura}`)
});
for (person of personas){
console.log(`${person.nombre} mide ${person.altura}`)
}
Que bonito es Java Script
var johan = {
nombre: "Johan",
apellido: "Echeverri",
altura: 1.80
}
var alan = {
nombre: "Alan",
apellido: "Cabezas",
altura: 2.80
}
var martin = {
nombre: "Martin",
apellido: "Ananuco",
altura: 1.00
}
var dario = {
nombre: "Dario",
apellido: "Gomez",
altura: .50
}
var vicky = {
nombre: "Vicky",
apellido: "Davila",
altura: 1.60
}
var paula = {
nombre: "Paula",
apellido: "Londra",
altura: 1.54
}
var personas = [johan, alan, martin, dario, vicky, paula];
/* para llamar un valor de un array podemos URLSearchParams
personas[0]
llamaria el objeto completo johan ubicado en la posicion 0 del array
personas[0].altura
llamaria el valor de la key altura del objeto johan ubicado en la posicion 0 del array
personas[0]["altura"]
llamaria el valor de la key altura del objeto johan ubicado en la posicion 0 del array
personas[0].altura === personas[0]["altura"]
estas son equivalentes son formas de llamar el valor de una key de un objeto dentro de un array
*/
for (var i = 0; i < personas.length; i++) {
console.log(`${personas[i].nombre} mide ${personas[i].altura}mts`);
}
/* con ayuda de for y length determinamos el recorrido del array para acceder a los keys de cada uno de sus objeot e imprimir un mensaje con console.log */
Una pequeña variación
//objetos de personas
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
}
//arrays/arreglos/colecciones
var personas = [sacha, alan, martin, dario, vicky, paula]
//recorrer el array e imprimir la altura y guardarlas en otro array
//declaramos una array vacio
var alturas = []
//iniciamos cilo for desde 0 hasta hasta que i sea mayor a la cantidad
//de objetos que tenga el array personas
for (var i = 0; i<personas.length; i++){
//extraemos la altura de cada objeto
var resultado = personas[i].altura
//insertamos esa altura en el array alturas
alturas.push(resultado)
}
//imprimimos el array alturas
console.log(alturas)
Acceder a Arrays y Objetos
Acceso al primer elemento de un Array
personas[0]; // {nombre: "Sacha", apellido: "Lifszyc", altura: 1.72}
Acceso al nombre del primer Objeto
personas[0].nombre; // Sacha
🎁 También puedes usar la notación de corchetes para acceder a la propiedad de un objeto. Los objetos, a veces son llamados arreglos asociativo.
personas[0]['nombre']; // Sacha
<var carlos = {
nombre:'carlos',
apellido:'avanzini',
edad:35
}
var eduardo = {
nombre:'Eduardo',
apellido:'Avanzini',
edad:56
}
var norma = {
nombre:'Norma',
apellido:'Lastiri',
edad:55
}
var luis = {
nombre:'luis',
apellido:'Avanzini',
edad:25
}
var franco = {
nombre:'franco',
apellido:'Avanzini',
edad:19
}
var personas = [carlos,eduardo,norma,luis,franco]
for (let i = 0; i< personas.length; i++) {
var persona = personas[i]
console.log(`${persona.nombre} tiene ${persona.edad} años`)
}>
<var cristian = {
nombre: 'cristian',
apellido: 'fernandez',
altura: 1.82
}
var elena = {
nombre: 'elena',
apellido: 'sanchez',
altura: 1.55
}
var maria = {
nombre: 'maria',
apellido: 'martinez',
altura: 1.69
}
var claudia = {
nombre: 'claudia',
apellido: 'montes',
altura: 1.90
}
var luis = {
nombre: 'luis',
apellido: 'penagos',
altura: 1.70
}
var andrea = {
nombre: 'andrea',
apellido: 'muñoz',
altura: 1.75
}
var personas = [cristian,elena,maria,claudia,luis,andrea]
for (var i = 0; i < personas.length; i++) {
var persona = personas[i]
console.log(`${persona.nombre} mide ${persona.altura } mts`)>
var personas = [sacha, alan, martin, dario, vicky, paula]
for (var i = 0; i < personas.length; i++) {
var persona = personas[i]
console.log(`${persona.nombre} mide ${persona.altura} metros`)
}```
Con for in se puede recorrer el arreglo en menos codigo
for (const i in personas) {
console.log(`${personas[i].altura}`)
}
No me servio el for, lo compare y lo compare con el del profe pero no se que sera, solo me imprime el primero (i=0) o el que cambie por ese, he aqui el codigo
for (var i=0; i < persons.length; i++) {
var persons = persons[i]
console.log(`${persons.name} measures ${persons.height}mts`)
}
Me gustaría acotar que el ejemplo de la clase se hace mucho más simple si se usa un ciclo for each.
var personas = [sacha, alan, martin,dario,vicky,paula];
for(per in personas){
console.log(`${personas[per].nombre} mide ${personas[per].altura} `);
}
var personas = [ sacha, alan, martin, dario, vicky, paula ];
// Formas de iterar un array
// For tradicional
for ( var i = 0; i < personas.length; i++ ) {
var persona = personas[i];
console.log(`${ persona.nombre } mide ${ persona.altura }`);
}
// For of
for ( var persona of personas ) {
console.log(`${ persona.nombre } mide ${ persona.altura }`);
}
// For each
personas.forEach( (persona) => {
console.log(`${ persona.nombre } mide ${ persona.altura }`);
});
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
}
Yo cree una función constructora para agilizar el proceso 😃
function per(nombre, apellido, altura){
this.nombre = nombre
this.apellido = apellido
this.altura = altura
}
var andres = new per('Andrés', 'Pérez', 1.81)
var carlos = new per('Carlos', 'Gomez', 1.76)
var javier = new per('Javier', 'Urrego', 1.77)
var clara = new per('Clara', 'Goez', 1.65)
var marisol = new per('Marisol', 'Rodriguez', 1.67)
var heidy = new per('Heidy', 'Mejia', 1.69)
var personas = [andres, carlos, javier, clara, marisol, heidy]
Así también me funciona:
console.log(`${personas[i].nombre} mide ${personas[i].altura}mts`)
Yo lo hice con un “.forEach” y “document.write”.
let personas = [sacha, alan, martin, dario, vicky, paula]
personas.forEach((persona) => document.write(`Soy ${persona.nombre} y mido ${persona.altura} m.` + '<br>'))
Los arrays son muy útiles para guardar valores agrupados
Mas sencillo no pudo ser, toca seguir practicando.
Nada mal para reforzar los conocimientos
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?