Arrays

Contactar con el profesor

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);

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 HTML con map

Con el método map podremos recorrer arrays. Sin embargo, las etiquetas HTML de una página web no son un array, sino un nodelist, por lo que habrá que hacer la siguiente conversión:

const elements = document.querySelectorAll('div');

Array.from(elements).map(obj => {
    console.log(obj.innerHTML)
});

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

Entender el método closest

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

2. Cuestionario

3. presupuesto

4. 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.

5. Ejercicio: filas

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

6. Slider I

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

7. 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

8. Slider III

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

9. 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

10. Slider V – avanza automáticamente

Pista:
setInterval(avanza, 1000);

11. Slider VI- con cambio de dirección

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

12. 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

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
	},
];

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

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
	},
];

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);

Ejercicios filter

1. Recorre el array anterior para obtener un nuevo array con los usuarios activos.

2. Recorre el array anterior para obtener un array con los usuarios mayores de 18 años.

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);

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.

pista
const result = seleccion.reduce((todosLosAnimales, raza) => {
	if(/*el objeto raza tiene el valor selected a true*/){
		const animal = seresVivos[raza.name].filter(/* Devolvemos los animales con más de 18 años*/);
		return [...todosLosAnimales, animal];
	}else{
		return [...todosLosAnimales];
	}
	}, []
)
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
}
];

Convertir un objeto en un array de arrays

const arrayDeArrays = Object.entries(obj);
← Create element
Tres en raya →

Aviso Legal | Política de privacidad