Cet article vous donnera une compréhension approfondie d'ES6 et découvrira les nouvelles fonctionnalités d'ES6. J'espère qu'il vous sera utile !
Entrée front-end (vue) au cours de maîtrise : entrez dans l'apprentissage
ECMAScriptest une脚本语言的标准化规范développé par Netscape ; initialement nomméMocha, renommé plus tardLiveScript, et finalement renomméJavaScript
ECMAScript 2015 (ES2015), version 6, initialement connu sous le nom d'ECMAScript 6 (ES6), ajoute de nouvelles fonctionnalités.
Portée du bloc ES6 laissée
Tout d’abord, quelle est la portée ? La portée signifie simplement déclarer une variable. La portée valide de cette variable est avant let come. js n'a que全局作用域et函数作用域de var , et ES6 apporte块级作用域à js.
{
var a = "?";
soit b = "⛳" ;
}
console.log(a);
console.log(b);? Uncaught ReferenceError : b n'est pas défini
Comme vous pouvez le voir, nous utilisons le mot-clé var pour définir la variable a dans le bloc. En fait, elle est accessible globalement. Par conséquent, var声明的变量是全局的, mais nous voulons que la variable prenne effet dans le bloc et soit. accessible après avoir quitté le bloc. Non, vous pouvez utiliser le nouveau mot-clé de portée au niveau du bloc let dans ES6 pour déclarer la variable a. Lorsque j'y accède à nouveau, une erreur est signalée, indiquant que a is not defined , a n'est pas défini.
Comme indiqué ci-dessous, définissez d'abord une fonction qui renvoie un tableau Avant d'utiliser le tableau déstructuré, appelez le tableau et attribuez la valeur de retour à temp, puis imprimez le tableau temporaire. Après avoir utilisé解构数组, définissez directement une variable de tableau, et. Ensuite, la valeur de retour de la fonction pointe vers la variable. Elle attribuera automatiquement la valeur du premier élément à la première variable du tableau, du deuxième élément à la deuxième variable du tableau, et ainsi de suite. Enfin, les trois variables sont imprimées et il n'y en a pas. problème.
fonction petit-déjeuner() {
retour ['?', '?', '?'];
}
var temp = petit déjeuner ();
console.log(temp[0], temp[1], temp[2]);
let [a, b, c] = petit-déjeuner ();
console.log(a, b, c);? ?
Tout d'abord, la fonction breakfast renvoie un对象解构对象pour définir l'objet.La clé dans la paire clé-valeur représente le nom de clé de l'objet réel mappé.La valeur est la variable personnalisée.Une fois la déstructuration terminée, l'affectation est effectuée. sera complété automatiquement. Ensuite, la fonction petit-déjeuner est appelée pour renvoyer l'objet. Imprimez ensuite les variables a, b, c et vous pouvez voir qu'il n'y a pas de problème.
fonction petit-déjeuner() {
retourner { a : ' ?', b : ' ?', c : ' ?' }
}
let { a : a, b : b, c : c } = petit-déjeuner ();
console.log(a, b, c);?
Avant d'utiliser la chaîne modèle, nous concaténons les variables de chaîne en utilisant +
Utilisez la chaîne de modèle fournie par ES6. Utilisez d'abord `` pour envelopper la chaîne. Lorsque vous souhaitez utiliser des variables, utilisez ${变量}
soit a = '?',
b = '?️';
soit c = 'Manger aujourd'hui' + a + 'Voir après avoir mangé' + b ;
console.log(c);
let d = `Mangez ${a} aujourd'hui et regardez après avoir mangé ${b}` ;
console.log(d);Manger aujourd'hui ? On verra après avoir mangé ?️ Manger aujourd'hui ? On verra après avoir mangé ?️
En utilisant ces fonctions, vous pouvez facilement effectuer des opérations telles que savoir si la chaîne commence par quelque chose, si la chaîne se termine par quelque chose et si elle contient une chaîne.
let str = 'Bonjour, je suis Xiao Zhou ❤️';
console.log(str.startsWith('Bonjour'));
console.log(str.endsWith('❤️'));
console.log(str.endsWith('Bonjour'));
console.log(str.includes(" "));vrai vrai FAUX vrai
Dans ES6, vous pouvez utiliser les paramètres par défaut Lors de l'appel d'une fonction, si aucune valeur n'est attribuée au paramètre, elle sera exécutée en utilisant les paramètres par défaut définis. Lorsqu'une valeur est affectée au paramètre, elle sera exécutée en utilisant les paramètres nouvellement attribués. valeur, en écrasant la valeur par défaut. Utilisez ce qui suit :
fonction dire(str) {
console.log(str);
}
function say1(str = 'Hey') {
console.log(str);
}
dire();
dire1();
say1('❤️');indéfini Hé hé❤️
Utilisez ... pour développer les éléments afin de faciliter leur utilisation :
let arr = ['❤️', '?', '?']; console.log(arr); console.log(...arr); soit brr = ['Prince', ...arr]; console.log(brr); console.log(...brr);
[ '❤️', '?', '?' ] ❤️ ? [ 'Prince', '❤️', '?', '?' ] Prince ❤️ ?
L'opérateur ... est utilisé sur les paramètres de fonction et reçoit un tableau de paramètres. Il est utilisé comme suit :
fonction f1(a, b, ...c) {
console.log(a, b, c);
console.log(a, b, ...c);
}
f1('?','?','☃️','㊙️');? [ '☃️', '㊙️' ] ? ?
Vous pouvez utiliser .name pour obtenir le nom de la fonction. L'utilisation spécifique est la suivante :
fonction f1() { }
console.log(f1.name);
soit f2 = function () { } ;
console.log(f2.nom);
soit f3 = fonction f4() { };
console.log(f3.name);f1 f2 f4
L'utilisation des fonctions fléchées peut rendre le code plus concis, mais vous devez également faire attention aux limitations des fonctions fléchées, et la fonction flèche elle-même n'a pas cela, cela pointe vers le parent
soit f1 = a => a;
soit f2 = (a, b) => {
renvoyer a + b ;
}
console.log(f1(10));
console.log(f2(10, 10));10 20
En utilisant l'expression d'objet d'es6, si l'attribut d'objet est le même que la valeur, la valeur peut être omise et function peut être omise lors de l'écriture de la fonction.
soit a = '㊙️';
soit b = '☃️' ;
const obj = {
une: une,
b:b,
dites : fonction () {
}
}
const es6obj = {
un,
b,
dire() {
}
}
console.log(obj);
console.log(es6obj); { a : '㊙️', b : '☃️', dites : [Fonction : dites] }
{ a : '㊙️', b : '☃️', dites : [Fonction : dites] } Utilisez le mot-clé const pour définir la mesure. const limite l'action d'attribution de valeurs à la mesure, mais ne limite pas la valeur dans la mesure. Utilisez ce qui suit :
const app = ['☃️', '?'];
console.log(...app);
app.push('?');
console.log(...app);
application = 10 ;Vous pouvez constater que lorsque vous attribuez à nouveau une valeur à la mesure, une erreur est signalée.
☃️ ? ☃️ ? application = 10 ; ^ TypeError : affectation à une variable constante.
Lorsque vous utilisez des points pour définir les attributs d'un objet, si le nom de l'attribut contient des espaces, cela est illégal et la syntaxe ne peut pas être transmise. L'utilisation de [属性名] peut parfaitement résoudre le problème, et non seulement le nom de l'attribut peut être écrit directement, mais également. peut être spécifié à l'aide de variables. L'utilisation spécifique est la suivante :
soit obj = {} ;
soit a = 'petit nom';
obj.name = 'Prince';
// Il est illégal d'utiliser des points pour définir des attributs avec des espaces au milieu // obj.little name = 'Petit Prince';
obj[a] = 'Petit Prince';
console.log(obj); { nom : 'Prince', 'petit nom' : 'Petit Prince' } Les résultats de la comparaison de certaines valeurs spéciales à l'aide de === ou == peuvent ne pas répondre à vos besoins. Vous pouvez utiliser Object.is(第一个值，第二个值) pour juger, et vous pourriez être heureux.
console.log(NaN == NaN); console.log(+0 == -0); console.log(Object.is(NaN, NaN)); console.log(Object.is(+0, -0));
FAUX vrai vrai FAUX
Utilisez Object.assign() pour copier un objet vers un autre objet, comme suit :
soit obj = {} ;
Objet.assign(
// objet source,
// Copier l'objet cible { a: '☃️' }
);
console.log(obj); { une : '☃️' }Vous pouvez utiliser es6 pour définir le prototype d'un objet comme suit :
soit obj1 = {
obtenir() {
renvoyer 1 ;
}
}
soit obj2 = {
une: 10,
obtenir() {
retourner 2 ;
}
}
laissez test = Object.create(obj1);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
Object.setPrototypeOf(test, obj2);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);1 vrai 2 vrai
soit obj1 = {
obtenir() {
renvoyer 1 ;
}
}
soit obj2 = {
une: 10,
obtenir() {
retourner 2 ;
}
}
laissez tester = {
__proto__:obj1
}
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
test.__proto__ = obj2;
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);1 vrai 2 vrai
soit obj1 = {
obtenir() {
renvoyer 1 ;
}
}
laissez tester = {
__proto__ : obj1,
obtenir() {
return super.get() + ' ☃️';
}
}
console.log(test.get());1 ☃️
Avant d'apprendre, écrivez d'abord un itérateur
fonction mourir(arr) {
soit je = 0 ;
retour {
suivant() {
let done = (i >= arr.length);
let value = !done ? arr[i++] : non défini;
retour {
valeur : valeur,
fait: fait
}
}
}
}
let arr = ['☃️', '?', '?'];
laissez mourirArr = mourir(arr);
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next()); { valeur : '☃️', terminé : faux }
{ valeur : '?', terminé : faux }
{ valeur : '?', terminé : faux }
{ valeur : non défini, terminé : vrai }OK, regardons le générateur simplifié
fonction* mourir(arr) {
pour (soit i = 0; i < arr.length; i++) {
rendement arr[i];
}
}
let test = die(['?','☃️']);
console.log(test.next());
console.log(test.next());
console.log(test.next()); { valeur : '?', terminé : faux }
{ valeur : '☃️', terminé : faux }
{ valeur : non défini, terminé : vrai }Utilisez es6 pour créer des classes rapidement et facilement, super
classe stu {
constructeur (nom) {
this.name = nom ;
}
dire() {
renvoie this.name + 'Dites Ori';
}
}
let xiaoming = new stu("小明");
console.log(xiaoming.say());Xiao Ming a dit qu'Ori avait donné
Définir des méthodes get/set pour obtenir ou modifier les attributs de classe
classe stu {
constructeur (nom) {
this.name = nom ;
}
obtenir() {
renvoie this.name ;
}
set(nouvelleStr) {
this.name = newStr;
}
}
let xiaoming = new stu("小明");
console.log(xiaoming.get());
xiaoming.set("Daming")
console.log(xiaoming.get());Xiao Ming et Da Ming
Les méthodes modifiées avec le mot-clé static peuvent être utilisées directement sans instancier l'objet.
classe stu {
statique dire(str) {
console.log(str);
}
}
stu.say("Méthode statique originale");Méthode statique originale
L'utilisation de l'héritage peut réduire la redondance du code, par exemple :
classe Personne {
constructeur (nom, bir) {
this.name = nom ;
this.bir = bir;
}
showInfo() {
return 'Nom :' + this.name + 'Anniversaire :' + this.bir;
}
}
la classe A étend Person {
constructeur (nom, bir) {
super(nom, nom);
}
}
let zhouql = new A("Zhou Qiluo", "2002-06-01");
// Zhou Qiluo lui-même n'a pas de méthode showInfo, elle est héritée de la console.log(zhouql.showInfo()) de Person ;Nom : Zhou Qiluo Anniversaire : 01/06/2002
La collection Set, contrairement aux tableaux, n'autorise pas les éléments en double dans la collection Set
//Créer une collection Set let food = new Set('??');
// Ajoutez à plusieurs reprises, un seul peut entrer food.add('?');
nourriture.ajouter('?');
console.log(nourriture);
//Taille actuelle de la collection console.log(food.size);
// Détermine si un élément existe dans la collection console.log(food.has('?'));
// Supprime un élément de la collection food.delete('?');
console.log(nourriture);
// Parcourez la collection food.forEach(f => {
console.log(f);
});
// Efface la collection food.clear();
console.log(nourriture); Ensemble(3) { '?', '?', '?' }
3
vrai
Ensemble(2) { '?', '?' }
?
?
Ensemble(0) {}La carte se combine pour stocker des paires clé-valeur
let food = new Map();
soit a = {}, b = function () { }, c = "nom" ;
nourriture.set(a, '?');
nourriture.set(b, '?');
nourriture.set(b, '?');
food.set(c, 'riz');
console.log(nourriture);
console.log(food.size);
console.log(food.get(a));
nourriture.delete(c);
console.log(nourriture);
console.log(food.has(a));
food.forEach((v, k) => {
console.log(`${k} + ${v}`);
});
food.clear();
console.log(nourriture); Map(3) { {} => '?', [Fonction : b] => '?', 'nom' => 'riz' }
3
?
Carte(2) { {} => '?', [Fonction : b] => '?' }
vrai
[objet Objet] + ?
fonction () { } + ?
Carte(0) {}Grâce au développement modulaire, es6 peut facilement importer et exporter certains contenus, ainsi que l'exportation par défaut et d'autres détails.
soit a = '?';
soit f1 = fonction (str = 'Vos paramètres') {
console.log(str);
}
exporter { a, f1 } ; importer {a, f1} depuis './27moduletest.js' ;
console.log(a);
f1();
f1('compris');