Top 10 Caractéristiques ES6 chaque développeur Javascript doit connaître

paramètres par défaut dans ES6

dans ES6, nous pouvons mettre les valeurs par défaut directement dans la signature des fonctions.

var calculateArea = function(height = 50, width = 80) { 
// write logic
...
}

dans ES5, nous utilisions une logique ou un opérateur.

var calculateArea = function(height, width) { 
height = height || 50;
width = width || 80;
// write logic
...
}

Modèle de Littéraux dans l’ES6

Dans l’ES6, nous pouvons utiliser une nouvelle syntaxe ${PARAMETER} à l’intérieur de l’arrière-cochée chaîne.

var name = `Your name is ${firstName} ${lastName}.`

dans ES5, nous devons casser la chaîne comme ci-dessous.

var name = 'Your name is ' + firstName + ' ' + lastName + '.'

chaînes multi-lignes dans ES6

dans ES6, c’est très simple., Utilisez simplement des tiques arrières.

let poemData = `Johny Johny Yes Papa, 
Eating sugar? No, papa!
Telling lies? No, papa!
Open your mouth Ah, ah, ah!`

dans ES5, nous avons dû utiliser l’approche ci-dessous.

var poemData = 'Johny Johny Yes Papa,\n' 
+ 'Eating sugar? No, papa!\n'
+ 'Telling lies? No, papa!\n'
+ 'Open your mouth Ah, ah, ah!'

affectation de déstructuration dans ES6

la syntaxe d’affectation de déstructuration est une expression JavaScript qui permet de décompresser les valeurs des tableaux, ou les propriétés des objets, en variable distincte.

var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true

dans ES5, nous avons dû utiliser l’approche ci-dessous.

var o = {p: 42, q: true};
var p = o.p;
var q = o.q;
console.log(p); // 42
console.log(q); // true

les littéraux D’objet améliorés dans ES6

Les littéraux D’objet facilitent la création rapide d’objets avec des propriétés à l’intérieur des accolades.,

function getLaptop(make, model, year) {
return {
make,
model,
year
}
}
getLaptop("Apple", "MacBook", "2015");

dans ES5, nous devions suivre la syntaxe ci-dessous.

function getLaptop(make, model, year) {
return {
make: make,
model: model,
year: year
}
}
getLaptop("Apple", "MacBook", "2015");

Pour plus d’informations: https://dev.to/sarah_chima/enhanced-object-literals-in-es6-a9d

fonctions de flèche dans ES6

Les Grosses flèches sont incroyables car elles feraient en sorte que votre this se comporte correctement, c’est— à-dire, this aura la même valeur que dans le contexte de la fonction-elle ne mutera pas.

$('.btn').click((event) => { 
this.doSomething() 
});

Dans l’ES5, nous avons dû utiliser _ce = ce ou .bind(ce).,

var _this = this; 
$('.btn').click(function(event){ 
_this.doSomething();
});

Pour plus d’info: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

des Promesses dans l’ES6

les Promesses sont utilisés pour l’exécution asynchrone. Dans ES6, nous pouvons utiliser promise avec la fonction de flèche indiquée ci-dessous.

var asyncCall = new Promise((resolve, reject) => {
// do something async 
resolve();
}).then(()=> { 
console.log('Yay!');
})

dans ES5, nous devons utiliser setTimeout().

setTimeout(function(){ 
console.log('Yay!');
}, 1000);

Pour plus d’info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Bloc d’Étendue de Constructions et Laissez Const

let est un nouveau var ce qui permet à la portée de la variable pour les blocs.,Ainsi, la principale différence entre let et var est, var est étendue au bloc de fonction le plus proche et let est étendue au bloc englobant le plus proche, qui peut être plus petit qu’un bloc de fonction.

dans ES6,

dans ES5,

quand il s’agit deconst, c’est juste un immuable et il est également à portée de bloc commelet.

Classes dans ES6

Nous pouvons créer une classe dans ES6 en utilisant le mot-clé « class”. La création et l’utilisation des Classes dans ES5 étaient une douleur à l’arrière, car il n’y avait pas de classe de mots clés.,

Je ne vais pas vous montrer d’exemple de création de classe ES5, car il y a beaucoup de saveurs.

Modules dans ES6

dans ES6, il y a des modules avecimport Etexport opérandes.

export var userID = 10; 
export function getName(name) { 
... 
};

Nous pouvons importer la variable userID et la méthode getName en utilisant l’instruction import .

import {userID, getName} from 'module';
console.log(userID); // 10