ES6

Nuevas características

Template strings

var amigo = 'Juan';
var apellidoAmigo = 'Palomo';

console.log('Mi amigo es ' + amigo + '\ny su apellido es ' + apellidoAmigo);

console.log(`Mi amigo es ${amigo}
y su apellido es ${apellidoAmigo}`);

aka: comillas cambadas

Template strings

"var" y "let" y "const"

var usuarios;
usuarios = 34;
for(let usuarios = 0; usuarios < 4; usuarios++){
    //Tendrá los valores del 0 al 3
    console.log(usuarios);
    const nueva = '¿ const ? '
}

//34
console.log(usuarios);

"var"

var usuarios = 'paco';

for(var indice = 0; indice < 4; indice++){
    //Tendrá los valores del 0 al 3
    var usuarios = "pepe";
    console.log(usuarios); // pepe x4
}

// pepe
console.log(usuarios);

"var" 

var usuarios;
usuarios = 34;
for(var usuarios = 0; usuarios < 4; usuarios++){
    //Tendrá los valores del 0 al 3
    console.log(usuarios);
}

//4
console.log(usuarios);

Var, crea una variable que existirá incluso fuera del bloque actual

hoisting

"var" y "let"

var usuarios = 'paco';

for(var indice = 0; indice<4; indice++){
    //Tendrá los valores del 0 al 3
    let usuarios = "pepe";
    console.log(usuarios); // pepe x4
}

// paco
console.log(usuarios);

const

  • Debe inicializarse
  • No se puede asignar un valor nuevo
  • Si es un objeto los atributos pueden modificarse
//Error
const usuario;


//Se tiene que inicializar
const usuario = {nombre: 'Juan López', email: 'juanlopez@gmail.com'};


//Error
usuario = {};


//Se modifica el atributo nombre
usuario.nombre = 'Pedro Cabrera';
function darApellido(nombre, apellido="López"){
    return `${nombre} ${apellido}`;
}

darApellido('Pepe');

//Resultado Pepe López

darApellido('Pepe','García');

//Resultado Pepe García

Valores por defecto

Spread

var apellidos = ['López', 'De Los Santos'];
var masApellidos = [ 'Armados', 'Jímenez']

//Usando el método de la diapo anterior

var todos = [ apellidos , masApellidos ];
//  [ ['López','De Los Santos'],['Armandos','Jímenez'] ]

todos = [...apellidos, ...masApellidos];
//  [ 'López', 'De Los Santos', 'Armandos', 'Jímenez' ]

aka: untado(según google traductor)

Spread

var apellidos = ['López', 'De Los Santos', 'Armados', 'Jímenez'];

//Usando el método de la diapo anterior

nombreYApellidos('Juan', ...apellidos);

//Ambas son válidas

nombreYApellidos('Juan', apellidos[0], apellidos[1], apellidos[2], apellidos[3]);

aka: untado(según google traductor)

Spread

var usuario = { nombre : 'López', apellido : 'De Los Santos'};

var nuevo = {
    id : 0,
    ...usuario
}

aka: untado(según google traductor)

var usuario = { nombre : 'López', apellido : 'De Los Santos'};

var nuevo = {
    id : 0,
    nombre : usuario.nombre,
    apellido : usuario.apellido
}

Arrows

(usuario, indice ) => {
    console.log(usuario)
}

Arrows

var amigos = ['Juan', 'Antonio', 'Pepe'];

Antes

Ahora

amigos.forEach(function(amigo){
    console.log(amigo);
});
amigos.forEach((amigo) => {
    console.log(amigo)
});

//O incluso

amigos.forEach(amigo => console.log(amigo));


//Aunque si eres muy muy listo
amigos.forEach(console.log);
var amigos = ['yunior', 'miguel'];

amigos.forEach(amigo => console.log(amigo));

//O también

amigos.forEach(amigo => {
    console.log(amigo)
});

Y AHORA

Funciones nuevas de los arrays

  • La función filter( function : boolean )
  • La función find ( function : boolean )
  • La función findIndex( function : boolean )
  • La función every ( function : boolean )
  • La función some ( function : boolean )

LO ANTERIOR + ARROW FUNCTIONS

fruits = fruits.filter(fruit => fruit != 'Peras');

Borrar una fruta

fruits.some(fruit => fruit == 'Peras');

Saber si está una fruta

pos = fruits.findIndex(fruit => fruit == 'Peras');

Posición de una fruta

var fruits = [ 'Peras', 'Manzanas', 'Fresas' ];

findIndex()

var pos = users.findIndex ( function ( user ) {

 return true/false

});

