parámetros predeterminados en ES6
en ES6, podemos poner los valores predeterminados en la firma de las funciones.
var calculateArea = function(height = 50, width = 80) {
// write logic
...
}
en ES5, estábamos usando lógica u operador.
var calculateArea = function(height, width) {
height = height || 50;
width = width || 80;
// write logic
...
}
literales de plantilla en ES6
en ES6, podemos usar una nueva sintaxis ${PARAMETER} dentro de la cadena marcada hacia atrás.
var name = `Your name is ${firstName} ${lastName}.`
en ES5, tenemos que romper la cadena como a continuación.
var name = 'Your name is ' + firstName + ' ' + lastName + '.'
cadenas de varias líneas en ES6
en ES6, es muy simple., Solo usa back-ticks.
let poemData = `Johny Johny Yes Papa,
Eating sugar? No, papa!
Telling lies? No, papa!
Open your mouth Ah, ah, ah!`
en ES5, tuvimos que utilizar el siguiente enfoque.
var poemData = 'Johny Johny Yes Papa,\n'
+ 'Eating sugar? No, papa!\n'
+ 'Telling lies? No, papa!\n'
+ 'Open your mouth Ah, ah, ah!'
asignación de desestructuración en ES6
la sintaxis de asignación de desestructuración es una expresión JavaScript que permite descomprimir valores de matrices o propiedades de objetos en variables distintas.
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true
en ES5, tuvimos que utilizar el siguiente enfoque.
var o = {p: 42, q: true};
var p = o.p;
var q = o.q;
console.log(p); // 42
console.log(q); // true
los literales de objetos mejorados en ES6
Los literales de objetos facilitan la creación rápida de objetos con propiedades dentro de las llaves.,
function getLaptop(make, model, year) {
return {
make,
model,
year
}
}
getLaptop("Apple", "MacBook", "2015");
En ES5, tuvimos que seguir la sintaxis siguiente.
function getLaptop(make, model, year) {
return {
make: make,
model: model,
year: year
}
}
getLaptop("Apple", "MacBook", "2015");
Para más información: https://dev.to/sarah_chima/enhanced-object-literals-in-es6-a9d
Flecha Funciones en ES6
La grasa flechas son sorprendentes porque sería su this comportarse correctamente, es decir, this tendrá el mismo valor que en el contexto de la función— no va a mutar.
$('.btn').click((event) => {
this.doSomething()
});
En ES5, tuvimos que usar esto = esta o .bind (esto).,
var _this = this;
$('.btn').click(function(event){
_this.doSomething();
});
Para más información: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Promesas en ES6
Promesas son utilizados para la ejecución asíncrona. En ES6, podemos usar promise con la función de flecha que se muestra a continuación.
var asyncCall = new Promise((resolve, reject) => {
// do something async
resolve();
}).then(()=> {
console.log('Yay!');
})
En ES5, necesitamos usar setTimeout().
setTimeout(function(){
console.log('Yay!');
}, 1000);
Para más información: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
Bloquear el Ámbito de las Construcciones que y Const
let es un nuevo var que permite el alcance de la variable para los bloques.,Por lo tanto, la principal diferencia entre let y var es, var se circunscribe al bloque de función más cercano y let se circunscribe al bloque envolvente más cercano, que puede ser más pequeño que un bloque de función.
En la ES6,
En ES5,
Cuando se trata de const, es sólo una inmutable y es también el bloque de ámbito como let.
clases en ES6
podemos crear clases en ES6 usando la palabra clave «class». La creación y el uso de clases en ES5 fue un dolor en la parte posterior, porque no había una clase de palabra clave.,
no voy a mostrarte un ejemplo de creación de clases ES5, porque hay muchos sabores.
Módulos en ES6
En la ES6, hay módulos con import y export operandos.
export var userID = 10;
export function getName(name) {
...
};
podemos importar la variable userID y el método getName usando la instrucción import .
import {userID, getName} from 'module';
console.log(userID); // 10
Leave a Reply