• Skip to main content
  • Skip to primary sidebar

Portomaior

Software y Tecnología

  • Inicio
  • Blog
  • Contacto
You are here: Home / Sin categoría / JavaScript ECMAScript 6 (2015) [Guia Rápida]

JavaScript ECMAScript 6 (2015) [Guia Rápida]

JavaScript 6, ECMAScript 6, ES6 ó ECMAScript 2015.
JavaScript que nació en 1995 en Nestcape y con esta actualización se convierte en un lenguaje mayor de edad con mucha dignidad.

Constantes

Se añade una forma de crear constantes

const ANCHO_MAXIMO = 200;

Variables con ámbito (scope) de bloque

Con let podemos crear variables que solo pertenecen dentro del ámbito donde se crean.

for (let i = 0; i <= 20; i++){
    console.log(i); // Muestra el número
}

console.log(i); // Falla porque i ya no existe

Interpolación de variables en textos con «

Lo más fácil es verlo con un ejemplo. Ojo, son las comillas que parecen tildes.

let nombre = 'Paco';
let saludo = 'querido';

let texto = `Hola ${saludo} ${nombre}:`;

// El resultado es: "Hola querido Paco:" 

Mapas

Es un objeto que nos permite gestionar diccionarios, es muy similar a un objeto, pero con las siguientes diferencias:

  • Las claves de un Object son Strings y Symbols, mientras que para un Map pueden ser de cualquier tipo, incluyendo funciones, objetos y cualquier otro tipo primitivo.
  • Puedes saber fácilmente el tamaño de un Map usando la propiedad size, mientras que le número de propiedades en un Object tiene que ser deternminado manualmente.
  • Un Map es un iterable lo que permite iterar directamente sobre el, mientras que si queremos iterar sobre un Object necesitamos obtener primero las claves de alguna forma para después iterar sobre el.
  • Un Object tiene prototipo, por lo que hay claves por defecto en tu mapa que pueden colisionar con tus claves si no eres cuidadoso. En el estandard ES5 esto se puede evitar usando mapa = Object.create(null), pero esto raramente se hace.
var miMapa = new Map(); 
var claveObj = {},     
    claveFunc = function () {},     
    claveCadena = "una cadena"; 

// Asignando valores 
miMapa.set(claveCadena, "valor asociado con 'una cadena'"); miMapa.set(claveObj, "valor asociado con claveObj"); miMapa.set(claveFunc, "valor asociado with claveFunc"); 

miMapa.size; // 3 

// Obteniendo los valores 
miMapa.get(claveCadena);    // "valor asociado con 'una cadena'" miMapa.get(claveObj);       // "valor asociado con claveObj" miMapa.get(claveFunc);      // "valor asociado con claveFunc" miMapa.get("una cadena");   // ""valor asociado con 'una cadena'"                                   
                            // porque claveCadena === 'una cadena' miMapa.get({});           // undefined, porque claveObj !== {} miMapa.get(function() {}) // undefined, porque 
                          // claveFunc !== function () {}

// Para saber si existe el elemento
miMapa.has("una cadena"); // Devuelve true

// Para eliminar un elemento
miMapa.delete("una cadena"); // Devuelve true porque pudo eliminarlo

// Para saber el tamaño
miMapa.size();  // Devuelve 2 porque eliminamos 1

Ver mas ejemplos en https://medium.com/@xadrijo/explorando-la-funci%C3%B3n-map-en-javascript-c04c42773fb6

Conjuntos o Sets

Es casi lo mismo que un array, pero con algunos métodos implícitos nuevos y con una mejora considerable de rendimiento al operar de forma masiva sobre el mismo. Tiene mas o menos los mismos métodos que el map.

let engineering = new Set(['Alberta', 'Dr. Gero', 'Trunks',
     'Bulma', 'Gohan']);
engineering.add('Gohan');

console.log(engineering); 
// Resultado: { 'Alberta', 'Dr. Gero', 'Trunks', 'Bulma', 'Gohan' }

Unión,

let engineering = new Set(['Alberta', 'Dr. Gero', 
     'Trunks', 'Bulma', 'Gohan']);
