CursosEmpresasBlogLiveConfPrecios

Método find vs. método filter

Clase 9 de 30 • Taller Práctico de JavaScript: Matemáticas y Estadística Básica

Clase anteriorSiguiente clase
    Juan Castro

    Juan Castro

    teacher•
    hace 3 años

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

      Miguel Angel Hernandez Colombo

      Miguel Angel Hernandez Colombo

      student•
      hace 3 años

      como hacer esto si no tengo tanto tiempo? :,(

      Juan Castro

      Juan Castro

      teacher•
      hace 3 años

      2x?

    silfredo mario

    silfredo mario

    student•
    hace 3 años

    Métodos de los Arrays. ![](

    arrays.jpg

      Andrés Felipe Eslava Zuluaga

      Andrés Felipe Eslava Zuluaga

      student•
      hace 3 años

      Excelente aporte

    Kevin J. Zea Alvarado

    Kevin J. Zea Alvarado

    student•
    hace 3 años

    Pienso que cabe mencionar dos puntos importantes aquí: .

    1. 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.
    2. Aprender manipulación de arreglos me ha ayudado mucho en mi carrera como desarrollador. Te hace más profesional y con conocimientos sobre el tema. Les recomiendo mucho que tomen el curso de Manipulación de Arrays en JavaScript y comprendan y practiquen cada método.

    .

    Igualmente, si tienen duda de algún tema de Desarrollo Web, estaré encantado de apoyarles. 💚

      Alberto Montero

      Alberto Montero

      student•
      hace 3 años

      Excelente curso, me ha ayudado muchísimo para mejorar mi lógica

      Ricardo Rey

      Ricardo Rey

      student•
      hace 2 años

      Así es, yo lo realice declarando directamente dentro del find() una arrow function. Se me hizo mucho más fácil entenderlo así.

      function identificarCupon(cuponUsuario) { return listCoupons.find((couponElement) => { if (couponElement.name == cuponUsuario) { return couponElement; } }).discount; }
    Yuliam Rivera González

    Yuliam Rivera González

    student•
    hace 3 años

    10 minutos en ésta clase fueron 7 horas en la tierra!!! 🤯

      Juan Castro

      Juan Castro

      teacher•
      hace 3 años

      "Cuando aprendes la diferencia entre find y filter"

      Esta pequeña maniobra nos costará 51 años
    Iván Camilo Jaramillo García

    Iván Camilo Jaramillo García

    student•
    hace 3 años

    lej comparto chico!

    array cheatsheet.jpg

    marco antonio

    marco antonio

    student•
    hace 3 años

    Si tu cara fue

    ed1c7bf4add7c41f7e553259ab5e975e.jpg

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

    const ListaDeCupones = new Array(); ListaDeCupones.push({codigo: 'abc20', descuento: 20}); ListaDeCupones.push({codigo: 'xyz50', descuento: 50}); ListaDeCupones.push({codigo: 'blackFriday',descuento: 15}); function find(funcion) { // funcionamiento interno de find let elemento = undefined; ListaDeCupones.forEach((valor) => { if (funcion(valor)) elemento = valor;}); return elemento;} function imprimirDescuento(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'; function validarCupon(cupon) { return cupon.codigo == cupon_lala;} const cupon = find(validarCupon); imprimirDescuento(200, cupon);

     

      Aaron Santiago Loyo Zabala

      Aaron Santiago Loyo Zabala

      student•
      hace 3 años
      Screenshot_5.png
    Paul Gutierrez Velasco

    Paul Gutierrez Velasco

    student•
    hace 3 años

    Logré que convivieran los descuentos manuales con los cupones. 😁

    Captura de pantalla.png

    Codepen: https://codepen.io/paulgutv/full/bGvxreE

    <h2>Calculadora de descuentos</h2> <label for="price">Precio original: S/.</label> <input id="price" type="number"> <label for="discount">Descuento: </label> <input id="discount" type="number"> <label for="coupon">Cupón: </label> <input id="coupon"> <button id="calculate">Calculate</button> <p id="result"></p>
    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); // CUPONES const couponList = []; couponList.push({ name: "OFERTA50", discount: 50 }); couponList.push({ name: "OFERTA30", discount: 30 }); // FUNCIÓN CALCULAR function calculateDiscount() { // SIN VALORES VACÍOS if ( (!price.value && !discount.value) || (!price.value && !coupon.value) || (!discount.value && !coupon.value) ) { result.innerText = "Introduce dos valores"; return; } // DESCUENTO NO MAYOR A 100 if (discount.value > 100) { result.innerText = "El descuento no puede ser mayor de 100%"; return; } // FUNCIÓN FILTRO DE CUPONES function filterDiscount(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; }
    Javier Luján Blanco

    Javier Luján Blanco

    student•
    hace 3 años

    Una de las cosas más claras que tengo cada día, es que hay que leer documentación, muuuucha documentación.

      Juan Castro

      Juan Castro

      teacher•
      hace 3 años

      No importa dónde o cómo aprendas programación, SIEMPRE vamos a tener que leer documentación. :D

    Yerson Felipe Ramirez Garnica

    Yerson Felipe Ramirez Garnica

    student•
    hace 3 años

    Gente curso de array para que puedan profundizar :) https://platzi.com/cursos/arrays/

      Johangly Sucre

      Johangly Sucre

      student•
      hace 3 años

      Muchas gracias!

    Axel Enrique Galeed Gutierrez

    Axel Enrique Galeed Gutierrez

    student•
    hace 3 años

    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 find

    const rta2 = numbers.find(item => item === 30); console.log('find', rta2);

    FindIndex

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

    Con filter

    const rta = words.filter(item => item.length >= 6);

    Otro ejemplo

    const orders = [ { customerName: 'Nicolas', total: 60, delivered: true, }, { customerName: 'Zulema', total: 120, delivered: false, }, { customerName: 'Santiago', total: 180, delivered: true, }, { customerName: 'Valentina', total: 240, delivered: true, }, { customerName: 'Nicolas', total: 1400, delivered: false, }, ]; const rta2 = orders.filter(item => item.delivered && item.total >= 100); const search = query => orders.filter( ({customerName}) => customerName.includes(query) ); console.log(search('V'));

    Base de datos

    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.

    Iván Sergio Adamo

    Iván Sergio Adamo

    student•
    hace 3 años

    "Al principio es doloroso, pero les va a gustar"

    Raúl Adolfo Sánchez Rodríguez

    Raúl Adolfo Sánchez Rodríguez

    student•
    hace 3 años

    Principales diferencias entre filter( ) y find( ) _

    findVSfilter.png

    Alejandrina Pérez Lugo

    Alejandrina Pérez Lugo

    student•
    hace 3 años

    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

    Captura de Pantalla 2022-10-30 a la(s) 11.12.43.png
    Jorge A. Torres

    Jorge A. Torres

    student•
    hace 3 años

    Estuvo potente

    Gualberto Montiel

    Gualberto Montiel

    student•
    hace 3 años
    Don't understand
    Kevin Alexis Rondon Gonzalez

    Kevin Alexis Rondon Gonzalez

    student•
    hace 3 años

    Juan no mentía cuándo dijo "si es tu primera vez va a doler muchísimo" fue verdad dolió y bastante.

    Fernanda Vidal

    Fernanda Vidal

    student•
    hace 3 años

    Hola a todos <3 Por acá les comparto mi solución utilizando find :D

    carbon.png
    carbon (1).png
    Yosber Emmanuel Guerrero Colmenares

    Yosber Emmanuel Guerrero Colmenares

    student•
    hace 2 años

    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 usuario const calcularEnviar = document.querySelector('#calcular'); // Boton de cálculo const 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. function calcularDescuento() { /* 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' } */ function evaluarObjetoCupon(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>Deportivo Tachira - Tienda Oficial</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 Deportivo Tá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 Deportivo Tá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>
    CSS h1 { font-family: 'Roboto', sans-serif; text-align: center; } .imagen { display: flex; width: 50%; overflow: hidden; } .imagen img { width: 100%; object-fit: contain; height: 500px; } .informacion { width: 50%; flex-direction: column; } .producto { display: flex; } label { display: block; font-family: 'Roboto', sans-serif; font-size: 18px; margin-bottom: 10px; } input { width: 40%; margin-bottom: 10px; display: block; border-radius: 10px; height: 35px; border: 1px solid black; padding-left: 10px; padding-right: 10px; } button { padding: 10px 20px 10px 20px; font-family: 'Roboto', sans-serif; font-size: 16px; border: none; background-color: black; color: white; border-radius: 10px; font-weight: 500; } #pagar { background-color: yellow; color: black; } .informacion p { font-family: 'Quicksand', sans-serif; font-size: 16px; max-width: 600px; } .informacion .price { font-family: 'Roboto', sans-serif; font-weight: 800; font-size: 40px; } span { font-family: 'Quicksand', sans-serif; font-size: 20px; }
    Raúl Adolfo Sánchez Rodríguez

    Raúl Adolfo Sánchez Rodríguez

    student•
    hace 3 años

    Repasa las 3 soluciones desarrolladas en la clase de hoy con las siguientes láminas

    _

    Clase9-1.png
    Clase9-2.png
    Clase9-3.png
    Clase9-4.png
    Clase9-5.png
    Clase9-6.png
    Clase9-7.png
    Clase9-8.png
    Clase9-9.png
    Clase9-10.png
    Clase9-11.png
    Clase9-12.png
    Clase9-13.png
    Clase9-14.png
    Clase9-15.png
    Clase9-16.png
    Clase9-17.png
    Clase9-18.png
    Clase9-19.png
    Clase9-20.png
    Clase9-21.png
    Clase9-22.png
    Clase9-23.png
    Clase9-24.png


    ¿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

    _

    findVSfilter.png
    Diego Vergara

    Diego Vergara

    student•
    hace 3 años

    Amo los Arrays, aqui mi funcion

    const calcularDescuento = (event) => { event.preventDefault() const price = event.target.precio.value const cupon = event.target.cupon.value console.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' } }

Escuelas

  • Desarrollo Web
  • English Academy
  • Marketing Digital
  • Inteligencia Artificial y Data Science
  • Ciberseguridad
  • Liderazgo y Habilidades Blandas
  • Diseño de Producto y UX
  • Contenido Audiovisual
  • Desarrollo Móvil
  • Diseño Gráfico y Arte Digital
  • Programación
  • Negocios
  • Blockchain y Web3
  • Recursos Humanos
  • Finanzas e Inversiones
  • Startups
  • Cloud Computing y DevOps

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads