:bulb: Recomendación: mira esta clase al menos 3 veces.
:one: La primera para disfrutar viendo mi sufrimiento.
:two: La segunda para hacer lo mismo que yo sabiendo desde antes qué errores van a salir y por qué... pa no andar con tanto estrés
:three: Y una tercera vez para tratar de romper todo, hacer experimentos locos y aprender de verdad
NO TE RINDAS si los métodos de los arrays te parecen difíciles. Todas y todos pasamos por lo mismo. Es un cambio de pensamiento muy fuerte. Duele al principio. Pero luego se pone más fácil. Y los encontraremos por todas partes en el futuro así que es indispensable invertir un buen tiempo en tratar de dominarlos.
como hacer esto si no tengo tanto tiempo? :,(
2x?
Métodos de los Arrays.
![](
Excelente aporte
Pienso que cabe mencionar dos puntos importantes aquí:
.
El método filter itera por todos los elementos de un arreglo, mientras que find regresa el primer elemento que cumpla con la condición. Por lo tanto, si sólo se está buscando un elemento, el método más óptimo es find, ya que, apenas encuentre al elemento, dejará de iterar por los demás.
10 minutos en ésta clase fueron 7 horas en la tierra!!! 🤯
"Cuando aprendes la diferencia entre find y filter"
!Esta pequeña maniobra nos costará 51 años
lej comparto chico!
Si tu cara fue
Para intentar explicar como funciona find o filter decidí emular el método find para que cualquiera pueda entender como funciona internamente espero les sirva
constListaDeCupones=newArray();ListaDeCupones.push({codigo:'abc20',descuento:20});ListaDeCupones.push({codigo:'xyz50',descuento:50});ListaDeCupones.push({codigo:'blackFriday',descuento:15});functionfind(funcion){// funcionamiento interno de findlet elemento =undefined;ListaDeCupones.forEach((valor)=>{if(funcion(valor)) elemento = valor;});return elemento;}functionimprimirDescuento(precio, cupon){if(!cupon || cupon.descuento>100){console.warn('datos invalidos');return;}const precioFinal =(precio *(100- cupon.descuento))/100;console.log(`el precio es ${precio} pero solo pagaras ${precioFinal}`);}const cupon_BlackFriday ='blackFriday';const cupon_lala ='lala';functionvalidarCupon(cupon){return cupon.codigo== cupon_lala;}const cupon =find(validarCupon);imprimirDescuento(200, cupon);
Logré que convivieran los descuentos manuales con los cupones. 😁
const price =document.querySelector("#price");const discount =document.querySelector("#discount");const result =document.querySelector("#result");const calculate =document.querySelector("#calculate");const coupon =document.querySelector("#coupon");calculate.addEventListener("click", calculateDiscount);// CUPONESconst couponList =[];couponList.push({name:"OFERTA50",discount:50});couponList.push({name:"OFERTA30",discount:30});// FUNCIÓN CALCULARfunctioncalculateDiscount(){// SIN VALORES VACÍOSif((!price.value&&!discount.value)||(!price.value&&!coupon.value)||(!discount.value&&!coupon.value)){ result.innerText="Introduce dos valores";return;}// DESCUENTO NO MAYOR A 100if(discount.value>100){ result.innerText="El descuento no puede ser mayor de 100%";return;}// FUNCIÓN FILTRO DE CUPONESfunctionfilterDiscount(couponElement){return couponElement.name== coupon.value;}const couponArray = couponList.find(filterDiscount);if(couponArray){ discount.value= couponArray.discount;}else{if(coupon.value){ result.innerText="Cupón no válido"; discount.value="";return;}}// CÁLCULO DE DESCUENTO result.innerText="S/. "+(price.value*(100- discount.value))/100;}
Una de las cosas más claras que tengo cada día, es que hay que leer documentación, muuuucha documentación.
No importa dónde o cómo aprendas programación, SIEMPRE vamos a tener que leer documentación. :D
Les comparto mis apuntes del Curso de Manipulación de Arrays en JavaScript. :D
Clase: Find y FindIndex
Find
Es parecido a filter, find solo va a retornar un objeto que cumpla con un condicional.
A diferencia de filter, find va a devolver el objeto del array como tal y no un nuevo array. Siempre va a devolver el primer elemento que hizo mach con la condición, en caso de no encontrar nada va a devolver un undefind.
Find es bueno usarlo cuando tenemos objetos o array cuyos atributos o elementos nos se repiten.
Ejemplo
Sin find
const numbers =[1,30,49,29,10,13];let rta =undefined;for(let index =0; index < numbers.length; index++){const element = numbers[index];if(element ===30){ rta = element;break;}}
Con este devolvemos la posición en la que se encuentra el elemento. En caso de no encontrar el elemento nos devuelve un -1.
Lo usamos utilizando un arrow function al igual que find.
Código de la clase
const products =[{name:"Pizza",price:12,id:'🍕',},{name:"Burger",price:23,id:'🍔',},{name:"Hot dog",price:34,id:'🌭',},{name:"Hot cakes",price:355,id:'🥞',},];const numbers =[1,30,49,29,10,13];let rta =undefined;for(let index =0; index < numbers.length; index++){const element = numbers[index];if(element ===30){ rta = element;break;}}// console.log('for', rta);const rta2 = numbers.find(item=> item ===30);// console.log('find', rta2);const rta3 = products.find(({id})=> id ==='🍔')// console.log('rta3', rta3);const rta4 = products.findIndex(({id})=> id ==='🍔')console.log('rta4', rta4);
Clase: Filter
¿Qué hace?
Este se puede usar en conjunto con otros métodos del prototipo Array.
Filter nos va a ayudar a filtrar los elementos de un array con base a una condición, los elementos que cumplan con la condición van a ser parte del nuevo array. Filter es immutable, no cambia el array original crea uno nuevo con los elementos que cumplan con la condición.
La cantidad del nuevo array va a variar según los elementos que cumplan con la condición dada, puede variar pero siempre siendo el máximo la cantidad de elementos que contiene el array original, incluso puede ser un array vacío.
Ejemplo
Sin filter
const words =['spray','limit','elite','exuberant'];const newArray =[];for(let index =0; index < words.length; index++){const item = words[index];if(item.length<=6){ newArray.push(item);}}
Cuando se trata de una base de datos lo mejor es dejar que el filtro lo haga el lenguaje de bases de datos, en el caso de no tener una estas podemos hacerlo directamente con un lenguaje de programación.
"Al principio es doloroso, pero les va a gustar"
Principales diferencias entre filter( ) y find( )
_
Me costó mucho trabajo entender el método find/Filter 😅 Y me salía pero me faltaba decirle al valor del input que se reemplazara por la variable donde guarde el método que filtra el arreglo, necesito más ejercicios, pero por el momento ya salió :D
Estuvo potente
!Don't understand
Juan no mentía cuándo dijo "si es tu primera vez va a doler muchísimo" fue verdad dolió y bastante.
Hola a todos <3
Por acá les comparto mi solución utilizando find :D
Espero mis apuntes les ayuden de algo. Aún me falta entender muchísimo, pero espero sea de ayuda para alguien jasjda.
const cuponInput =document.querySelector('#cupon');// Input del usuarioconst calcularEnviar =document.querySelector('#calcular');// Boton de cálculoconst cuponResultado =document.querySelector('.descuento');// Saldrá error si el cupon no existe.const precioDescuento =document.querySelector('.precio');// Elemento donde se mostrará el descuento.var precioProducto =100;// Precio del producto.// Como lo hice de un objeto directamente.// var cupones = {// TACHIRAFOREVER: 20,// DESCUENTO9310: 10,// VIPTACHIRA: 40,// }// function calcularDescuento() {// let cuponData = cuponInput.value;// if (!cuponData){// cuponResultado.innerText = 'No has colocado nada.';// } else {// var descuento = cupones[cuponData]// precioDescuento.innerText ='Total a pagar $' + precioProducto * (100 - descuento) / 100;// } // }// Creamos el array que contendrá los cupones.var arrayCupones =[];// Agregamos los cupones al array.arrayCupones.push({cuponName:'TACHIRAXSIEMPRE',descuento:20,});arrayCupones.push({cuponName:'TACHIRA',descuento:10,});arrayCupones.push({cuponName:'TACHIRITA',descuento:25,});// Inicializamos la función que se ejecutará cuando los usuarios den click.functioncalcularDescuento(){/*
Creamos una función interna que evaluará si un valor de la llave que estamos evaluando coincide con lo que el usuario escribió.
Ejemplo, tenemos un objeto llamado carro, queremos comprobar que la marca sea Ford, entonces esta funcion evaluara que el valor de la llave "Marca" coincida con el del 'input' que en este caso seria 'Ford'.
var carro = {
marca: 'Ford',
modelo: 'XYZ'
}
*/functionevaluarObjetoCupon(cuponObjeto){return cuponObjeto.cuponName== cuponInput.value;}/*
Ahora dentro de la variable cuponObtenido guardaremos el método find aplicado al array directamente, este método se caracteriza por buscar el primer elemento que cumpla con la condición que le demos, en este caso que concida con el input del usuario.
La condición que debe cumplir se evaluará en la función que antes definimos. A diferencia de filter, que itera todos los elementos del array y guarda todos los elementos que cumplan la condición en un nuevo array, este devolverá directamente lo que encuentre como resultado, que en este caso es el objeto.
*/var cuponObtenido = arrayCupones.find(evaluarObjetoCupon);/*
Evaluamos mediante un if si existe el objeto, en caso de ser verdadero guardaremos el valor del descuento, que en este caso se encuentra bajo la llave 'descuento'.
Ahora modificaremos el texto del elemento que se supone que le mostrará al usuario cuanto deberá pagar.
*/if(cuponObtenido){var descuento = cuponObtenido.descuento; precioDescuento.innerText='Total a pagar $'+ precioProducto *(100- descuento)/100;}else{/*
En caso de ser falso, mostramos el objeto que dice que el cupon no existe.
*/ cuponResultado.innerText='El cupón no existe.';}}/*
Agregamos el metodo de escucha para capturar cuando los usuarios den click al botón y ejecutaremos la función calcularDescuento.
*/calcularEnviar.addEventListener('click', calcularDescuento);
HTML<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DeportivoTachira-TiendaOficial</title><link rel="shortcut icon" href="https://a.espncdn.com/combiner/i?img=/i/teamlogos/soccer/500/4818.png" type="image/x-icon"><link rel="stylesheet" href="cupones.css"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500&display=swap" rel="stylesheet"></head><body><div class="producto"><div class="imagen"><img src="D_NQ_NP_782024-MLV54945874652_042023-O.png"></div><div class="informacion"><p class="price">100$</p><p>¡Celebra el espíritu invicto del fútbol venezolano con la camiseta del DeportivoTáchira Fútbol Club, el orgullo de toda una nación futbolera!Esta icónica camiseta no solo es un pedazo de tela, sino una manifestación palpable de la pasión y el éxito que este equipo ha traído a Venezuela.</p><p>Con su diseño audaz en los colores distintivos del equipo, el amarillo y negro resplandecen con gloria y determinación.La camiseta del DeportivoTáchira no solo es una prenda deportiva, sino un símbolo de resiliencia y triunfo en los campos de juego.</p><label for="cupon">Cupon</label><input id="cupon" type="text"><button id="calcular">Calcular descuento</button><button id="pagar">Comprar</button><p class="descuento"></p><span class="precio"></span><script src="cupon.js"></script></div></div></body></html>
Repasa las 3 soluciones desarrolladas en la clase de hoy con las siguientes láminas
_
¿Quieres repasar los métodos FILTER y FIND?
Te dejo algunos links que me han servido para entenderlos:
Método filter - enlace 1
Método filter - enlace 2
Método find - enlace 1
Método find - enlace 2
Diferencias entre FIND y FILTER
_
Amo los Arrays, aqui mi funcion
constcalcularDescuento=(event)=>{ event.preventDefault()const price = event.target.precio.valueconst cupon = event.target.cupon.valueconsole.log(price, cupon)if(!price ||!cupon){console.log('error no hay valores') event.target.querySelector('.message').innerHTML='No ingresaste cupon o precio'return}const matchedCupon = cupones.find((item)=> cupon == item.name)if(matchedCupon){ event.target.querySelector('.message').innerHTML=`El precio te queda en ${precioConCupon(price, matchedCupon)}`}else{ event.target.querySelector('.message').innerHTML='El cupon no existe'}}