El método findIndex() devuelve el índice del primer elemento de un array que cumpla con la función de prueba proporcionada. En caso contrario devuelve -1.

findIndex()

+ arrow function return implícito

var pos = users.findIndex(user => user.name === 'Miguel')

console.log(`Miguel está en la pos ${pos}`);

Le indicamos al findIndex cuando lo debe dar por encontrado devolviendo TRUE en ese caso

findIndex()

+ arrow function return implícito

var pos = users.findIndex(user => { user.name === 'Miguel' } )

console.log(`Miguel está en la pos ${pos}`);

CUIDADO ! NO FUNCIONA

findIndex()

+ arrow function return implícito

var pos = users.findIndex(user => { return user.name === 'Miguel' } )

console.log(`Miguel está en la pos ${pos}`);

AHORA SI

findIndex()

+ arrow function return implícito

var pos = users.findIndex(user => { return user.name === 'Miguel' } )

console.log(`Miguel está en la pos ${pos}`);

AHORA SI 

var pos = users.findIndex(user => user.name === 'Miguel')

console.log(`Miguel está en la pos ${pos}`);

findIndex()

+ named function

Esto también

function esMiguel(user){
  return user.name === 'Miguel'
}
var pos = users.findIndex(esMiguel)

console.log(`Miguel está en la pos ${pos}`);

findIndex()

+ named function

Y ESTOOOOO

const esMiguel = (user) => user.name === 'Miguel'

var pos = users.findIndex(esMiguel)

console.log(`Miguel está en la pos ${pos}`);

findIndex()

+ named function

exploxión de cabeza. Habrá una masterclass para esto

const esEste = (name) => (user) =>  user.name === name

var pos = users.findIndex(esEste('Miguel'))

console.log(`Miguel está en la pos ${pos}`);

findIndex()

+ named function

exploxión de cabeza. Habrá una masterclass para esto

const esEste = (name) => (user) =>  user.name === name

var pos = users.findIndex(esEste('Miguel'))

console.log(`Miguel está en la pos ${pos}`);
const esMiguel = (user) => user.name === 'Miguel'

var pos = users.findIndex(esMiguel)

console.log(`Miguel está en la pos ${pos}`);

findIndex()

+ named function

este es más sencillo

const esEste = (user, name) =>  user.name === name

var pos = users.findIndex(u => esEste(u, 'Miguel'))

console.log(`Miguel está en la pos ${pos}`);

findIndex()

var pos = users.findIndex( function (user) {
    return user.name == 'Miguel';
})

console.log(`Miguel está en la pos ${pos}`);

Le indicamos al findIndex cuando lo debe dar por encontrado devolviendo TRUE en ese caso

find() and findIndex()

var users = [];
users[0] = { name : 'Juan', age: 20 };
users[1] = { name : 'Miguel', age: 35 };

var position = users.findIndex ( function ( user ) { 
    return user.name == 'Juan';
});

console.log(position); // 0

var user = users.find( usr => usr.name == 'Juan');

console.log(user); // { name : 'Juan', age : 20 }

findIndex devuelve la posición ó -1 si no lo encuentra

find devuelve el objeto o null si no lo encuentra

filter()

var numbers = [2, 5, 5 , 5, 5 , 32, 3, 5, 12];

function noEsUnCinco ( numero ) {
    return numero != 5;
}

// Vamos a eliminar todos los 5 
var noFives = numbers.filter( noEsUnCinco );

console.log(noFives); // [2, 32, 3, 12]

Le indicamos al filter en cada vuelta quien se salva con un true

ejemplo con filter()

var numbers = [2, 5, 5 , 5, 5 , 32, 3, 5, 12];

var noFives = numbers.filter( num => num != 5 );

console.log(noFives); // [2, 32, 3, 12]

filter()

var users = [];
users[0] = { name : 'Juan', age: 20 };
users[1] = { name : 'Miguel', age: 35 };
users[2] = { name : 'Yunior', age: 23 };

var noJuan = users.filter ( user =>
    user.name != 'Juan';
);

console.log(noJuan.length); // 2

console.log(noJuan[0]); // {name:'Miguel',age:35}

map()

La función map sirve para transformar en cada vuelta al objeto que está dando la vuelta en otra cosa

function soloCorreo ( usuario ) {
   return usuario.email
}

var correos = users.map( soloCorreo );

var correos = users.map( usr => usr.email );

map()

var users = [];
users.push( { name : 'Juan', age: 20   });
users.push( { name : 'Miguel', age: 35 });
users.push( { name : 'Yunior', age: 23 });