let freelancers = new Set(['Piccolo','Trunks', 'Vegeta', 
     'Goku', 'Gohan']);
let union = new Set([...engineering, ...freelancers]);
console.log(union);
// Imprime: {'Alberta', 'Dr. Gero', 'Trunks', 'Bulma', 'Gohan', 
// 'Piccolo', 'Vegeta', 'Goku' }.
// Eliminando los duplicados. 

El operador … convierte el conjunto en un array y después los combina eliminando los duplicados.

Ver más ejemplos útiles en https://code.tutsplus.com/es/tutorials/understanding-sets-with-javascript–cms-29789

Función flecha o Arrow

Ejemplo 1:

// ES5
// Imaginemos una variable data que incluye un array de objectos
var data = [{...}, {...}, {...}, ...];
data.forEach(function(elem){
	// Tratamos el elemento
    console.log(elem)
});
//ES6
var data = [{...}, {...}, {...}, ...];
data.forEach(elem => {
	console.log(elem);
});

Ejemplo 2:

// ES5
var miFuncion = function(num) {
	return num + num;
}
// ES6
var miFuncion = (num) => num + num;

Asiganción por desestructuracíon

Este palabrejo nos simplifica un poco el código al hacer asignaciones de variables entre arrays y objetos.

Nos permite hacer esto:

var foo = ["uno", "dos", "tres"];

// sin desestructuración
var uno  = foo[0];
var dos  = foo[1];
var tres = foo[2]; // asignación en tres lineas

// con desestructuración
var [uno, dos, tres] = foo; // asignación en una sola linea

// o esto
let telefono = {
    marca: "Huawei",
    color: "Blanco",
    pantalla: "6"
};

let { marca, pantalla} = telefono;
console.log(marca, pantalla); // Imprime: "Huawei", "6"

// y tambien pueden tener valores por defecto, 
// por si no encuentra el item
let { marca, pantalla, so = "android"} = telefono;
console.log(marca, pantalla, so); // Imprime: "Huawei", "6", "android"

// tambien se puede utilizar en los param de un function
function miMovil({ marca, so = "android"}) {
    console.log(so);
}
miMovil(telefono); // Imprime: "Huawei", "android"

// o esto otro

let [a, b] = [1, 5];
console.log(a, b); // Imprime: 1, 5

y esto

function f() {
  return [1, 2];
}
var a, b;
[a, b] = f();
console.log("A es " + a + " B es " + b);

y esto

const { name, value } = e.target;

For of y forEach

Se implementa un nuevo modo de hacer iteraciones más eficiente y legible.

let frutas = ["manzana", "pera", "limón"];

for (let fruta of frutas){
    console.log(fruta);
}
// Esto imprimirá una línea por cada fruta.

// forEach solo es valido para arrays. 
// Para objetos objetos utilizar for..of
frutas.forEach(fruta => {
    console.log(fruta);
});
// Esto tambien imprimirá una línea por cada fruta.

Funciones Generadoras

Una explicación mas detallada la puedes ver en http://juanmirod.github.io/2017/09/11/Generadores-JavaScript.html

function* counterGenerator() {   
    let i = 0;   
    while (true) {     
        yield i;     
        i++;   
    } 
} 

var counter = counterGenerator();
counter.next() // { value: 0, done: false } 
counter.next() // { value: 1, done: false } 
counter.next() // { value: 2, done: false } 
// ... hasta el infinito y más allá!

Otro ejemplo

function* range (limit) {
  let c = 0
  while ( c < limit ) {
    yield c
    c++
  }
}

let lista = [...range(5)]
// [ 0, 1, 2, 3, 4 ] 

Parámetros por defecto

function comprar(producto, cantidad = 1){
    console.log(producto, cantidad);
}
comprar("Peras"); // "Peras", 1

Parámetros agrupados o rest

Convierte los parámetros en un arreglo con el operador «…».

function comprar(...producto){
    console.log(productos);
}
comprar("Peras", "Limones", "Sandía"); 
// Imprime un arreglo: ["Peras", "Limones", "Sandía"]

