No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Método find vs. método filter

8/27
Recursos

Aportes 7

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

💡 Recomendación: mira esta clase al menos 3 veces.

  • 1️⃣ La primera para disfrutar viendo mi sufrimiento.
  • 2️⃣ 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
  • 3️⃣ 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.

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

Tanto filter como find son útiles, me llamó mucho la atención que se podía trabajar sin el condicional y dentro del mismo bucle:

    listaCupones.find(funcionCupones);
    function funcionCupones (cuponesElementos) {    
      
        if(cuponesElementos.name == cuponText){
            const descuentoFinal = (precio * (100-cuponesElementos.descuento)) / 100;
            resultadoOutput.innerHTML = descuentoFinal;
        }
    }

Puede ser útil si solo se quiere obtener el resultado.

<const inputPrice = document.querySelector('#price');
const inputCoupon = document.querySelector('#coupon');

const btn = document.querySelector('#calcular');
btn.addEventListener('click', calcPriceDiscount);

const pResult = document.querySelector('#result');


const coupons = [
    {
        name: 'bronze',
        discount: 20,
    },

    {
        name: 'silver',
        discount: 30,
    },

    {
        name: 'gold',
        discount: 50,
    },
];

function calcPriceDiscount() {
    const price = parseInt(inputPrice.value);
    const coupon = inputCoupon.value;

    if(!price || !coupon){
        pResult.innerHTML = 'Por favor llena el formulario';
        return;
    }

    let discount;

    function isCouponInArray(couponElement){
        return couponElement.name == coupon;
    }

    const couponInArray = coupons.find(isCouponInArray);

    if (couponInArray) {
        discount = couponInArray.discount;
    } else{
        pResult.innerHTML = 'El cupón no es válido';
        return;
    }

    const newPrice = price * (100 - discount) / 100;

    pResult.innerHTML = 'El nuevo precio con descuento es $ ' + newPrice;
}> 

Tuve pequeños fallos pero logré solucionarlo.

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

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

<h1>Calculadora de descuentos</h1>
<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;
}

Lo hice un poco diferente ya habia subido el repo en la clase pasada, se los dejo y tambien el codigo js aca.
https://orlando0x.github.io/MatematicasEstadisticaConJavascript/retoPorcentajeCuponesArrayObjetcs.html

const monto = document.getElementById("monto");
const descuento = document.getElementById("descuento");
const btn = document.getElementById("btn")
const texto = document.getElementById("text");
const cupon = document.getElementById("cupon");
const cupones = [
    {codigo: "ABC345", descuento: 5},
    {codigo: "ZNK123", descuento: 15},
    {codigo: "QWE789", descuento: 20},
    {codigo: "ZXC456", descuento: 25},
    {codigo: "IOP963", descuento: 30},   
    ]


btn.addEventListener("click", cuentaTotal)


function cuentaTotal(){
    
    if (monto.value <= 0){
        cupon.innerText = ' '
        texto.innerText = 'ERROR: Debe introducir un monto a pagar mayor a $0'
        
    } else {
        let validationCupon = cupones.filter(function(cuponIndividual){
            return cuponIndividual.codigo === descuento.value;
        })
        function descuentoTotal(){
            const total = (monto.value) - (monto.value * (descuentoFinal / 100));
            texto.innerText = `El monto total a pagar es de: $${total}`;
        }

        if(validationCupon.length >= 1){
            var descuentoFinal = validationCupon[0].descuento;
            cupon.innerText = `Felicidades! Tienes un ${descuentoFinal}% de descuento`
            descuentoTotal();

        } else if (!descuento.value) {
            var descuentoFinal = 0;
            descuentoTotal();
            cupon.innerText = 'ERROR: No has introducido ningun cupon, no tendras ningun descuento'
            texto.innerText = `El monto total a pagar es de: $${total}`;
        }
        else {
            var descuentoFinal = 0;
            descuentoTotal();
            cupon.innerText = 'ERROR: Cupon invalido, no tendras ningun descuento'
            texto.innerText = `El monto total a pagar es de: $${total}`;
        }
        
    }
}

Esta es mi solución, me emociono bastante cuando salio!


   const cupones= {
        Gabo:10,
        Gabobo:20,
        Gabobobo:30,
    }
    for(const property in cupones){
        if(cantidad2.value==property){
            const descuento= (dinero.value*(100-cupones[property]))/100;
        pDescuento2.innerText="El descuento es: " + descuento
        }
    }