var names = users.map( user => user.name );

console.log(names.length); // 3

console.log(names[0]); // 'Juan'

Veamos todo esto con un EJEMPLO

Tenemos un array de usuarios con nombre, correo y DNI

¿Cómo sabemos si un correo ya está en uso?
Y en caso de que ya esté en uso pedir otro correo nuevo

var users = [ 
    {
      name : 'Miguel',
      email : 'miguel@mrbug.es',
      dni : '12345678P'
    },{
      name : 'Yunior',
      email : 'yunior@getinko.com',
      dni : '12345678P'
    }
]

EJEMPLO sin usar nada de esto

var users = [{ email: 'yunior@getinko.com'}, ... ];

var correoNuevo = prompt('correo:');

var repetido = false;

for ( var i = 0 ; i < users.length ; i++ ) {
   if ( users[i].email == correoNuevo){
     repetido = true;
   }
}

while ( repetido ){
    alert(`El correo ${correoNuevo} ya estaba en uso`);
    correoNuevo = prompt('correo:');
    repetido = false;
    for ( var i = 0 ; i < users.length ; i++ ) {
       if ( users[i].email == correoNuevo){
         repetido = true;
       }
    }
}

22 líneas

Lo mismo con forEach

var users = [{ email: 'yunior@getinko.com'} ];

var correoNuevo = prompt('correo:');

var repetido = false;

users.forEach( function (user) {
   if ( user.email == correoNuevo){
     repetido = true;
   }
});

while (repetido ){
    alert(`El correo ${correoNuevo} ya estaba en uso`);
    correoNuevo = prompt('correo:');
    repetido = false;
    users.forEach( function (user) {
       if ( user.email == correoNuevo){
         repetido = true;
       }
    });
}

22 líneas

EJEMPLO usando findIndex()

var users = [{ email: 'yunior@getinko.com'}  ];

var correoNuevo = prompt('correo:');

var repetido = users.findIndex( usr => usr.email == correoNuevo) != -1;

while (repetido ){
    alert(`El correo ${correoNuevo} ya estaba en uso`);
    correoNuevo = prompt('correo:');
    repetido = users.findIndex( usr => usr.email == correoNuevo) != -1;
}

22 líneas 11 líneas

EJEMPLO usando some

var users = [{ email: 'yunior@getinko.com'}  ];

var correoNuevo = prompt('correo:');

var repetido = users.some( usr => usr.email == correoNuevo);

while (repetido ){
    alert(`El correo ${correoNuevo} ya estaba en uso`);
    correoNuevo = prompt('correo:');
    repetido = users.some( usr => usr.email == correoNuevo);
}

22 líneas 11 líneas

EJEMPLO 

var users = [ { email: 'yunior@getinko.com'} ];

var nuevoCorreo = prompt('Correo:');

while(users.some( usr => usr.email == nuevoCorreo)){
    alert(`El correo ${nuevoCorreo} ya estaba en uso`);
    nuevoCorreo = prompt('correo:');
}

22 líneas 11 líneas    8 líneas

1

2

3

4

Cómo se lee este some:

(Mientras), (alguno) de los (usuarios), tenga (como atributo email) (el mismo) correo que (el nuevoCorreo)

5

6

EJEMPLO 

var users = [ { email: 'yunior@getinko.com'} ];

var nuevoCorreo = prompt('Correo:');

while(users.some( usr => usr.email == nuevoCorreo)){
    alert(`El correo ${nuevoCorreo} ya estaba en uso`);
    nuevoCorreo = prompt('correo:');
}

22 líneas 11 líneas    8 líneas

1

2

3

4

Cómo se lee este some:

(Mientras), (alguno) de los (usuarios), tenga (como atributo email) (el mismo) correo que (el nuevoCorreo)

5

6

EJEMPLO usando map y find

var users = [ { email: 'yunior@getinko.com'} ];

var emails = users.map( usr => usr.email);

var nuevoCorreo = prompt('Correo:');

while(emails.some( e => e == nuevoCorreo)){
    alert(`El correo ${nuevoCorreo} ya estaba en uso`);
    nuevoCorreo = prompt('correo:');
}

22 líneas 11 líneas  8 líneas  10 líneas

EJEMPLO añadiendo semántica

var users = [ { email: 'yunior@getinko.com'} ];
var emails = users.map( user => user.email );

var nuevoCorreo = prompt('Correo:');

var correoRepetido = emails.some( email => email == nuevoCorreo);

