• Saltar a la navegación principal
  • Skip to main content
  • Saltar a la barra lateral principal

Geekebrains

Para programadores, maker y geeks en general

  • Inicio
  • YouTube
  • Zona makers!
  • Zona Coders!
  • Zona Junior!
Estás aquí: Inicio / Zona Coders! / JavaScript ECMAScript 6 (2015) [Guia Rápida]

26 mayo, 2019 Por admin8049 Deja un comentario

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();

Archivado en: Conceptos, Zona Coders! Etiquetado como: ECMAScript6 (2015), ES6, javascript

Entrada anterior: « ReactJs [Guía Rápida]
Siguiente entrada: JavaScript [Buenas prácticas] »

Interacciones del lector

Deja una respuesta Cancelar la respuesta

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

Barra lateral primaria

Categorías

  • Conceptos
  • Experimentos
  • GeekeBlocks
  • Noticias Geek
  • Proyectos
  • Sin categoría
  • Zona Coders!
  • Zona Junior!
  • Zona makers!

Etiquetas

Arduino Arduino nano Atom backup Buenas prácticas docker docker-compose dockerfile ECMAScript6 (2015) EditorConfig ES6 ESLint Expresiones regulares git IDE Java javascript JSON JSX lenguajes de programación Librerías de JavaScript mac Material UI MongoDb MVC NetBeans node NodeJS NoSQL Notepad++ nRF24L01 nvm odoo package.json plugins Prettier QWeb ReactJS shell Spring Framework ubuntu Visual Studio Visual Studio Code wordpress yaml

Entradas recientes

  • Firebase
  • _Lodash
  • Crear un entorno de desarrollo WordPress con Docker, en una patada
  • docker-compose
  • Dockerfile
  • Docker
  • TypeScript
  • Cómo tener distintas versiones de node en tu equipo?
  • Heroku
  • Node JS

Copyright © 2021 · GeekeZonia · Aviso Legal · Política de Cookies · Política de Privacidad · Iniciar sesión

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. Leer Mas. Acepta
Privacy & Cookies Policy

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.
Necessary
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.

Non-necessary

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.

SAVE & ACCEPT