Índice del curso de ES6

  1. Introducción al Curso de Javascript
  2. console.log
  3. Comentarios
  4. Variables
  5. Operadores
  6. Estructuras condicionales
  7. Bucle for
  8. Bucle while
  9. Break! - Gran día de repaso
  10. funciones
  11. Arrow functions
  12. Métodos para trabajo con cadenas
  13. Números aleatorios
  14. location.href
  15. Colección de ejercicios
  16. DOM
  17. Efecto Parallax
  18. innerHTML
  19. Propiedad style
  20. Cambiar atributo src
  21. Añadir clase, borrar clase, alternar clase, evaluar si tiene una clase
  22. Create Element
  23. Arrays
  24. Ejercicios avanzados
  25. LocalStorage
  26. Deconstrucción
  27. fetch
  28. Import, export
  29. Modernizr

Arrays

Declaración

<script>
const days = ["domingo", "lunes", "martes", "miercoles", "jueves", "viernes", "sabado"];
const dayNumber = new Date().getDay();
console.log("Hoy es " + days[dayNumber]);
</script>

Añadir y quitar elementos de un array

var datos = ['pera', 'manzana', 'naranja'];
console.log(datos);
datos.push('fresa'); //Añade elemento al final
console.log(datos);
datos.pop(); //Elimina el último elemento
console.log(datos)
datos.splice(1,2) //Elimina un rango de elementos
console.log(datos);	

En javascript no existen los arrays asociativos

let arrayAsociativo = [];
arrayAsociativo["one"] = "uno";
arrayAsociativo["two"] = "dos";
arrayAsociativo["three"] = "tres";

console.log(arrayAsociativo["two"]);
console.log(arrayAsociativo.length);
Los arrays asociativos no existen en Javascript

Si cambiamos la palabra "Array" por el nombre utilizado para designar a cualquier otro objeto, el código continúa funcionando. Esto es así porque realmente estamos definiendo las propiedades de un objeto. (En javascript foo["bar"] es lo mismo que foo.bar).

Recorrer los elementos del array

Con forEach

const days = ["domingo", "lunes", "martes", "miercoles", "jueves", "viernes", "sabado"];

days.forEach(value => {
	console.log("Hoy es " + value);	
})
const days = ["domingo", "lunes", "martes", "miercoles", "jueves", "viernes", "sabado"];

days.forEach( (value, key) => {
	console.log(key + ": Hoy es " + value);	
})

Con map

const days = [1, 2, 3];

const nuevoArray = days.map(value => value * 2);

console.log(nuevoArray);
Recorrer elementos de un array - ECMAScript6 usando map

Ejercicios Arrays

  1. Crea un array con cinco nombres de persona y recórrelo mostrando el texto "Conozco a alguien llamado ".
  2. Recorrer la siguiente lista con un bucle imprimiendo el doble de cada número:

    my_list = [1,9,3,8,5,7]
  3. Contar el número de elementos positivos, negativos y que valgan cero en un array de 10 enteros. Los valores habrán sido harcodeados en un array.
  4. Leer 10 enteros harcodeados en un array y mostrar la media de los valores negativos y la de los positivos.

Recorrer el DOM con forEach

document.querySelectorAll('.resaltado').forEach((obj, i) => {
	obj.style.backgroundColor = 'red';
});

