JS Promises

Enlaces:
https://developers.google.com/web/fundamentals/primers/promises?hl=es
https://scotch.io/tutorials/javascript-promises-for-dummies
https://www.codingame.com/playgrounds/347/javascript-promises-mastering-the-asynchronous/your-first-code-with-promises
https://flaviocopes.com/javascript-promises/
https://exploringjs.com/es6/ch_promises.html#sec_examples-promises

 let pagaExtra = false;

    // Generación de la promesa
    let nuevoTelefono  = new Promise(
        function (resolve, reject) {
            if (pagaExtra) {
                var telefono = {
                    marca: 'Samsung',
                    color: 'black'
                };
                resolve(telefono); // fulfilled
            } else {
                var razon = new Error('Sin paga extra');
                reject(razon); // reject
            }

        }
    );

    //Consumir la promesa

    let comprar=function(){
        nuevoTelefono.then(
        //La promesa se ha cumplido
        function(fulfilled){
            console.log(fulfilled);
        }
        ).catch(
        //La promesa no se ha cumplido
        function(error){
            console.log(error);
        }
        )
    }
    comprar();

Añadimos console.log:


 let pagaExtra = true;

    // Generación de la promesa
    let nuevoTelefono  = new Promise(
        function (resolve, reject) {
            if (pagaExtra) {
                var telefono = {
                    marca: 'Samsung',
                    color: 'black'
                };
                resolve(telefono); // fulfilled
            } else {
                var razon = new Error('Sin paga extra');
                reject(razon); // reject
            }

        }
    );

    //Consumir la promesa

    let comprar=function(){
        console.log("inicio");
        nuevoTelefono.then(
        //La promesa se ha cumplido
        function(fulfilled){
            console.log(fulfilled);
        }
        ).catch(
        //La promesa no se ha cumplido
        function(error){
            console.log(error);
        }
        )
        console.log("fin");
    }
    comprar();

Resultado:

inicio
fin
{marca: “Samsung”, color: “black”}

Con parámetros:

  let comprar = function (pagaExtra) {
        let nuevoTelefono = new Promise(
            function (resolve, reject) {
                if (pagaExtra) {
                    var telefono = {
                        marca: 'Samsung',
                        color: 'black'
                    };
                    resolve(telefono); // fulfilled
                } else {
                    var razon = new Error('Sin paga extra');
                    reject(razon); // reject
                }

            }
        );
        nuevoTelefono.then(
            //La promesa se ha cumplido
            function (fulfilled) {
                console.log(fulfilled);
            }
        ).catch(
            //La promesa no se ha cumplido
            function (error) {
                console.log(error);
            }
        )
    }
    comprar(true);
    comprar(false);

JS array find y findIndex

Enlaces:

https://www.w3schools.com/jsref/jsref_find.asp
https://www.w3schools.com/jsref/jsref_findindex.asp
https://appdividend.com/2018/12/17/javascript-array-find-example-array-prototype-find-tutorial/

   let num = [1, 2, 3, 4, 5, 6, 7, 8, 9];
 
  console.log(num.find(valor => valor > 5)); //Devuelve 6
    console.log(num.findIndex(valor => valor > 5)); //Devuelve 5
    let cad = "hola que tal";
    console.log(cad.split(" ").find(valor => valor.length <= 3)); //Devuelve que
    console.log(cad.split(" ").findIndex(valor => valor.length <= 3)); //Devuelve 1
    let libros = [{ titulo: "Quijote", paginas: 400 },
    { titulo: "El buscón", paginas: 300 },
    { titulo: "Orestiada", paginas: 200 }]

    console.log(libros.find(valor=>valor.paginas<250));// Devuelve {titulo: "Orestiada", paginas: 200}
    console.log(libros.findIndex(valor=>valor.paginas<250));// Devuelve 2

    //Ejercicio: crear una función que pasándole una cadena nos devuelva la primera palabra que tenga una longitud mayor de 8
    //Ejemplo: primeraLarga("hola que tal")->undefined primeraLarga("en un lugar de la mancha arquetípica y lustrosa")->arquetípica

JS array indexOf

Enlaces:
https://www.w3schools.com/jsref/jsref_indexof_array.asp

https://www.jquery-az.com/javascript-indexof-method-explained-with-6-examples-to-search-in-arrays/

console.log(num.indexOf(5)); //Devuelve 4
    console.log(num.indexOf(5,7)); //Devuelve -1

    //Ejercicio: Crear una función que pasándole una cadena y una palabra nos devuelva un array con las posiciones de esa palabra en la cadena y vacío si no está
    //Ejemplo posPalabra("la tía de la pepa va a la casa","la")->[0,3,7] porque 'la' está en la primera posición (0) de las palabras, en la 3 y en la 7