while(correoRepetido){
    alert(`El correo ${nuevoCorreo} ya estaba en uso`);
    nuevoCorreo = prompt('correo:');
    correoRepetido = emails.some( email => email == nuevoCorreo);
}

22 líneas 11 líneas  10 líneas  8 líneas

12 líneas fáciles de entender

como el some puede ser la línea más "difícil" de entender, podemos almacenar su resultado en una variable que tenga un nombre más semántico

HAY MIL FORMAS

Todas funcionan, pero intenta que tú código pueda ser entendido por otra persona cuando lo lea, porque probablemente dentro de 5 meses cuando tú mismo leas ese código, será todo un reto descifrarlo si no le das semántica ;) 

 

De veras, tú yo futuro te lo agradecerá eternamente.

¡Ahora a trabajar!

Ejercicio 1

Tenemos un array con múltiples objetos que incluyen un atributo con un código postal. Crea un array que incluya sólo los códigos postales. 

let provincias = [
    {nombre: 'Madrid', codigoPostal: '28223'},
    {nombre: 'Albacete', codigoPostal: '02653'},
    {nombre: 'Madrid', codigoPostal: '28223'},
    {nombre: 'Las Palmas', codigoPostal: '35118'},
    {nombre: 'Barcelona', codigoPostal: '08480'},
    {nombre: 'Madrid', codigoPostal: '28001'},
    {nombre: 'Barcelona', codigoPostal: '08480'},
];

Deberías de tardar aproximadamente 1 minuto en hacer este ejercicio ;) #ModeNinja

Ejercicio 2

Tenemos una serie de servidores que almacenan diferentes tipos de archivos. Muestra un array con los nodos que almacenan archivos mp4 y png. 

let servidores = [
    {
        almacenan: '.mp4',
        nodos: ['ordenador1','ordenador2','ordenador3']
    },{
        almacenan: '.mp3',
        nodos: ['ordenador2','ordenador5']
    },{
        almacenan: '.json',
        nodos: ['ordenador1','ordenador4','ordenador6']
    },{
        almacenan: '.png',
        nodos: ['ordenador1', 'ordenador4']
    },{
        almacenan: '.avi',
        nodos: ['ordenador1','ordenador7']
    },
];

Habían repetidos en los resultados de los ejercicios verdad ¿?

Y si ahora te pido, que de los arrays resultantes, elimines los repetidos, ¿sabrías hacerlo?

YO TAMPOCO !! Y LLEVO 8 AÑOS PROGRAMANDO !! 

¡A trabajar otra vez!

Ejercicio 1

En la base de datos de nuestra empresa hay usuarios con correos acabados en "gmail.com". Encuéntralos y descártalos, son un problema.

let correos = [
    {usuario: 'JoseElMaquina', email: 'jose.el.maquina@gmail.com'},
    {usuario: 'PepeElCorrecto', email: 'pepe@corecto.com'},
    {usuario: 'JoseLuisDaBest', email: 'joseluis@dabest.com.eu'},
    {usuario: 'EsteEstaBien', email: 'este@bien.com'},
    {usuario: 'Elcarterista', email: 'elcarterista20@gmail.com'}
];

Métodos de las strings

Ejercicio 2

Una empresa de robótica tiene diferentes modelos de procesadores y quiere mostrarlos en su web. Cada procesador tiene un atributo que indica la cantidad de operaciones por segundo y otro que indica la tasa de fallos en tanto por ciento. Genera un nuevo array dónde elimines a los que tengan un porcentaje de fallos mayor al 50%.

let procesadores = [
    {modelo: 'pentiumII', operacionesPorSegundo: 10500, tasaDeFallos: 15},
    {modelo: 'i7', operacionesPorSegundo: 20000, tasaDeFallos: 60},
    {modelo: '8086', operacionesPorSegundo: 30, tasaDeFallos: 26.3},
    {modelo: 'i3', operacionesPorSegundo: 11389, tasaDeFallos: 58.4},
    {modelo: 'i5', operacionesPorSegundo: 15000, tasaDeFallos: 10},
    {modelo: 'celeron', operacionesPorSegundo: 200, tasaDeFallos: 80}
]

Ejercicio 3

En nuestra página de alojamientos, los usuarios valoran el sitio donde se han quedado dándole una puntuación del 1 al 10. El problema es que no sabemos la media de valoración de cada alojamiento. Crea un atributo "media" para cada alojamiento e incluye su valor.

