Manipulación de Rides con JavaScript

Curso de Manipulación de Arrays en JavaScript

Contenido del curso

Introducción

1
Manipulación de Arrays en JavaScript para Desarrollo Full Stack
01:39 min

Fundamentos del manejo de arrays

Métodos en JavaScript

Despedida

28
Manipulación de Rides con JavaScript
Viendo ahora

Tomar examen

Manipulación de Rides con JavaScript

Resumen

🎉¡Lo has logrado! 🙌 Completaste todas las clases del curso de Manipulación de Arrays en JavaScript.

✅ Si aún no queda claro algún tema, vuelve a revisar la clase o deja tu pregunta en la sección de preguntas.

👨‍💻 Te presentamos JavaScript Hero, donde podrás practicar los conceptos de JavaScript en un desafío diario, en el que podrás demostrar tus conocimientos sobre lo aprendido durante el curso y mucho más.

🧾 Realiza la prueba del curso para recibir tu certificado y no olvides dejar tus 🌟 y tu comentario.

Y por sobre todo, ¡Nunca pares de aprender! 💚

Contribuciones del curso creadas por Andrés Guano.

Maurizio José Caballero Hernández

Estudiante

Hice todos los métodos con inserción visual a HTML solo agreguen el script al HTML

document.addEventListener("DOMContentLoaded", ( ) => { const letters = ["a", "b", "c"]; const listaVocales = ["a", "e", "i", "o", "u" ];

const frutas = ["manzana", "pera", "uva", "fresa", "banana", "kiwi", "platano"];

//Metodo .forEach
let lista = document.getElementById("lista")
    listaVocales.forEach((vocal, index)=>{

let vocales = document.createElement("li")
    
    vocales.textContent = `Letra numero ${index + 1} : ${vocal}` 
      
    vocales.className = " bg-red-100 p-4 text-center"
    
    lista.appendChild(vocales)
})



//Metodo .map

let frutasMayusculas = frutas.map((fruta) => 
 fruta.toUpperCase()
)


let listaFrutas = document.getElementById("listaFrutas")

frutasMayusculas.forEach((fruta)=>{
  let item = document.createElement("li")
  
  item.textContent = `Fruta Mayuscula : ${fruta}`
  item.className = "bg-blue-100 p-4 text-center"
  
  listaFrutas.appendChild(item)
})

// Metodo .filter

const listaFilter = document.getElementById("listaFilter") const frutasFiltradas = frutas.filter((fruta) => fruta.length >=5)

frutasFiltradas.forEach((fruta) =>{ const item = document.createElement("li") item.textContent = Fruta de nombre largo: ${fruta} item.className = "bg-red-100 p-4 text-center"

listaFilter.appendChild(item)

})

//filtro avanzado con .filter const filterAdvance = document.getElementById("filterAdvance") const frutasEspeciales = frutas.filter((fruta) => { const esimpar = fruta.length %2!== 0; const letrae = fruta.includes("e"); return esimpar && letrae;

})

 frutasEspeciales.forEach((fruta) =>{
const item = document.createElement("li")
item.textContent = `Fruta especial: ${fruta}`
item.className = "bg-blue-100 p-4 text-center"

filterAdvance.appendChild(item)

})

// metodo .find

const frutaFind = frutas.find((fruta)=> { const conP = fruta.includes("p"); const larga = fruta.length >= 5; return conP && larga

})

const frutaEspecialFind = document.getElementById("elFind");

const element = document.createElement("li"); element.textContent =La fruta es: ${frutaFind}

element.className = "bg-blue-100 p-4 text-center"

if (frutaFind === undefined){ const message = document.createElement("li"); message.textContent = No hay fruta que cumpla la condicion; message.className = "bg-blue-100 p-4 text-center"; frutaEspecialFind.appendChild(message); } else{ frutaEspecialFind.appendChild(element)}

// Metodo .some((el) => condition)

const endsWithA = frutas.some((fruta)=>fruta.endsWith("a"))

const seccionSome = document.getElementById("elSome")

const trueSome = document.createElement("p"); const falseSome = document.createElement("p");

trueSome.textContent='Si existen frutas que terminan en letra A.'; trueSome.className="bg-7-100 p-4 text-center";

falseSome.textContent='No, no existen frutas que terminan en letra A.'; falseSome.className="bg-blue-100 p-4 text-center"; if (endsWithA===true){ seccionSome.appendChild(trueSome) }else{ seccionSome.appendChild(falseSome) }

// Metodo .every const masd3Letras = frutas.every((fruta)=> fruta.length > 3);

const seccionEvery = document.getElementById("elEvery");

const elementEvery = document.createElement("p");

elementEvery.className="bg-blue-100 p-4 text-center";

if(masd3Letras ===true){ elementEvery.textContent =Todas las frutas tienen mas de 3 letras seccionEvery.appendChild(elementEvery) }else{ elementEvery.textContent =NO! no todas las frutas tienen mas de 3 letras seccionEvery.appendChild(elementEvery)

}

//Metodo .reduce

const totalLetras = frutas.reduce((acc,i)=>{ return acc+i.length },0)

const seccionReduce = document.getElementById("elReduce");

const elementReduce = document.createElement("p");

let prom = (totalLetras / frutas.length)

elementReduce.className="bg-red-100 p-4 text-center" elementReduce.textContent=El numero total de letras en el array es: ${totalLetras} y el promedio de letras por fruta es ${prom.toFixed(2)}

seccionReduce.appendChild(elementReduce)

//Metodo .sort

const ordenFrutas = [...frutas].sort((a, b) => a.localeCompare(b))

