ES6
Clase 31 de 99 • 30 días de JavaScript
Contenido del curso
Luis Gomero
student•
hace 3 años
Duvan Alexis Palomino Ramirez
student•
hace 3 años
Sergio Medina
student•
hace 3 años
Clase 31 de 99 • 30 días de JavaScript
Contenido del curso
ECMAScript 6, también conocido como ES6, fue lanzado en junio de 2015 y trae una gran cantidad de características nuevas y mejoras al lenguaje. Algunas de las características más importantes incluyen:
class Persona { constructor(nombre, edad) { this.nombre = nombre; this.edad = edad; } saludar() { console.log(`Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`); } } const persona = new Persona("Juan", 30); persona.saludar(); // Output: "Hola, mi nombre es Juan y tengo 30 años."
const nombre = "Juan"; const edad = 30; console.log(`Hola, mi nombre es ${nombre} y tengo ${edad} años.`); // Output: "Hola, mi nombre es Juan y tengo 30 años."
const numeros = [1, 2, 3, 4, 5]; const dobles = numeros.map(n => n * 2); console.log(dobles); // Output: [2, 4, 6, 8, 10]
const numeros = [1, 2, 3]; const nuevosNumeros = [...numeros, 4, 5, 6]; // [1, 2, 3, 4, 5, 6]
const persona = {nombre: "Juan", edad: 30}; const {nombre, edad} = persona; console.log(nombre); // Output: "Juan" console.log(edad); // Output: 30
import { miFuncion } from './miArchivo.js'; export const otraFuncion = () => {};
const numeros = [1, 2, 3, 4, 5]; const encontrado = numeros.find(n => n === 3); console.log(encontrado); // Output: 3
const miPromesa = new Promise((resolve, reject) => { // código }); miPromesa.finally(() => console.log('Promesa finalizada'));
try { // código que puede generar excepciones } catch (error) { console.log(error); }
Todo esto y más lo puedes aprender en el curso Curso de ECMAScript: Historia y Versiones de JavaScript
Luis Gomero
Duvan Alexis Palomino Ramirez
Sergio Medina
Luis Castro
Reinaldo Mendoza
Federico Guillermo Moreira Tejera
Carlos Andrade
Rubén Ernesto Aragón Gil
Ricardo Alfonso Chavez Vilcapoma
Creo que hay un pequenio error. Promise.prototype.finally son parte de ES9
concuerdo contigo
¡Qué duros para saber eso! Yo ni idea de los ES+ posteriores al 6 jaja
ES6: mejoras más importantes
. ES6, también conocido como ECMAScript 2015, es una versión relevante de JavaScript que fue lanzada en junio de 2015. Es la primera actualización significativa del lenguaje en varios años, y trae consigo una gran cantidad de mejoras y nuevas características. . Entre las mejoras más importantes de ES6 se encuentran: .
Dado que los objetos en JS son referencias a espacios en memoria, que se halla incluido el spread operator es muy importante para evitar side effects
Las funciones anónimas en JavaScript son aquellas que no han sido declaradas con un nombre. En este lenguaje de programación, podemos declarar este tipo de elemento usando cualquiera de los modos de escribir funciones.
31/89 ES6 ES6 trae una fran cantidad de características nuevas y mejoras al lenguaje JavaScript incluyendo:
Parametros por defecto: ES6 permite la asignación de valores por defecto a los parámetros de una función
function suma(a, b = 0) { return a + b; } suma(2); // Output: 2 suma(2, 3); // Output: 5
Object literal shortland: ES6 introduce una nueva sintaxis para crear objetos literales de manera más sencillas y legible
const nombre = "Juan"; const edad = 30; const persona = { nombre, edad }; console.log(persona); // Output: { nombre: "Juan", edad: 30 }
Promises: ES6 incluye una nueva forma de manejar operaciones asíncronas mediante la utilización de promesas
function miFuncion() { return new Promise((resolve, reject) => { // código asíncrono if (error) { reject(error); } else { resolve(resultado); } }); } miFuncion().then(resultado => console.log(resultado)).catch (error => console.log(error));
Móduloes dinámicos: Es6 permite la carga dinámica de módulo mediante la utilización del método ìmport()`
import('./miArchivo.js').then(miModulo => { miModulo.miFuncion(); }).catch(error => console.log(error));
Rest parameters: ES6 introduce la sintaxix ‘…’ para permitir la captura de argumentos restantes en una función en un array
function suma(...numeros) { return numeros.reduce((acumulado, numero) => acumulado + numero, 0); } console.log(suma(1, 2, 3, 4, 5)); // Output: 15
Mi ejemplo
class DragonBall { constructor(personaje, ki) { this.personaje = personaje; this.ki = ki; } saludar() { console.log(`Yo soy ${this.personaje} y mi poder es ${this.ki}`); } } const persona = new DragonBall("Goku", 300000000000000000000000000000000000);; persona.saludar();
Además del spread operator, se añadió otra función con los tres puntos (...) llamada rest operator.
Dejo un ejemplo:
/*-----------------------Operador de propagación (...)-----------------------*/ let person = { name: "Alexa", age: 24 }; let country = "COL"; //let data = [...person, country ]; //error por ser array. Solo se pueden copiar de array a arrays y objects a objects let data = {...person, country }; //... permite que se copien los elementos del object person a un nuevo objeto console.log(data); //{ name: 'Alexa', age: 24, country: 'COL' } Adiciona en su contenido el contenido del object person y el valor de country (en este caso se guarda como una propiedad-valor) let pares = [2,4,6,8,10]; //para arrays también sirve let copyPar = [...pares]; let paresVeinte = [...pares,12,14,16,18,20]; console.log(copyPar); //[ 2, 4, 6, 8, 10 ] console.log(paresVeinte); //[2, 4, 6, 8, 10, 12, 14, 16, 18, 20] /*-----------------------Parámetro rest (resto)-----------------------*/ const array = [1,2,3,4,5]; function hola (primero, segundo, ...resto) { // Parámetro Rest (... + nombre de variable que almacenará el array). A diferencia del spread operator, este siempre va al final y guarda el resto de elementos que se pasen como argumento a la función en un array console.log(primero, segundo) // 1 2 console.log(resto) // [3,4,5, "final"] } hola(...array, "final") //<- Operador de propagación (pasa como argumentos 1,2,3,4,5) //Lo mismo que hacer -> hola(1,2,3,4,5, "final") //También sirve para obtener los elementos restantes de un array u objeto usando desestructuración const objeto = { nombre: "Andres", age: 23, plataforma: "Platzi" } const arrayNumber = [0,1,2,3,4,5] const {plataforma, ...usuario} = objeto; const [cero, ...positivos] = arrayNumber; console.log(usuario); // { nombre: 'Andres', age: 23 } console.log(positivos); // [ 1, 2, 3, 4, 5 ]