Método find vs. método filter

Taller Práctico de JavaScript: Matemáticas y Estadística Básica

Contenido del curso

Introducción

1
¿Ya tomaste el Curso Práctico de JavaScript?
08:20 min

Matemáticas en JavaScript

Porcentajes

Estadística básica

Análisis de salarios

Próximos pasos

30
Toma el Taller Práctico de JavaScript: Videojuegos
04:27 min

Tomar examen

Método find vs. método filter

Todos los cursos GRATIS

Se acaba en:

00díasd:00hrsh:00minm:00segs

Yosber Emmanuel Guerrero Colmenares

Estudiante

Hace 3 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;
}

Método find vs. método filter

Introducción

¿Ya tomaste el Curso Práctico de JavaScript?

Matemáticas en JavaScript

Fórmulas matemáticas en JavaScript

Math en JavaScript

Reto: altura de un triángulo

Playground: Calcula la Altura de un Triángulo Escaleno

Porcentajes

Cómo calcular porcentajes

Calculando descuentos con JavaScript

Ejercicio de crear cupones de descuento

Método find vs. método filter

Playground: Encuentra el ID

Estadística básica

Qué es promedio, moda y mediana

Calculando el promedio

Método reduce

Calculando la mediana en una lista impar

Calculando la mediana en una lista par

Método sort

Calculando la moda: objetos a partir de arrays

Calculando la moda: arrays a partir de objetos

Playground: Transforma Objetos en Arrays

Promedio Ponderado en JavaScript: Fórmulas y Casos de Uso

PlatziMath: clases y métodos estáticos

Análisis de salarios

Cómo estructurar información en proyectos de software

Análisis salarial con JavaScript

Proyección salarial personal

Reestructurando información sobre la marcha

Salarios empresariales

Proyección de salarios por empresas

Top 10% de salarios

Análisis de la Mediana Salarial con HTML, CSS y JavaScript

Próximos pasos

Toma el Taller Práctico de JavaScript: Videojuegos

Todos los cursos GRATIS