JS array every y some

Enlaces:

https://www.w3schools.com/jsref/jsref_every.asp

https://www.w3schools.com/jsref/jsref_some.asp

https://www.geeksforgeeks.org/javascript-array-prototype-every-function/

https://mariusschulz.com/blog/the-some-and-every-array-methods-in-javascript

let todosPares=num.every((valor)=>valor%2==0);
    console.log(todosPares);
    let algunPares=num.some((valor)=>valor%2==0);
    console.log(algunPares);

    let positivos=num.every((valor)=>valor>0);
    console.log(positivos);
  
    //Ejercicio: crear una función que le pasemos una cadena y nos devuelva true si todas las palabras tienen una longitud mayor o igual a 3
    //Ejemplo: masDeTres("hola que tal")->true masDeTres("Enun lugar de la mancha")->false
    //Ejercicio: crear una función que le pasemos una cadena y nos devuelva true si hay alguna palabra con una longitud mayor de 10
    //Ejemplo: masDeDiez("hola que tal")->false  masDeDiez("Mi tía es otorrinolaringóloga")->true
    

JS array reduce

Enlaces:
https://www.w3schools.com/jsref/jsref_reduce.asp
https://medium.com/@xadrijo/un-vistazo-a-la-funci%C3%B3n-reduce-en-javascript-f4459bc4e3aa

   let suma = num.reduce((total, valor, indice, array) => {
        console.log(indice + "|" + total);
        return total + valor;
    });

    console.log(suma);

    let mayor = num.reduce((total, valor, indice, array) => {

        return total < valor ? valor : total;
    });
    console.log(mayor);

let alumnos=[
    {nombre:"ana",nota:8},
    {nombre:"eva",nota:3},
    {nombre:"pep",nota:8},
    {nombre:"ot",nota:5},
]

let suma=alumnos.reduce((total,valor)=>total+valor.nota,0);
let peor=alumnos.reduce((total,valor)=>total.nota>valor.nota?valor:total);

console.log(suma);
console.log(peor);
    //Ejercicio: crear una función que le pasemos una cadena y nos devuelva la palabra más corta y si hay varias más cortas la primera alfabeticamente
    //Ejemplo cadCorta("en un lugar de la mancha")->"de"
    

JS array filter

Enlaces:

https://www.w3schools.com/jsref/jsref_filter.asp

https://ed.team/blog/javascript-filtrar-elementos-de-un-array-con-filter

https://alligator.io/js/filter-array-method/

Código de ejemplo:

 let conA=a.filter((valor,indice,array)=>{
        return valor.indexOf("a")!=-1;
    })
    console.log(conA);

    let num=[1,2,3,4,5,6,7,8,9];
    let impares=num.filter((valor)=>valor%2);
    console.log(impares);
    
    //Ejercicio: crear una función que le pasemos una cadena y un tamaño y nos devuelva una cadena eliminando las palabras de longitud menor o igual al tamaño
    //Ejemplo: limitar("En un lugar de la mancha",2)->"lugar mancha"

JS array map

Enlaces:

https://www.w3schools.com/jsref/jsref_map.asp

https://code.tutsplus.com/es/tutorials/how-to-use-map-filter-reduce-in-javascript–cms-26209

Javascript – la función map

Código de ejemplo:

let a = ["Ana", "Eva", "Pep"];
  let may=a.map((valor,indice,array)=>{
        return valor.toUpperCase();
    })
    console.log(may);

    let minmay=a.map((valor,indice,array)=>{
        return indice%2==0?valor.toUpperCase():valor.toLowerCase();
    })
    console.log(minmay);

    //Ejercicio: crear una función a la que le pasemos una cadena y nos devuelva una cadena con las palabras en el mismo orden pero invertidas
    //Ejemplo: invertirPalabras("Hola que tal")->"aloH euq lat"

JS array forEach

Nos permite recorrer los elementos de un array. Enlaces:

https://www.w3schools.com/jsref/jsref_foreach.asp

https://dmitripavlutin.com/foreach-iterate-array-javascript/

https://medium.com/front-end-weekly/3-things-you-didnt-know-about-the-foreach-loop-in-js-ff02cec465b1