let alojamientos = [
    {
        nombre: 'Bahía Feliz',
        comentarios: [
            {
                usuario: 'Franz Kartofen',
                comentario: 'Gut',
                valoracion: 6
            },
            {
                usuario: 'Ferdinando',
                comentario: 'Muy bueno',
                valoracion: 9
            },
            {
                usuario: 'Roberthino',
                comentario: 'Molto malo',
                valoracion: 3
            },    
        ]
    },
    {
        nombre: 'Nacho Sol',
        comentarios: [
            {
                usuario: 'Manolín',
                comentario: 'Estuvo chido',
                valoracion: 10
            },
            {
                usuario: 'Solete',
                comentario: 'Muy sucio',
                valoracion: 2
            }    
        ]
    }
    
]

¿Reduce?

Buen ejemplo

Ejemplo sencillo y tipico

const reduced = [1, 2, 3, 4].reduce((prev, next) => prev + next, 0);

// 10
console.log(reduced);

Ejemplo personal


const items = [
  { id: '🍔', name: 'Super Burger', price: 3.99 },
  { id: '🍟', name: 'Jumbo Fries', price: 1.99 },
  { id: '🥤', name: 'Big Slurp', price: 2.99 }
];

const total = items.reduce((prev, next) => prev + next.price, 0);

console.log(`Total: ${total}`);

reduce function

items.reduce( (prev, current) => prev + current.price,  0);

Ejercicio de antes sin reduce

alojamientos = alojamientos.map( alojamiento => {
​
    let result = 0;
    alojamiento.comentarios.forEach( comentario => {
        result += comentario.valoracion;
    });
    let media = result / comentarios.length;
​
    return { 
        nombre : alojamiento.nombre,
        comentarios : alojamientos.comentarios,
        media : media
​
    }
​
})

Reduce ejemplo

alojamientos.map( alojamiento => {
    const totalComentarios = alojamiento.comentarios.length;
    return { 
        nombre : alojamiento.nombre,
        comentarios : alojamientos.comentarios,
        media : alojamiento.comentarios.reduce( (p, c)=> p + c.valoracion , 0 ) / totalComentarios

    }
})
alojamientos.map( alojamiento => {
   const totalComentarios = alojamiento.comentarios.length;
   const media = alojamiento.comentarios.reduce( (p, c)=> p + c.valoracion , 0 ) / totalComentarios
   return { 
      ...alojamiento,
      media
    }
})

Live coding

Ejercicio 2

Devuelve un array de strings con los nombres de todas las extensiones de ficheros que se pueden leer.

let servidores = [
    {
        almacenan: '.mp4',
        nodos: ['ordenador1','ordenador2','ordenador3']
    },{
        almacenan: '.mp3',
        nodos: ['ordenador2','ordenador5']
    },{
        almacenan: '.json',
        nodos: ['ordenador1','ordenador4','ordenador6']
    },{
        almacenan: '.png',
        nodos: ['ordenador1', 'ordenador4']
    },{
        almacenan: '.avi',
        nodos: ['ordenador1','ordenador7']
    },
];

Ejercicio En grupos

Refactoricen y mejoren el código del piedra papel tijeras ahora que tenemos mejorados nuestros superpoderes

Ejercicio En grupos

Crea un juego de rol por turnos y con dado, usa todo lo que hemos repasado hoy y más.

Primero pídele los datos al usuario sobre su personaje, mínimo ha de indicar nombre, edad, sexo y escoger entre uno de estos tipos ( "orco", "mago", "humano" , "elfo")

Luego, guarda en un array una serie de situaciones que pueden ocurrir durante la historia, una situación tiene mínimo los siguientes attr:


   texto :  string,
   minimo_dado : number,
   resultado_si_bien : string,
   resultado_si_mal : string

 

y realiza un juego de al menos 5 turnos donde se va creando una historia de manera random escogiendo distintas situaciones cada vez que se arranca el juego.

En cada turno deberás leerle al usuario el texto de la situación actual y decirle que vas a tirar un dado, le indicarás el resultado de tirar ese dado y le leerás el texto resultante oportuno. 


Una vez tengas estos mínimo, añádele todos los extras que se te ocurran a tu juego, por ejemplo, añade características al player de atq, y defensa y juega con la suma de su atq + lo que sale en el dado y por ejemplo en caso de ganar una situación le puedes aumentar sus stats, etc etc

Pedir por pantalla con prompt() o hacerlo con inputs y clicks

Muchas funciones y semánticas, semántica sieeempre

SPEGC Agosto 2022 Full Stack. Javascript Quinto día ES6

By Yunior González Santana

SPEGC Agosto 2022 Full Stack. Javascript Quinto día ES6

Quinto día de Javascript del curso "Fullstack" online de la SPEGC 2022 Agosto

  • 203

More from Yunior González Santana