Parámetros distribuidos o spread

function comprar(producto, cantidad, tipo){
    console.log(producto, cantidad, tipo);
}

let = parametros = ["Sandía", 3, "Alimentación"];
// Con los ... asigna los elementos a los parámetros de entrada.
comprar(...parametros); 
// Imprime un arreglo: "Sandía", 3, "Alimentación"

Función Flecha o Arrow

/* Antes esta función se escribia así:
function suma (num1, num2){
    return (num1 + num2);
}
*/

// Ahora se puede escribir así

let suma = (nnum1, num2) => num1 + num2;

No puede crearse con new.

No pueden pasarse objeto de argumentos.

No se puede utilizar la sintaxis de «…» en los parametros.

No tienen prototipos.

Clases y herencia

Por fin hay algo parecido a una clase.

class Vehiculo{
    constructor(numRuedas){
        this.numRuedas = numRuedas;
    }
    avanza (velocidad){
        console.log(`Avanzo a ${velocidad} Km/hora`);
        this.velocidad = velocidad;
    }
}

let coche = new Vehiculo(4);
let moto = new Vehiculo(2);
moto.avanza(50);
console.log(moto); // {numRuedas: 2, velodidad: 50} 
console.log(moto.numRuedas); // 2

class Moto extends Vehiculo{
     contructor(){
         // super llama al contructor del objeto del que hereda
         super(2); // Le pasa que tiene 2 ruedas
     }
}

let moto2 = new Moto();
moto2.avanza(80); 
console.log(moto2.velocidad) // 80

Metodos Estáticos de Clase

class Operaciones {
   static suma(a, b){
       return a + b;
   }
  
   resta (a, b){
      return a - b;
   }
}

console.log(Operaciones.suma(10, 5)); // 15
console.log(Operaciones.resta(10, 5));  // Da error!!!

Getter y Setter

class Vehiculo{
    get nombre(){
         return this._nombre
    }

    set nombre (nombre){
        this._nombre = nombre;
    }
}

var miCoche = new Vehiculo

Módulos, import y export

Importación de la clase por defecto:

// Fichero Rama.js

// Fichero Coche.js

class Coche {
   arrancar(){
   }
}
export default Rama

// Fichero Trafico.js
import Coche from "./Coche.js";

let coche = new Coche();
coche.arrancar();

otra forma

// Fichero Coche.js

export default class Coche {
   arrancar(){
   }
}

// Fichero Trafico.js
import Coche from "./Coche.js";

let coche = new Coche();
coche.arrancar();

Importación de miembros de la clase:

// Fichero Coche.js
export class Motor{
}

class Coche {
   arrancar(){
      let motor = new Motor;
      motor.arranca();
   }
}
export default Rama

// Fichero Trafico.js
// Los miembros de clase se important entre {}
import Coche, { Motor} from "./Coche.js";

let motor = new Motor();
motor.arrancar();

Filed Under: Sin categoría

Reader Interactions

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Primary Sidebar

Categorías

  • Comercio Electrónico
  • Diccionario de Informática
  • Diccionario de Marketing
  • Diccionario SEO
  • Diseño Web
  • Docker
  • Genesis Theme para Wordpress
  • Gestión de Proyectos
  • Guías Clientes
  • Hosting
  • Java
  • Linux
  • Mac
  • Odoo
  • Podcast
  • Portfolio
  • Posicionamiento SEO
  • Programación
  • React
  • Sin categoría
  • webmin
  • Windows
  • Woocommerce
  • Wordpress

Entradas recientes

  • Alternativa Windows a CCurl >> bitsadmin
  • Spring Framework de Java
  • Chuleta de Expresiones regulares.
  • Eclipse IDE
  • Java (chuleta)

Copyright © 2021 · portomaior.com · Legal · Política de Cookies · Política de privacidad · Log in

Utilizamos cookies propias y de terceros para ofrecer nuestros servicios, recoger información estadística e incluir publicidad. Si continua navegando acepta su instalación y uso. Aceptar Leer más
Política de Privacidad y Cookies

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necesarias
Siempre activado

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

No necesarias

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.