ECMAScript6
Que es ECMAScript6 (ES6)
Es la evolucion generada en el años 2015 del lenguaje JavaScript. En 1996 nace Netscap un navegador basado en el lenguaje JavaScript auque en ese momento se llamó LiveScript, pero con el paso de los años cuando java tenia tanta popularidad decidieron llamarlo javaScript nombre que ha perdurado hasta el moemnto.
Igual que W3c se encarga de los estandares web. ECMA International se encarga de los estandares y desarrollo de JavaScript. En su evolución sexta nos ha traido cosas tan interesantes como:
- Template String
- Variables con let y constant con scope a nivel de bloque de código.
- Funciones arrow o flecha
- Parámetros por defecto.
- Desestructuración de arrys u objetos con Destructuring assignment
- Spread Operator (...).
- Clases
- Promesas
Insertar textos con ES6 (template String)
ES6 nos facilita una solución elegante y sencilla para inyectar variables en textos.
Hasta ahora cuando deseavamos crear cadenas de texto e insertarle varialbes necesitavamos hacerlo de la siguiente forma:
- Insertando el primer fragnmento de texto entre comillas
- Insertamos un + la variable y otro +
- Insertamos el siguiente fragmento de texto
Todo esto se complica y mucho cuando entran dentro del texto comillas simples y dobles. Supongo que en muchas ocasiones os habreis enfrentado a rompecabezas con comillas simples, comillas dobles, otra vez simples. Es una locura en ocasiones saber donde se cierran o no unas comillas:
var lista = new Array("uno", "dos", "tres","cuatro", "cinco" );
var options = '';
for(var i = 0; i < lista.length; i++){
options += '<option value="'+lista[i] +'" />';
document.getElementById('ListaD').innerHTML = options;
}
Ahora con ES6 es más sencillo:
- Abriremos las comillas pero con ` (simbolo situado al lado derecho de la p en el teclado español).
- Cada vez que deseemos concatenar una variable pondremos el signo $ y en tre corchetes nuesrta varialbe.
${miVar}
- Ten en cuenta que cuando inyectes un texto con document.write y hagas un enter dentro del template String este lo considerá como un <br> en el texto resultante.)
Este es el jemplo anterior utilizando template string
var lista = new Array("uno", "dos", "tres","cuatro", "cinco" );
var options = '';
for(var i = 0; i < lista.length; i ++ ){
options += `<option value="${lista[i]}" />`;
}
console.info(options) ;
En el siguiente ejemplo el texto lo inyecté con jquery utilizando append()
var uno = 1, dos =2, tres =3;
$(".templateString").append(`Esto es un texto de ES6 utilizando los template String,
la variable uno es ${uno},
la variable dos es ${dos} y
por ultimo en nuestra variable tre el resultado será de ${tres}, asi lo hemos hecho`);
/***** resultado ****///
Funciones de flecha de JavaScript o arrow
En la version ES6 (ECMAScript 2015), se realizo una evolución de javaScript para la que existen detractores y partidarios las funciones en flecha. Si le pillas el tranquillo es una forma de ahorrarte unas líneas de código cosa que los motores de busqueda te agradecerán, a mayor velocidad de carga con buen contenido, mejor posicionamiento.
Una función tal y como conecmos has ahora se hace utilizando la palabra reservada function, nombrando unos paramatros y crando un código.
function MiFuncion (param1,param2){
return param1+param2;
}
document.getElementById("Pobadorddd").innerHTML =MiFuncion(1500,200);
Con ES6 las funciones pueden simplificarse así
var MyFuncion = (param1 , param2) =>{
code...
return param1 + param2;
}
document.getElementById("Pobadorddd").innerHTML = MyFuncion(1500,200);
En el caso que una función solo tenga una línea de código podemos evitar porner el return y los corchetes;
var MyFuncion = (param1 , param2) => param1 + param2;
document.getElementById("Pobadorddd").innerHTML = MyFuncion(1500,200);
Una función anónima sería ásí pondriamos directamente unos parenteris en los que podemos introducir los parametros y la flecha (params)=>:
$(document).click(()=>alert("carga"));
Si no deseamos pasarle parámetros a la función
var MyFuncion = () => 8900 + 89;
document.getElementById("Pobadorddd").innerHTML = MyFuncion();
Pasar un array a una función de flecha
var miArray = ( miArray1=[1,2,3,4,5,6,7,8,9,10] )=>{
$("div").append( $("<p></p>"));
for(let i =0; i< miArray1.length ; i++){
$("div>p").append(miArray1[i] + "<br>");
}
}
miArray();
Funciones flecha anónimas
Para este ejemplo usaremos la función .map creda para modificar arrays. Las funciones flechas cuando actuan como una función anónima se generan así. parámetro => code....
var miArray2=[4,6,9,7,8,6,3,8];
var miArray3= miArray2.map( n => n*2);
$("#dos").after(miArray3[1]);
Parametros por defecto
Antes de ES6 caundo declarabamos una función podiamos añadirle una serie de parámetros. Cuando indicabamos que una función tenía un parametro cada vez que la llamavamos tenias que indicar el valor de ese parámetro.
En ECMAScript 6 aparecen los parametros por defecto. Puedes indicarle que un parámetro si no se ha rellmado su valor será uno determinado por defecto cuando se cree.
function myFunction( param1, param2, param3 = "valor por defecto"){
code...
}
function miParamporDefecto(nombre,apellidos,pais="España"){
return `mi nombre es ${nombre}, mis apellidos son ${apellidos} y nací en ${pais}`;
}
$(".paramXdefetp").html(miParamporDefecto("David", "Giménez Plaza"));
Tambien lo podemos hacer con una función flecha.
miParamporDefecto=(nombre,apellidos,pais="España")=>`mi nombre es ${nombre}, mis apellidos son ${apellidos} y nací en ${pais}`;
document.write (miParamporDefecto("David", "Giménez Plaza"));
Desctructurar arrays u Objetos (Destructuring assignment)
La sintaxis de destructuring assignment es una expresión que hace posible la extracción de datos de arrays u objetos, para ello generamos una variable por cada posición del literal o del arreglo.
Destructurar Arrays
Así accediamos a un valor de un array hasta ahora:
let misDatos=["David", "Gimenez Plaza", "https://cvdgp.blogspot.com"];
console.log(misDatos[2]);
Así lo haremos con destructuring assignment:
- Declaramos un array como siempre.
- Ahora con let o const creamos un array de varialbes y lo igualamos al array previamente creado. Con ello estamos igualando cada varible creada a una de las posiones del array, hacemos algo parecido a un literal o varialbe objeto.
/*creaamos el array*/
const miArray = ["David", "Gimenez Plaza", "https://cvdgp.blogspot.com"];
/*igualamos un array de variables a nuestro array creado previamente*/
const [nombre,apellidos,web]=miArray;
document.write(`Mi nombre es ${nombre} ,mis apellidos son ${apellidos} y mi blog es ${web}. `);
Igual que podriamos poner parametros por defecto en este caso podemos dar valores por defecto a nuestro array. En el siguiente ejemplo si no definimos la tematica del blog por defecto cargara no definada.
const miArray = ["David", "Gimenez Plaza", "https://cvdgp.blogspot.com"];
const [nombre,apellidos,web, tematicaBlog = "no definido"]=miArray;
document.write(`Mi nombre es ${nombre} ,mis apellidos son ${apellidos} y mi blog es ${web} y el tema elegido para el blog es ${tematicaBlog} `);
/*********resultado****/
Mi nombre es David, mis apellidos son Gimenez Plaza y mi blog es https://cvdgp.blogspot.com y el tema elegido para el blog es no definido
Si desemoa no llamar una de las posines del array tenemos que dejar un espacio vacion entre dos comas
const miArray = ["David", "Gimenez Plaza", "https://cvdgp.blogspot.com"];
const [nombre , , web, tematicaBlog = "no definido"]=miArray;
document.write(`Mi nombre es ${nombre} , mi blog es ${web} y el tema elegido para el blog es ${tematicaBlog} `);
/*********resultado****/
Mi nombre es David, mis apellidos son Gimenez Plaza y mi blog es https://cvdgp.blogspot.com y el tema elegido para el blog es no definido
Destructuración de objetos
La verdad es que podemos hacerlo de la misma foma que con los arrays. Cuando destructuramos un objeto, a diferencia de los array destructurados, no hace falta que nombremos todos regitros. Podemos saltar registros sin tener que dejar el espacio con comas.
let alumno={
nombre: "David",
apellidos:"Gimenez Plaza",
edad: 42,
blog: "https://cvdgp.blogspot.com",
profesion: "administrativo"
};
let { nombre, blog, profesion } = alumno;
document.write( `el blog ${blog} es de ${nombre}`);
Es muy normar que desestructuremos un objeto pasandolo por parámetros a una funcion arrow o flecha.
let alumno = {
nombre: "David",
apellidos:"Gimenez Plaza",
edad: 42,
blog: "https://cvdgp.blogspot.com",
profesion: "administrativo"
}
const cargaInformacion = ( { nombre, blog, profesion }) => console.log(`Mi nimbre es ${nombre}, visita mi blog en ${blog}. Soy ${profesion} y aprendo programación todo el tiempo que tengo.`);
cargaInformacion(alumno);
Spread Operator ...
Es un operador de ES6 en el que pondremos 3 puntos seguidos (...) y nos puede ser muy útil para:
- Concatenar arrays
- Convertir cadenas de texto en arrays de palabras
- Convertir arrays en cadena de texto o String.
let arr=[1,2,3,4,5,6];
let arr2=[7,8,9,10];
let text= "texto";
let texto2 = ["Esto", "es", "un", "array"];
console.log([ ...arr , ...arr2]); //[1,2,3,4,5,6,7,8,9,10]
console.info([ ...text]); //[ "t", "e", "x", "t", "o" ]
console.log( ...texto2); // Esto es un array
Clases JavaScript
Las clases en JS se nombran con la palabra reservada class. El uso de clases ha sido utilizado por otros lenguajes de programación para la creación de objetos desde hace muchos años. En JS ya podiamos crear objeto utilizando los literales o variables objeto, pero en ES6 han decido establecer una sintaxis más clara para la creación de objetos, utilizando las clases para tal fin. En la actualidad existen bibliotecas de JavaScript como React 
que utilizan las calses para organizar mucho mejor el código.
Tal y como ya sabeis un objeto se compone de propiedades y métodos. Anteriormente ya hemos visto cómo crear objetos literales con métodos y propiedades
Utilizaremos la palabra reservada constructor para crear las propiedades de nuestro objeto y crearemos los métodos igual que cuando nombramos una función pero sin utilizar la palabra reservada function:
class formulario{
constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro){
this.nombre = nombre;
this.apellido1 = apellido1;
this.apellido2 = apellido2;
this.fehcaNacimiento = fehcaNacimiento;
this.fechaRegistro = new Date();
}
metodoImpresor(){
return `El nombre es :${this.nombre}
El primer apellido es ${this.apellido1}
el segundo apellido es ${this.apellido2}
nacido en fecha ${this.fehcaNacimiento}
has generado el registro con fecha ${this.fechaRegistro}`;
}
}
const formularion1 = new formulario('David',"Gimenez", "Plaza", "17/12/1977");
console.info(formularion1.metodoImpresor());
Cómo heredar propiedades de una clase a otra
Una de las propiedades de POO (programación orientada a objeto) es la herencia. La herencia es la capacidad que tiene un objeto de adquirir todas las propiedades y métodos de otro anteriormente creado.
Para heredar de un objeto utilizaremos la palabra reserbada extends al crear la clase. Y si deseamos cargar nuevas propiedades se las incluiremos en el constructor.
class formularioTelefonia extends formulario{
constructor(producto,PVP){
this.producto = producto;
this.PVP = PVP
}
}
Cuando deseemos heredar propiedades le pasaremos por parámetros el nombre de las propiedades y dentro del constructor utilizaremos la palabra reservada super(propiedadHeredad,propiedadHerdada)
class formulario2 extends formulario{
constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro,articulo,pvp){
super(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro);
this.articulo = articulo;
this.pvp = pvp;
}
}
Si deseamos sobre escribir un método, lo nombraremos nuevamente en nuestra clase hija y lo modifificaremos a nuestro antojo.
class formulario2 extends formulario{
constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro,articulo,pvp){
super(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro);
this.articulo = articulo;
this.pvp = pvp;
}
/**sobre escribir un metodo existente**/
metodoImpresor(){
txt = `el producto que has comprado es : ${this.articulo} <br> y tiene un precio de ${this.pvp}`;
return txt;
}
}
Si lo que deseamos es heredar las propiedades de un método ya creado y utilizarlo en uno nuevo. introduciendosuper.MetodoObjPadre();
class formulario2 extends formulario{
constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro,articulo,pvp){
super(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro);
this.articulo = articulo;
this.pvp = pvp;
}
/**crear un nuevo metodo**/
metodoImpresor2(){
let txt= super.metodoImpresor();
txt += `el producto que has comprado es : ${this.articulo} <br> y tiene un precio de ${this.pvp}`;
return txt;
}
}
El ejemplo completo sería el siguiente:
<script type="text/javascript">
class formulario{
constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro){
this.nombre = nombre;
this.apellido1 = apellido1;
this.apellido2 = apellido2;
this.fehcaNacimiento = fehcaNacimiento;
this.fechaRegistro = (new Date()).toDateString();
}
metodoImpresor(){
return `El nombre es :${this.nombre} <br>
El primer apellido es ${this.apellido1} <br>
el segundo apellido es ${this.apellido2}<br>
nacido en fecha ${this.fehcaNacimiento} <br>
has generado el registro con fecha ${this.fechaRegistro} <br>`;
}
}
class formulario2 extends formulario{
constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro,articulo,pvp){
super(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro);
this.articulo = articulo;
this.pvp = pvp;
}
/**crear un nuevo metodo**/
metodoImpresor2(){
let txt= super.metodoImpresor();
txt += `el producto que has comprado es : ${this.articulo} <br> y tiene un precio de ${this.pvp}`;
return txt;
}
}
var ventas_Movil = new formulario2 ("Francisco", "Gomez","Rubio","15/10/1985","undefined" ,"tablet", 200 );
//document.write(ventas_Movil.metodoImpresor());
document.write(ventas_Movil.metodoImpresor2());
</script>
Promesas Promise()
Qué son las promesas
Es un objeto que Js en su version ES6 utiliza para valorar el estado de una conexión asincrona (AJAX). Una promesa se compone de 3 estados y no podrá tener núnca dos estado al mismo tiempo:
- Pendiente
- Resuleta
- Rechazada
En primer lugar construimos uno objeto promesa al que pasamos por parametros una función anónima que contine dos parámetros resolve y recject
<script type="text/javascript">
let promesa = new Promise((resolve,reject)=>{
});
</script>
Antes dijimos que el objeto promise recibe dos parametros:
- resolve: Nos regresa el resultado cuando nuestra conexión a sido correcta.
- reject: Nos regresa el error ocurrido en nuestra conexion ajax.
let promesa = new Promise((resolve,reject) =>{
if(true){
resolve("Promesa resuelta");
}else{
reject("error al resolver la promesa");
}
});
Una vez creado el objeto promesa y cargadas los valores de las propiedades rosolve y recject que hemos pasado por parámetos, recuperaremos esos valores con los métodos:
then(response): Esta variable recivira por parámetros response que es el valor dado anteriormente a resolve- catch(error): Recibe por parámetros el objeto
error que almacena reject.
/*instanciamos un objeto Promise*//*instanciamos un objeto Promise*/
let promesa = new Promise((resolve, reject)=>{
if(false){
resolve("Promesa resuelta");
}else{
reject("error al resolver la promesa");
}
});
/*cargamos los métodos then y catch *//*cargamos los métodos then y catch */
promesa
.then((response)=> console.log(`resolve : ${response}`))
.catch((error)=>console.log(`error: ${error}`));
Tal y como hemos dicho antes una promesa tiene tres estados: en proceso , resuelto (resolve) y error (reject). Pero no podra estar en dos estado a la vez primero estará en proceso y posteriormente estará resuelta o caerá en error. Esto la combierte en elemento perfecto para los envios de formularios con AJAX. Supongo que habreis visto los tipicos formularios que al enviarlos carga el circulo de carga y luego aparece como enviado o como error de envío.
Ejemplo de promesa con tres estados
En el siguiente ejemplo hemos utilizado un temporizador para que se vea el trascurso de los estado en un div con id contenedorCod .
let promesa = new Promise ((resolve, reject)=>{
/*estado de carga*
$("#contenedorCod").html("cargando....");
/*carga ok*
setTimeout(()=> resolve("carga Correcta"),2000);
/*carga ko*
setTimeout(()=> reject("error carga"),5000);
});
promesa
.then((response) => $("#contenedorCod").html(`resolve : ${response}`))
.catch((error) =>$("#contenedorCod").html(`error: ${error}`));
Insertar textos con ES6 (template String)
ES6 nos facilita una solución elegante y sencilla para inyectar variables en textos.
Hasta ahora cuando deseavamos crear cadenas de texto e insertarle varialbes necesitavamos hacerlo de la siguiente forma:
- Insertando el primer fragnmento de texto entre comillas
- Insertamos un + la variable y otro +
- Insertamos el siguiente fragmento de texto
var lista = new Array("uno", "dos", "tres","cuatro", "cinco" );
var options = '';
for(var i = 0; i < lista.length; i++){
options += '<option value="'+lista[i] +'" />';
document.getElementById('ListaD').innerHTML = options;
}
Ahora con ES6 es más sencillo:
- Abriremos las comillas pero con ` (simbolo situado al lado derecho de la p en el teclado español).
- Cada vez que deseemos concatenar una variable pondremos el signo $ y en tre corchetes nuesrta varialbe.
${miVar} - Ten en cuenta que cuando inyectes un texto con document.write y hagas un enter dentro del template String este lo considerá como un <br> en el texto resultante.)
Este es el jemplo anterior utilizando template string
var lista = new Array("uno", "dos", "tres","cuatro", "cinco" );
var options = '';
for(var i = 0; i < lista.length; i ++ ){
options += `<option value="${lista[i]}" />`;
}
console.info(options) ;
En el siguiente ejemplo el texto lo inyecté con jquery utilizando append()
var uno = 1, dos =2, tres =3;
$(".templateString").append(`Esto es un texto de ES6 utilizando los template String,
la variable uno es ${uno},
la variable dos es ${dos} y
por ultimo en nuestra variable tre el resultado será de ${tres}, asi lo hemos hecho`);
/***** resultado ****///
Funciones de flecha de JavaScript o arrow
En la version ES6 (ECMAScript 2015), se realizo una evolución de javaScript para la que existen detractores y partidarios las funciones en flecha. Si le pillas el tranquillo es una forma de ahorrarte unas líneas de código cosa que los motores de busqueda te agradecerán, a mayor velocidad de carga con buen contenido, mejor posicionamiento.
Una función tal y como conecmos has ahora se hace utilizando la palabra reservada function, nombrando unos paramatros y crando un código.
function MiFuncion (param1,param2){
return param1+param2;
}
document.getElementById("Pobadorddd").innerHTML =MiFuncion(1500,200);
Con ES6 las funciones pueden simplificarse así
var MyFuncion = (param1 , param2) =>{
code...
return param1 + param2;
}
document.getElementById("Pobadorddd").innerHTML = MyFuncion(1500,200);
En el caso que una función solo tenga una línea de código podemos evitar porner el return y los corchetes;
var MyFuncion = (param1 , param2) => param1 + param2;
document.getElementById("Pobadorddd").innerHTML = MyFuncion(1500,200);
Una función anónima sería ásí pondriamos directamente unos parenteris en los que podemos introducir los parametros y la flecha (params)=>:
$(document).click(()=>alert("carga"));
Si no deseamos pasarle parámetros a la función
var MyFuncion = () => 8900 + 89;
document.getElementById("Pobadorddd").innerHTML = MyFuncion();
Pasar un array a una función de flecha
var miArray = ( miArray1=[1,2,3,4,5,6,7,8,9,10] )=>{
$("div").append( $("<p></p>"));
for(let i =0; i< miArray1.length ; i++){
$("div>p").append(miArray1[i] + "<br>");
}
}
miArray();
Funciones flecha anónimas
Para este ejemplo usaremos la función .map creda para modificar arrays. Las funciones flechas cuando actuan como una función anónima se generan así. parámetro => code....
var miArray2=[4,6,9,7,8,6,3,8];
var miArray3= miArray2.map( n => n*2);
$("#dos").after(miArray3[1]);
Parametros por defecto
Antes de ES6 caundo declarabamos una función podiamos añadirle una serie de parámetros. Cuando indicabamos que una función tenía un parametro cada vez que la llamavamos tenias que indicar el valor de ese parámetro.
En ECMAScript 6 aparecen los parametros por defecto. Puedes indicarle que un parámetro si no se ha rellmado su valor será uno determinado por defecto cuando se cree.
function myFunction( param1, param2, param3 = "valor por defecto"){
code...
}
function myFunction( param1, param2, param3 = "valor por defecto"){
code...
}
function miParamporDefecto(nombre,apellidos,pais="España"){
return `mi nombre es ${nombre}, mis apellidos son ${apellidos} y nací en ${pais}`;
}
$(".paramXdefetp").html(miParamporDefecto("David", "Giménez Plaza"));
Tambien lo podemos hacer con una función flecha.
miParamporDefecto=(nombre,apellidos,pais="España")=>`mi nombre es ${nombre}, mis apellidos son ${apellidos} y nací en ${pais}`;
document.write (miParamporDefecto("David", "Giménez Plaza"));
Desctructurar arrays u Objetos (Destructuring assignment)
La sintaxis de destructuring assignment es una expresión que hace posible la extracción de datos de arrays u objetos, para ello generamos una variable por cada posición del literal o del arreglo.
Destructurar Arrays
Así accediamos a un valor de un array hasta ahora:
let misDatos=["David", "Gimenez Plaza", "https://cvdgp.blogspot.com"];
console.log(misDatos[2]);
Así lo haremos con destructuring assignment:
- Declaramos un array como siempre.
- Ahora con let o const creamos un array de varialbes y lo igualamos al array previamente creado. Con ello estamos igualando cada varible creada a una de las posiones del array, hacemos algo parecido a un literal o varialbe objeto.
/*creaamos el array*/
const miArray = ["David", "Gimenez Plaza", "https://cvdgp.blogspot.com"];
/*igualamos un array de variables a nuestro array creado previamente*/
const [nombre,apellidos,web]=miArray;
document.write(`Mi nombre es ${nombre} ,mis apellidos son ${apellidos} y mi blog es ${web}. `);
Igual que podriamos poner parametros por defecto en este caso podemos dar valores por defecto a nuestro array. En el siguiente ejemplo si no definimos la tematica del blog por defecto cargara no definada.
const miArray = ["David", "Gimenez Plaza", "https://cvdgp.blogspot.com"];
const [nombre,apellidos,web, tematicaBlog = "no definido"]=miArray;
document.write(`Mi nombre es ${nombre} ,mis apellidos son ${apellidos} y mi blog es ${web} y el tema elegido para el blog es ${tematicaBlog} `);
/*********resultado****/
Mi nombre es David, mis apellidos son Gimenez Plaza y mi blog es https://cvdgp.blogspot.com y el tema elegido para el blog es no definido
Si desemoa no llamar una de las posines del array tenemos que dejar un espacio vacion entre dos comas
const miArray = ["David", "Gimenez Plaza", "https://cvdgp.blogspot.com"];
const [nombre , , web, tematicaBlog = "no definido"]=miArray;
document.write(`Mi nombre es ${nombre} , mi blog es ${web} y el tema elegido para el blog es ${tematicaBlog} `);
/*********resultado****/
Mi nombre es David, mis apellidos son Gimenez Plaza y mi blog es https://cvdgp.blogspot.com y el tema elegido para el blog es no definido
Destructuración de objetos
La verdad es que podemos hacerlo de la misma foma que con los arrays. Cuando destructuramos un objeto, a diferencia de los array destructurados, no hace falta que nombremos todos regitros. Podemos saltar registros sin tener que dejar el espacio con comas.
let alumno={
nombre: "David",
apellidos:"Gimenez Plaza",
edad: 42,
blog: "https://cvdgp.blogspot.com",
profesion: "administrativo"
};
let { nombre, blog, profesion } = alumno;
document.write( `el blog ${blog} es de ${nombre}`);
Es muy normar que desestructuremos un objeto pasandolo por parámetros a una funcion arrow o flecha.
let alumno = {
nombre: "David",
apellidos:"Gimenez Plaza",
edad: 42,
blog: "https://cvdgp.blogspot.com",
profesion: "administrativo"
}
const cargaInformacion = ( { nombre, blog, profesion }) => console.log(`Mi nimbre es ${nombre}, visita mi blog en ${blog}. Soy ${profesion} y aprendo programación todo el tiempo que tengo.`);
cargaInformacion(alumno);
Spread Operator ...
Es un operador de ES6 en el que pondremos 3 puntos seguidos (...) y nos puede ser muy útil para:
- Concatenar arrays
- Convertir cadenas de texto en arrays de palabras
- Convertir arrays en cadena de texto o String.
let arr=[1,2,3,4,5,6];
let arr2=[7,8,9,10];
let text= "texto";
let texto2 = ["Esto", "es", "un", "array"];
console.log([ ...arr , ...arr2]); //[1,2,3,4,5,6,7,8,9,10]
console.info([ ...text]); //[ "t", "e", "x", "t", "o" ]
console.log( ...texto2); // Esto es un array
let arr=[1,2,3,4,5,6];
let arr2=[7,8,9,10];
let text= "texto";
let texto2 = ["Esto", "es", "un", "array"];
console.log([ ...arr , ...arr2]); //[1,2,3,4,5,6,7,8,9,10]
console.info([ ...text]); //[ "t", "e", "x", "t", "o" ]
console.log( ...texto2); // Esto es un array
Clases JavaScript
Las clases en JS se nombran con la palabra reservada class. El uso de clases ha sido utilizado por otros lenguajes de programación para la creación de objetos desde hace muchos años. En JS ya podiamos crear objeto utilizando los literales o variables objeto, pero en ES6 han decido establecer una sintaxis más clara para la creación de objetos, utilizando las clases para tal fin. En la actualidad existen bibliotecas de JavaScript como React que utilizan las calses para organizar mucho mejor el código.
Tal y como ya sabeis un objeto se compone de propiedades y métodos. Anteriormente ya hemos visto cómo crear objetos literales con métodos y propiedades
class. El uso de clases ha sido utilizado por otros lenguajes de programación para la creación de objetos desde hace muchos años. En JS ya podiamos crear objeto utilizando los literales o variables objeto, pero en ES6 han decido establecer una sintaxis más clara para la creación de objetos, utilizando las clases para tal fin. En la actualidad existen bibliotecas de JavaScript como React que utilizan las calses para organizar mucho mejor el código.Utilizaremos la palabra reservada constructor para crear las propiedades de nuestro objeto y crearemos los métodos igual que cuando nombramos una función pero sin utilizar la palabra reservada function:
class formulario{
constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro){
this.nombre = nombre;
this.apellido1 = apellido1;
this.apellido2 = apellido2;
this.fehcaNacimiento = fehcaNacimiento;
this.fechaRegistro = new Date();
}
metodoImpresor(){
return `El nombre es :${this.nombre}
El primer apellido es ${this.apellido1}
el segundo apellido es ${this.apellido2}
nacido en fecha ${this.fehcaNacimiento}
has generado el registro con fecha ${this.fechaRegistro}`;
}
}
const formularion1 = new formulario('David',"Gimenez", "Plaza", "17/12/1977");
console.info(formularion1.metodoImpresor());
Cómo heredar propiedades de una clase a otra
Una de las propiedades de POO (programación orientada a objeto) es la herencia. La herencia es la capacidad que tiene un objeto de adquirir todas las propiedades y métodos de otro anteriormente creado.
Para heredar de un objeto utilizaremos la palabra reserbada extends al crear la clase. Y si deseamos cargar nuevas propiedades se las incluiremos en el constructor.
class formularioTelefonia extends formulario{
constructor(producto,PVP){
this.producto = producto;
this.PVP = PVP
}
}
Cuando deseemos heredar propiedades le pasaremos por parámetros el nombre de las propiedades y dentro del constructor utilizaremos la palabra reservada super(propiedadHeredad,propiedadHerdada)
class formulario2 extends formulario{
constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro,articulo,pvp){
super(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro);
this.articulo = articulo;
this.pvp = pvp;
}
}
Si deseamos sobre escribir un método, lo nombraremos nuevamente en nuestra clase hija y lo modifificaremos a nuestro antojo.
class formulario2 extends formulario{
constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro,articulo,pvp){
super(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro);
this.articulo = articulo;
this.pvp = pvp;
}
/**sobre escribir un metodo existente**/
metodoImpresor(){
txt = `el producto que has comprado es : ${this.articulo} <br> y tiene un precio de ${this.pvp}`;
return txt;
}
}
Si lo que deseamos es heredar las propiedades de un método ya creado y utilizarlo en uno nuevo. introduciendosuper.MetodoObjPadre();
class formulario2 extends formulario{
constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro,articulo,pvp){
super(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro);
this.articulo = articulo;
this.pvp = pvp;
}
/**crear un nuevo metodo**/
metodoImpresor2(){
let txt= super.metodoImpresor();
txt += `el producto que has comprado es : ${this.articulo} <br> y tiene un precio de ${this.pvp}`;
return txt;
}
}
El ejemplo completo sería el siguiente:
<script type="text/javascript">
class formulario{
constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro){
this.nombre = nombre;
this.apellido1 = apellido1;
this.apellido2 = apellido2;
this.fehcaNacimiento = fehcaNacimiento;
this.fechaRegistro = (new Date()).toDateString();
}
metodoImpresor(){
return `El nombre es :${this.nombre} <br>
El primer apellido es ${this.apellido1} <br>
el segundo apellido es ${this.apellido2}<br>
nacido en fecha ${this.fehcaNacimiento} <br>
has generado el registro con fecha ${this.fechaRegistro} <br>`;
}
}
class formulario2 extends formulario{
constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro,articulo,pvp){
super(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro);
this.articulo = articulo;
this.pvp = pvp;
}
/**crear un nuevo metodo**/
metodoImpresor2(){
let txt= super.metodoImpresor();
txt += `el producto que has comprado es : ${this.articulo} <br> y tiene un precio de ${this.pvp}`;
return txt;
}
}
var ventas_Movil = new formulario2 ("Francisco", "Gomez","Rubio","15/10/1985","undefined" ,"tablet", 200 );
//document.write(ventas_Movil.metodoImpresor());
document.write(ventas_Movil.metodoImpresor2());
</script>
Promesas Promise()
Qué son las promesas
Es un objeto que Js en su version ES6 utiliza para valorar el estado de una conexión asincrona (AJAX). Una promesa se compone de 3 estados y no podrá tener núnca dos estado al mismo tiempo:
- Pendiente
- Resuleta
- Rechazada
En primer lugar construimos uno objeto promesa al que pasamos por parametros una función anónima que contine dos parámetros resolve y recject
<script type="text/javascript">
let promesa = new Promise((resolve,reject)=>{
});
</script>
Antes dijimos que el objeto promise recibe dos parametros:
- resolve: Nos regresa el resultado cuando nuestra conexión a sido correcta.
- reject: Nos regresa el error ocurrido en nuestra conexion ajax.
let promesa = new Promise((resolve,reject) =>{
if(true){
resolve("Promesa resuelta");
}else{
reject("error al resolver la promesa");
}
});
Una vez creado el objeto promesa y cargadas los valores de las propiedades rosolve y recject que hemos pasado por parámetos, recuperaremos esos valores con los métodos:
then(response): Esta variable recivira por parámetrosresponseque es el valor dado anteriormente aresolve- catch(error): Recibe por parámetros el objeto
errorque almacenareject.
/*instanciamos un objeto Promise*//*instanciamos un objeto Promise*/
let promesa = new Promise((resolve, reject)=>{
if(false){
resolve("Promesa resuelta");
}else{
reject("error al resolver la promesa");
}
});
/*cargamos los métodos then y catch *//*cargamos los métodos then y catch */
promesa
.then((response)=> console.log(`resolve : ${response}`))
.catch((error)=>console.log(`error: ${error}`));
Tal y como hemos dicho antes una promesa tiene tres estados: en proceso , resuelto (resolve) y error (reject). Pero no podra estar en dos estado a la vez primero estará en proceso y posteriormente estará resuelta o caerá en error. Esto la combierte en elemento perfecto para los envios de formularios con AJAX. Supongo que habreis visto los tipicos formularios que al enviarlos carga el circulo de carga y luego aparece como enviado o como error de envío.
Ejemplo de promesa con tres estados
En el siguiente ejemplo hemos utilizado un temporizador para que se vea el trascurso de los estado en un div con id contenedorCod .
let promesa = new Promise ((resolve, reject)=>{
/*estado de carga*
$("#contenedorCod").html("cargando....");
/*carga ok*
setTimeout(()=> resolve("carga Correcta"),2000);
/*carga ko*
setTimeout(()=> reject("error carga"),5000);
});
promesa
.then((response) => $("#contenedorCod").html(`resolve : ${response}`))
.catch((error) =>$("#contenedorCod").html(`error: ${error}`));
