Manipulación de Rides con JavaScript

Clase 28 de 28 • Curso de Manipulación de Arrays en 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.

Luis Manuel Morales López

student•

const despedida = ["Gracias!","Excelente","Curso!"]
console.log(despedida.join(" "))

Luis Guilermo Figueroa Hernandez

student•

Muy bueno 😀😀

Santiago Andres Alvarez Cuadros

student•

Adjunto mi resumen muy resumido de todo el curso: .

forEach: RECORRE un array. .
map: TRANSFORMA un array. Es inmutable. Crea un nuevo array a partir de la transformación del array original. .
filter: FILTRA con base a una condicional. Es inmutable. Crea un nuevo array. .
reduce: REDUCE un array a un único valor. OJO: si un array tiene objetos, puede devolver un objeto con varios elementos. Es inmutable. Dependiendo del caso, crea un nuevo array .
some: indica si ALGUNO de los elementos de un array cumple una condición. Es inmutable, no crea un nuevo array. Arroja TRUE o FALSE .
every: indica si TODOS los elementos de un array cumplen una condición. Es inmutable, no crea un nuevo array. Arroja TRUE o FALSE .
find: devuelve EL PRIMER ELEMENTO que cumpla con una condición. No devuelve un array, devuelve únicamente dicho elemento o un ‘undefined’ en caso de que ningún elemento cumpla con la condición. .
findIndex: Devuelve LA POSICIÓN del PRIMER ELEMENTO que cumpla con una condición. No devuelve un array, devuelve únicamente la posición de dicho elemento o un ‘undefined’ en caso de que ningún elemento cumpla con la condición. .
includes: indica si UN ELEMENTO se encuentra dentro del array dependiendo de una condición. Retorna un TRUE o un FALSE .
join: convierte un ARRAY en un STRING, dependiendo del separador que le indiquemos. .
split: convierte un STRING a un ARRAY. Crea un nuevo array. .
concat: UNE un array en otro array. Es inmutable, y no es necesario crear un nuevo array con el resultado. .
flat: ‘APLANA’ por niveles un array de arrays en un solo array. Es inmutable, y no es necesario crear un nuevo array. .
flatMap: ‘APLANA’ y CONVIERTE un array de arrays en un solo array. Es inmutable, crea un nuevo array y UNICAMENTE aplana en el primer nivel. Realiza primero un map y luego un flat. .
push: AGREGA un nuevo elemento al final de un array. Es mutable. .
splice: CORTA un elemento específico de un array. Es mutable. También funciona para AGREGAR un elemento en un índice específico dentro de un array. .
sort: ORDENA los elementos dentro de un array. Es mutable. .
Bonus: Al trabajar con objetos dentro de un array basado en un array original, se pueden modificar los objetos dentro del array original ya que los objetos son de Reference type. Para evitar esto, se recomienda clonar el array original dentro del nuevo array (utilizando spread operator), y trabajar únicamente desde el nuevo array.

Stephany Plaza

student•

Este resumen debería tener mas corazones, gracias sirvió un montón

Rafael Martínez Rodríguez

student•

Wow! Este resumen vale oro. Muchísimas gracias.

Carlos Rodríguez

student•

Este curso es sencillamente espectacular, ha hecho que todo mi flujo de trabajo en js sea más comprensible y he refactorizado una gran cantidad de código reduciendo líneas innecesarias. Excelente curso y muy buen profesor!

Katerin Calderón

student•

Excelente curso, Nicolás es un muy buen profesor, explica claro y concreto. Las diapositivas también ayudan a comprender mejor que hace el método internamente y así queda mas claro. muchas gracias

Luis Fernando Cortes Duque

student•

Que curso tan descriptivo y bien hecho.

Javi Felices

student•

Curso que abre un gran abanico de posibilidades, ha estado muy bien llevado, explicado y como me gustan los cursos, directo y al grano. Nico es muy bueno, y se ha convertido en alguien con mucho valor en Platzi. Gracias también a la comunidad.

Juan David Santamaria Gomez

student•

excelente currso

Darwing Steven Sánchez Londoño

student•

Un excelente curso sin duda alguna, recordar que también quedan otros metodos de los arrays para añadir, eliminar elementos como los siguientes:

/* El método shift() elimina el primer elemento del array y lo retorna. Este método modifica la longitud del array. */

/* El método unshift() agrega uno o más elementos al inicio del array, y devuelve la nueva longitud del array. */

/* El método pop() elimina el último elemento de un array y devuelve su valor al método que lo llamó. */

Nunca pares de aprender.

Sebastián Arredondo Posada

student•

Thanks for this excellent course. I've learned a lot of things about arrays and its methods.

const  understood = true;
 if(understood){
	console.log("Thanks teacher for this course!");    
}

Silvia Torres

student•

Me ha gustado mucho este curso, muchos ejercicios de ejemplo, muchos retos y desafíos que ir haciendo. Creo que es el primer curso que tengo la sensación de salir con mas conocimientos o seguridad a la hora de trabajar con arrays.

¡Ha sido genial!

Alejandro de Jesús Reséndiz Olguín

student•

MUY BUEN CURSO!!!

José Antonio Sterling Sánchez

student•

Excelente curso, contenido y Nicolas ha sido muy preciso con toda la información, creo que se convertirá en uno de mis profesores favoritos de todo platzi, después de mas de 50 cursos tomados veo gran potencial en el aunque este solo ha sido el primer curso que he visto de el.

Santiago Rodriguez Chaves

student•

Excelente curso. aprendi muchisimo. ahora no queda mas que seguir aprendiendo y practicar.

Gonzalo Ceron Denetro

student•

Gran Curso! 🙌🙌🙌

Angel David Osorio Leyva

student•

Fue un gran curso. Bien explicado 👍

Achraf Mharmel

student•

excelente curso de los que uno aprueba 100% al primero intento

Andres Nelson Aguirre Mamani

student•

Gracias profe a seguir aprendiendo

Hans Dussich

student•

Que gran curso.

Joel Campos

student•

Gracias por el curso siempre es bueno repasar estos manejos de arrays en javascript

Maurizio José Caballero Hernández

student•

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)

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