Dans ce didacticiel, vous découvrirez JavaScript ES6 à l'aide d'exemples.
JavaScript ES6 (également appelé ECMAScript 2015 ou ECMAScript 6 ) est la nouvelle version de JavaScript introduite en 2015.
ECMAScript est le standard utilisé par le langage de programmation JavaScript. ECMAScript fournit la spécification sur le fonctionnement du langage de programmation JavaScript.
Ce didacticiel fournit un bref résumé des fonctionnalités couramment utilisées d'ES6 afin que vous puissiez démarrer rapidement dans ES6.
JavaScript laisse
JavaScript letest utilisé pour déclarer des variables. Auparavant, les variables étaient déclarées à l'aide du varmot - clé.
Pour en savoir plus sur la différence entre letet var, visitez JavaScript let vs var.
Les variables déclarées en utilisant letont une portée de bloc . Cela signifie qu'ils ne sont accessibles que dans un bloc particulier. Par exemple,
// variable declared using let let name = 'Sara'; ( // can be accessed only inside let name = 'Peter'; console.log(name); // Peter ) console.log(name); // Sara
JavaScript const
L' constinstruction est utilisée pour déclarer des constantes en JavaScript. Par exemple,
// name declared with const cannot be changed const name = 'Sara';
Une fois déclarée, vous ne pouvez pas modifier la valeur d'une constvariable.
Fonction de flèche JavaScript
Dans la version ES6 , vous pouvez utiliser les fonctions fléchées pour créer des expressions de fonction. Par exemple,
cette fonction
// function expression let x = function(x, y) ( return x * y; )
peut être écrit comme
// function expression using arrow function let x = (x, y) => x * y;
Pour en savoir plus sur les fonctions fléchées, visitez la fonction de flèche JavaScript.
Classes JavaScript
La classe JavaScript est utilisée pour créer un objet. La classe est similaire à une fonction constructeur. Par exemple,
class Person ( constructor(name) ( this.name = name; ) )
Le mot class- clé est utilisé pour créer une classe. Les propriétés sont affectées dans une fonction constructeur.
Vous pouvez maintenant créer un objet. Par exemple,
class Person ( constructor(name) ( this.name = name; ) ) const person1 = new Person('John'); console.log(person1.name); // John
Pour en savoir plus sur les classes, visitez les classes JavaScript.
Valeurs des paramètres par défaut
Dans la version ES6, vous pouvez transmettre des valeurs par défaut dans les paramètres de fonction. Par exemple,
function sum(x, y = 5) ( // take sum // the value of y is 5 if not passed console.log(x + y); ) sum(5); // 10 sum(5, 15); // 20
Dans l'exemple ci-dessus, si vous ne passez pas le paramètre pour y, il en prendra 5 par défaut.
Pour en savoir plus sur les paramètres par défaut, consultez la page Paramètres par défaut de la fonction JavaScript.
Littéraux de modèle JavaScript
Le littéral de modèle a facilité l'inclusion de variables dans une chaîne. Par exemple, avant de devoir faire:
const first_name = "Jack"; const last_name = "Sparrow"; console.log('Hello ' + first_name + ' ' + last_name);
Cela peut être réalisé en utilisant un modèle littéral en:
const first_name = "Jack"; const last_name = "Sparrow"; console.log(`Hello $(first_name) $(last_name)`);
Pour en savoir plus sur les littéraux de modèle, consultez Littéral de modèle JavaScript.
Destructuration JavaScript
La syntaxe de déstructuration facilite l'attribution de valeurs à une nouvelle variable. Par exemple,
// before you would do something like this const person = ( name: 'Sara', age: 25, gender: 'female' ) let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
En utilisant la syntaxe ES6 Destructuring, le code ci-dessus peut être écrit comme suit :
const person = ( name: 'Sara', age: 25, gender: 'female' ) let ( name, age, gender ) = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Pour en savoir plus sur la déstructuration, consultez la section Destructuration de JavaScript.
Importation et exportation JavaScript
Vous pouvez exporter une fonction ou un programme et l'utiliser dans un autre programme en l'important. Cela permet de fabriquer des composants réutilisables. Par exemple, si vous avez deux fichiers JavaScript nommés contact.js et home.js.
Dans le fichier contact.js, vous pouvez exporter la contact()fonction:
// export export default function contact(name, age) ( console.log(`The name is $(name). And age is $(age).`); )
Ensuite, lorsque vous souhaitez utiliser la contact()fonction dans un autre fichier, vous pouvez simplement importer la fonction. Par exemple, dans le fichier home.js:
import contact from './contact.js'; contact('Sara', 25); // The name is Sara. And age is 25
Promesses JavaScript
Les promesses sont utilisées pour gérer les tâches asynchrones. Par exemple,
// returns a promise let countValue = new Promise(function (resolve, reject) ( reject('Promise rejected'); )); // executes when promise is resolved successfully countValue.then( function successValue(result) ( console.log(result); // Promise resolved ), )
Pour en savoir plus sur les promesses, consultez les promesses JavaScript.
Paramètre de repos JavaScript et opérateur de propagation
Vous pouvez utiliser le paramètre rest pour représenter un nombre indéfini d'arguments sous forme de tableau. Par exemple,
function show(a, b,… args) ( console.log(a); // one console.log(b); // two console.log(args); // ("three", "four", "five", "six") ) show('one', 'two', 'three', 'four', 'five', 'six')
Vous passez les arguments restants en utilisant la … syntaxe. Par conséquent, le paramètre de repos de nom .
Vous utilisez la syntaxe de propagation … pour copier les éléments dans un seul tableau. Par exemple,
let arr1 = ('one', 'two'); let arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // ("one", "two", "three", "four", "five")
Le paramètre rest et l'opérateur spread utilisent la même syntaxe. Cependant, l'opérateur de diffusion est utilisé avec des tableaux (valeurs itérables).
Pour en savoir plus sur l'opérateur de diffusion, consultez JavaScript Spread Operator.