Ejemplos de código:

 let a = ["Ana", "Eva", "Pep"];

    //foreach nos permtite recorrer todos los elementos de un array
    a.forEach((valor, indice, array) => {
        console.log(valor);
        console.log(indice);
        console.log(array);
    })

    let b = [];
    a.forEach((valor, indice, array) => {
        b.unshift(valor);
    })
    console.log(b);

    function menu(array) {
        let lista = "<ul>";
        array.forEach((valor) => {
            lista += "<li>" + valor + "</li>";
        })
        lista += "</ul>";
        return lista;
    }
    console.log(menu(a));

    //Ejercicio: crear una función a la que le pasemos una cadena y nos devuelva un objeto con el número de vocales existentes.
    //Ejemplo: vocales("Hola que tal")->{a:2,e:1,o:1,u:1}

Ejemplos del operador spread (…)


<script>
let values = [22, 9, 60, 12, 4, 56];
let max = Math.max(...values);
let min = Math.min(...values);
console.log(max);
console.log(min);
let arr1 = [1, 1, 2, 3];
let arr2 = [13, 21, 34];
let copia = [...arr1]; // a copy of arr1 is created
console.log(copia);
let fibArray = [0, ...arr1, 5, 8, ...arr2]; // first 10 Fibonacci numbers
console.log(fibArray);
let [a, b, c] = [22, 9, 60];
console.log(a);
[b,c]=[c,b];
console.log(b);
// ignoring values
let [h, , i] = [13, 21, 34];       // h=13, i=34
// using with rest
let [j, k, ...l] = [2, 3, 5, 8];   // j=2, k=3, l=[5,8]
let obj = { p: 1, q: true, r: "FK" };
let { p, r } = obj;             // p=1, r="FK"
let { q: flag, r: name } = obj; // Renaming: flag=true, name="FK"
let { q, t = "India" } = obj;   // q=true; t="India"
function minAndMax1(...nums) {
    return [Math.min(...nums), Math.max(...nums)];
}
let [small1, big1] = minAndMax1(22, 9, 60, 12, 4, 56);
</script>

Ejemplos de uso de spread:
https://davidwalsh.name/spread-operator
https://codeburst.io/a-simple-guide-to-destructuring-and-es6-spread-operator-e02212af5831

Extensión ejercicio Minions

Lo primero que vamos a hacer es refactorizarlo para que el ‘estado’ del juego se guarde en localStorage y no lo perdamos cuando se cierre o refresque el navegador.

Vamos a extender el ejercicio de los minions considerando las siguientes posibilidades:

Skynet

Si llegamos a comprar 30 discos duros aparecerá (y digo aparecerá porque en ésta como en las otras opciones no se verá el botón hasta que no se cumpla la condición) una opción de ‘crear virus cloud’ con un coste de 10.000 y que nos proporciona alojamiento infinito. Si lo compramos aparecerá otro powerup que es ‘Investigar IA’ que promete duplicar las líneas cada 10 segundos pero que en realidad, cuando lo pulsamos creamos una Inteligencia artificial autoconsciente que extermina a los humanos del planeta.

El objetivo cambia. Ahora tenemos que apoderarnos de todos los recursos del planeta. Podemos crear robots clicando y cada robot recopila 1kg de material cada 10 segundos. Podemos crear factorías que cuestan 1000kg de material y nos crean un robot. Los robots consumen 1kw cada 10 segundos. Tenemos una central de energía que produce 2kw cada 10 segundos. Comprar una central cuesta 100kg de material y los robots no pueden funcionar si no tienen energía eléctrica. Es decir, si tengo 10 robots pero sólo una central sólo estarán trabajando 2.  La tierra pesa  6,000,000,000,000,000,000,000,000 kg. Cuando se gasten has acabado el juego y has ganado. A no ser que exploremos otros planetas…

Conquer of the world

Si llegamos a tener contratados 100.000 minions nos aparece la posibilidad de contratar ‘Fidelidad a la empresa’. Si lo compramos los minions tienen tanta lealtad hacia la empresa que son capaces de dar su vida por ella. Al CEO de la empresa le da un siroco y tendremos un powerup que es ‘Entrenamiento militar’. A partir de aquí tendremos un ejército y cambian los objetivos.

Tendremos un territorio conquistado de 1km cuadrado. Nuestros minions soldados conquistan 1km cada 10 segundos y saquean ese territorio proporcionándonos 1000€. Podemos comprar una oficina de reclutamiento que cuesta 20000€ y  nos proporciona 1 minion cada 10 segundos. Podemos comprar:

Fusiles semiautomáticos (10€ por minion): Duplica el territorio conquistado por cada 10 segundos.

Tanque (1000€): conquista 2km cada 10 segundos

Bombardeo (10000€): conquista 4km cada 10 segundos

Armas nucleares (1.000.000 €) conquista 100km cada 10 segundos.

La superficie de la tierra es 510.000.000 km, si llegamos a esta cifra hemos conquistado el mundo y ganado.