ordenFrutas.forEach((fruit)=>{
  
  const seccionSort = document.getElementById("elSort");
  const elementSort = document.createElement("li");
  
  elementSort.textContent=`${fruit}`;
  elementSort.className="bg-red-100 p-4 text-center";
  
  seccionSort.appendChild(elementSort);
})


// .sort con .filter 

const descendente = [...frutas].sort((a, b)=> b.localeCompare(a));

const listaFiltro = descendente.filter((element) => element.length > 4);

listaFiltro.forEach((elemento)=>{ const seccionSortFilter = document.getElementById("sortFilter"); const elementSortFilter = document.createElement("li"); elementSortFilter.className=" bg-yellow-300 text-center p-4"; elementSortFilter.textContent=${elemento}; seccionSortFilter.appendChild(elementSortFilter); } ) // Metodo .findIndex

const frutaF = frutas.findIndex((fruta) => fruta.startsWith("f"));

//Metodo .fill const arrayFill = [...frutas].fill("fruta",3,7);

//Metodo .at

const ultimaFruta = frutas.at(-1);

//Mostrar en pantalla

const listaReto = document.getElementById("listaEspecial");

const elementReto = document.createElement("li");
const elementReto2 = document.createElement("li");

elementReto.className= "bg-blue-400 p-4 text-center "

elementReto.textContent= `el indice es ${frutaF}`

listaReto.appendChild(elementReto)

elementReto2.className= "bg-red-100 p-4 text-center " elementReto2.textContent= la ultima fruta es ${ultimaFruta} listaReto.appendChild(elementReto2)

arrayFill.forEach((element)=> { const elementReto3 = document.createElement("li"); elementReto3.className= "bg-green-100 p-4 text-center " elementReto3.textContent= ${element} listaReto.appendChild(elementReto3) })

// metodo .splice

//buscare si la fruta existe y su indice con indexOf const indexFrutal = frutas.indexOf(("pera"));

if (indexFrutal !== -1){ const eliminadas = frutas.splice(indexFrutal,1,"🍐")

 const seccionSplice = document.getElementById("elSplice");
 const elementSplice= document.createElement("li");
 
 elementSplice.className="bg-blue-500";
 elementSplice.textContent= frutas.join(" - ");      seccionSplice.appendChild(elementSplice);

}else{ const seccionSplice = document.getElementById("elSplice"); const elementSplice= document.createElement("li");

 elementSplice.className="bg-blue-500";
 elementSplice.textContent= `No existe esa fruta que  busca`;
 seccionSplice.appendChild(elementSplice);

}

//Metodo .includes

const existe = frutas.includes("pera"); const seccionIncludes = document.getElementById("elIncludes"); const elementIncludes = document.createElement("li"); elementIncludes.className ="bg-red-100 p-4 text-center";

if(existe === true){

 elementIncludes.textContent = `si la fruta si existe`

}else{ elementIncludes.textContent = no la fruta no existe };

seccionIncludes.appendChild(elementIncludes); });

//mini reto level 2

const seccionReto = document.getElementById("reto");

const input = document.createElement("input") input.type= "text";

input.className= "bg-blue-500"

seccionReto.appendChild(input);

const textUsuario = input.value console.log(textUsuario)

const button = document.createElement("button"); button.textContent=ok

button.className= "bg-red-900" seccionReto.appendChild(button)

Luis Manuel Morales López

Luis Guilermo Figueroa Hernandez

Santiago Andres Alvarez Cuadros

Stephany Plaza

Rafael Martínez Rodríguez

Carlos Rodríguez

Katerin Calderón

Luis Fernando Cortes Duque

Javi Felices

Juan David Santamaria Gomez

Darwing Steven Sánchez Londoño

Sebastián Arredondo Posada

Silvia Torres

Alejandro de Jesús Reséndiz Olguín

José Antonio Sterling Sánchez

Santiago Rodriguez Chaves

Gonzalo Ceron Denetro

Angel David Osorio Leyva

Achraf Mharmel

Alex Flores

Hans Dussich

Joel Campos

Manipulación de Rides con JavaScript

Introducción

Manipulación de Arrays en JavaScript para Desarrollo Full Stack

Fundamentos del manejo de arrays

Recorrido de Arrays con Foreach en JavaScript

Mutabilidad vs Inmutabilidad en Programación JavaScript

Uso de Map para Transformaciones en JavaScript y Renderizado HTML

Playground: multiplica todos los elementos por dos

Transformaciones avanzadas con map en JavaScript

Playground: calcula y agrega nuevas propiedades a un array

Filtrado de Arrays en JavaScript con el Método Filter

Playground: retorna solo palabras de 4 letras o más

Uso del método reduce en JavaScript para sumar elementos de un array

Contar elementos en un array con reduce y agrupar por rango

Playground: calcula la suma total de elementos en un array

Métodos en JavaScript

Uso de la función "sum" en JavaScript para evaluar condiciones

Playground: ¿al menos 1 de los números es par?

Uso del método `every` en JavaScript para validaciones de arrays

Playground: retorna un booleano si todos los elementos son pares

Uso de los métodos find y findIndex en JavaScript

Uso del método includes en JavaScript para arrays y strings

Playground: buscador de palabras con parámetros de búsqueda

Unificación y separación de arrays con join y split en JavaScript

Playground: construye URLs a partir de strings

Fusión de Arrays con Concat y Operador Spread en JavaScript

Aplanar Arrays en JavaScript con Flat y FlatMap

Uso de FlatMap para Extraer Fechas de Calendarios en JavaScript

Playground: calcula el total de palabras en un texto

Métodos Mutables e Inmutables en Arrays: Manipulación y Búsqueda

Ordenamiento de Arrays con el Método Sort en JavaScript

Despedida

Manipulación de Rides con JavaScript

Resumen