Ejercicios forEach con DOM

  1. Marcar todas las respuestas correctas con el mismo class y mostrarlas en color rojo cuando pulsemos el botón de ver soluciones

  2. Entender el método closest

    <div>
    	<button>Pulsar</button>
    </div>
    obj.closest('div').style.background = 'red';
  3. Hacer un cuestionario

  4. Ejercicio presupuesto

  5. Ejercicio carta de presentación

    A continuación te facilito los textos que puedes usar. No hace falta que los uses todos; con tres de cada categoría, sirve

    Motivo

    • Cuento con varios años de experiencia muy sólida como profesional por lo cual me creo capacitad@ para asumir las responsabilidades del puesto que ustedes anuncian.
    • En relación al anuncio publicado donde solicitaban un profesional para su empresa, les presento mi candidatura.
    • El pasado día del mes corriente, se publicó una oferta de trabajo en la que se hacía constar que necesitaban cubrir un puesto de trabajo.
    • En respuesta a su anuncio aparecido en el periódico , me es grato manifestarle mi interés por el puesto .
    • Me dirijo a ustedes con el fin de ofrecerles mis servicios profesionales.
    • En relación al anuncio de referencia tengo el gusto de enviarle mi currículo ya que, como verá en el mismo, creo reunir todos los requisitos para el puesto de trabajo que quieren cubrir.
    • Me pongo en contacto con ustedes para manifestarles mi interés por el puesto de trabajo que solicitaban.
    • Me dirijo a ustedes para hacerles constar mi interés por desarrollar mi futuro profesional en su empresa.
    • Sería de mi agrado poderme integrar en aquella actividad que me permita continuar con lo ya aprendido.

    Medallas

    • Como he reseñado en el historial adjunto, aunque solo cuento años de experiencia, confío en mi afán de de superación para llegar a poseer un dominio completo de la profesión. Creo contar con las aptitudes necesarias para poder aportar beneficios muy positivos a su organización.
    • Debido a mis cualidades personales y mi experiencia, me considero capacitado para desempeñar ese trabajo.
    • Me adapto con facilidad al trabajo en equipo y baso mi actuación `profesional en una relación duradera y de confianza con la empresa.
    • El puesto que ustedes ofrecen coincide plenamente con mis objetivos profesionales y constituye para mi un reto profesional, qué trataré de llevar a cabo con todo entusiasmo, para mutuo beneficio.
    • Considero que mis características de formación y experiencia puedan corresponder con las de su anuncio y me complazco en enviarles mi CV para su consideración.
    • Por mi formación y por mi entusiasmo en desarrollar al máximo mi carrera profesional, espero ser un firme candidato para cubrir el puesto que se ofrece.
    • Mis aspiraciones profesionales se dirigen profesionalmente hacia sectores donde mi formación y experiencia podrían consolidarse. Tengo plena disponibilidad para cambios de residencia y viajes.
    • Tanto el interés por ampliar mi carrera profesional, como mi capacidad de trabajo y responsabilidad, pueden resultar de utilidad para una empresa consolidada como la suya.

    Objetivo

    • Agradecería la oportunidad de poder presentarme ante ustedes para contestar cualquier pregunta y ampliar lo resumido en mi historial.
    • Les agradecería me dejasen formar parte del proceso de selección.
    • Por todo ello espero que tenga en cuenta mi candidatura ante cualquier necesidad futura se ponga en contacto conmigo.
    • Desearía formar parte del proceso de selección, y quedo a su disposición para mantener una entrevista personal si lo estiman oportuno.
    • Espero se pongan en contacto conmigo para poderles ampliar mi datos en una entrevista personal.
    • Por todo ello, creo reunir los requisitos que mencionan para el futuro ocupante del puesto, deseando poder formar parte del proceso de selección.
    • Esperando comentar con usted en una próxima entrevista mi historial profesional, aprovecho la ocasión para saludarle atentamente.

    Despedida

    • Un cordial saludo.
    • En espera de sus noticias y sin otro particular.
    • Aprovecho la ocasión para agradecerle el interés que ha manifestado por mi candidatura. Atentamente.
    • Muy atentamente.
    • Atentamente.
    • A la espera de recibir noticias suyas, les saluda atentamente.
    • Agradeciéndoles la atención restada , se despide atentamente.
  6. Ejercicio filas

    Al pulsar sobre una fila, esta se colorea y se marca el radio button correspondiente a la fila pulsada.

  7. Ejercicio slider I

    document.querySelector(".capa" + contador).style.transform = "scale(1)";
    // El valor de contador estará entre 0 y 2
  8. Ejercicio slider II

    Realizar el mismo ejercicio, pero utilizando como selector para acceder a las capas

    document.querySelector(".capa:nth-child("+elemento+")").style.transform = "scale(1)";
    // El valor de elemento estará entre 1 y 3
  9. Ejercicio slider III

    Quitaremos opacidad y escalaremos a cero todas las slides del slider y luego daremos opacidad 1 y haremos grande la que corresponda.

  10. Ejercicio slider IV - sin definir número de elementos

    Ahora el contador irá desde cero hasta el número total de elementos que hay dentro del slider. De esta forma, si dentro del slider ponemos más capas, el código debería seguir funcionando. Recuerda que puedes obtener la longitud de un array accediendo a su propiedad .length

  11. Ejercicio slider V - avanza automáticamente

    Pista:setInterval(avanza, 1000);
  12. Ejercicio slider VI- con cambio de dirección

    Pista:let contador = 0;
    if(contador>=n-1|| contador <1){
    	signo = signo*(-1);
    }
    contador = contador + signo;
  13. Hacer un filtro

    Al pulsar sobre un enlace, las capas de colores inferiores deben filtrarse en función del enlace pulsado. Para ello, recorreremos todas las capas, añadiendo o eliminando el class "oculta" en el caso de que el href (con #) del enlace coincida con alguno de los class de la capa

    Ver ejemplo

Recorrer un array de objetos

const data = [
	{
		"titulo": "La Aventura",
		"autor": "Paco"
	},
	{
		"titulo":"Las cosas",
		"autor": "Pac"
	}
]
data.forEach( obj => {
	console.log(obj.autor);
});

Ejercicio recorrer un array de objetos

Hacer una lista HTML donde se muestren los nombres de los usuarios

const usuarios = [
	{
		"name" : "Paco",
		"isActive" : false
	},
	{
		"name" : "Laura",
		"isActive" : false
	},
	{
		"name" : "Raquel",
		"isActive" : false
	},
	{
		"name" : "Juan",
		"isActive" : true
	},
	{
		"name" : "Alberto",
		"isActive" : false
	},
	{
		"name" : "Rodolfo",
		"isActive" : true
	},
];
Ver ejemplo

find

Permite el elemento de un array que cumple cierta condición

const escenas = [
	{
		"id": 1,
		"titulo": "beso inicial"
	},
	{
		"id": 2,
		"titulo": "beso final"
	}
]

	const escena = escenas.find( obj => obj.id == 2)
	
	console.log(escena);

Ejercicio find

  1. Utilizando el método find, busca el usuario cuyo nombre es Juan y muestra su edad.
    const usuarios = [
    	{
    		"name" : "Paco",
    		"isActive" : false,
    		"edad": 18
    	},
    	{
    		"name" : "Laura",
    		"isActive" : false,
    		"edad": 21
    	},
    	{
    		"name" : "Raquel",
    		"isActive" : false,
    		"edad": 15
    	},
    	{
    		"name" : "Juan",
    		"isActive" : true,
    		"edad": 17
    	},
    	{
    		"name" : "Alberto",
    		"isActive" : false,
    		"edad": 50
    	},
    	{
    		"name" : "Rodolfo",
    		"isActive" : true,
    		"edad":7
    	},
    ];
    Ver ejercicio resuelto

filter

Permite obtener los elementos de un array cumplen cierta condición.

El método filter recibe como parámetro de entrada una función que devuelve true si queremos añadir al array resultante el objeto que estamos evaluando, y false si no lo queremos añadir.

El siguiente código evalúa cada elemento de un array de números y comprueba si son iguales al valor almacenado en n_introducido. La constante result es un nuevo array compuesto por los elementos que cumplen la condición.

const result = numeros.filter(num => num < n_introducido);
Ver ejemplo

Ejercicios filter

  1. Recorre el array anterior para obtener un nuevo array con los usuarios activos. Ver ejercicio resuelto
  2. Recorre el array anterior para obtener un array con los usuarios mayores de 18 años. Ver ejercicio resuelto

Reduce

El método reduce permite acumular valores en una variable.

Convertir un array en una cadena

const valores = [{titulo:"t1"},{titulo:"t2"},{titulo:"t3"},{titulo:"t4"}];

let val = valores.reduce(
    // En cada iteración devolvemos el valor que estamos acumulando
    (valorAcumulado, obj) => valorAcumulado + obj.titulo, 
    " valor inicial ");
    
console.log(val);
Convertir un array en cadena

Acumular valores en un nuevo array

const valores = [{precio: 1},{precio: 2},{precio: 3},{precio: 4}];
const arrayAcumulado = [];

let val = valores.reduce(
	// En cada iteración devolvemos el array con los valores que estamos acumulando
	(arrayAcumulado, obj) => [...arrayAcumulado,obj.precio*2], 
[]);

Ejercicio filter y reduce

Partimos de un objeto seresVivos con dos propiedades: humanos y tortugas. También tenemos un array de objetos llamado seleccion, donde cada objeto hace referencia a una de las propiedades del objeto seresVivos

Aplicando el método reduce sobre el objeto selección vamos a recorrerlo para ir acumulando en un nuevo array los objetos del array seresVivos que tengan más de 18 años, siempre y cuando tengan su propiedad selected a true en el objeto seleccion.

const seresVivos = {
"humanos":[
{
	"name" : "Paco",
	"edad": 18
},
{
	"name" : "Laura",
	"edad": 21
},
{
	"name" : "Rodolfo",
	"edad":7
}
]
,
"tortugas":[
{
	"name" : "Rafael",
	"edad": 19
},
{
	"name" : "Donatello",
	"edad": 16
},
{
	"name" : "Leonardo",
	"edad": 17
}
]
};


const seleccion = [
{
	"name": "humanos",
	"selected": false
},
{
	"name": "tortugas",
	"selected": true
}
];
pistaconst result = seleccion.reduce((todosLosAnimales, raza) => {
	if(/*el objeto raza tiene el valor selected a true*/){
		const animal = seresVivos[raza.name].filter(/* Devolvemos los animalres con más de 18 años*/);
		return [...todosLosAnimales, animal];
	}else{
		return [...todosLosAnimales];
	}
	}, []
)
Ver ejercicio resuelto

Convertir un objeto en un array de arrays

const arrayDeArrays = Object.entries(obj);
Convertir objeto en array de arrays
icono de mandar un mailPreguntame lo que quieras!
Pablo Monteserín
contacta conmigoPablo Monteserín

El servicio de resolución de dudas técnicas es sólo para los usuarios premium. Si tienes cualquier otra duda, usa el formulario de contacto. ¡Gracias!