Quelles sont les nouvelles syntaxes d'ES6 ? Apprenez vite

let mot-clé

Dans ES5, var est utilisé pour déclarer des variables, tandis que dans ES6, letmot-clé pour déclarer les variables. Alors pourquoi ajouter une nouvelle location ?

Tout d’abord, jetons un œil au mot-clé var.

		function foo() {
			var sum = 0;
			for (var i = 0; i < 100; i++) {
				sum += i;
			}
			alert(i)//输出为100
		}
		foo()

Nous pouvons voir qu'après la fin de la boucle for, nous pouvons toujours obtenir la valeur de la variable

i, mais ce n'est évidemment pas ce que nous voulons. Nous voulons que la variable i ne fonctionne qu'à l'intérieur de la boucle for. Nous introduisons donc let. let peut déclarer une variable de portée bloc. La portée interne d'une paire d'accolades est une portée au niveau du bloc.

Nous avons été agréablement surpris de constater que la boucle for ci-dessus est une portée au niveau du bloc. Utilisons let au lieu de var :

		function foo() {
			var sum = 0;
			for (let i = 0; i < 100; i++) {
				sum += i;
			}
			alert(i)//输出为undefined
		}
		foo()

Quelque chose de magique s'est produit, la valeur de i n'est pas définie et nous ne pouvons pas obtenir la valeur de i dans la boucle for. laissez fonctionner!

Jetons un coup d'œil à la différence entre let et var. let déclare une variable au niveau du bloc, tandis que var déclare une variable au niveau de la fonction. Pour faire simple, la variable déclarée par let n'agit qu'entre les accolades où elle se trouve

mot-clé const

Avant ES6, nous déclarions une constante as Déclaré comme ceci :

var PI = 3.14;//看到没！我大写了PI,不要改啊啊啊啊啊啊！！！！不准给我改！！！出了bug你的锅！！

Nous utilisons généralement des lettres majuscules pour définir les variables afin de dire aux responsables de ne pas modifier les variables. Et dans ES6, Hehe~ Nous pouvons utiliser const pour définir des constantes. Regardez l'exemple ci-dessous :

const uCannotChangeMe = "你有本事变了我试试？？？"
alert(uCannotChangeMe)

Le résultat après exécution :

Tellement stupide ? ? ? Nous avons donc essayé de changer la valeur de la variable et ajouté une ligne au code :

const uCannotChangeMe = "你有本事变了我试试？？？"
uCannotChangeMe = "试试就试试"
alert(uCannotChangeMe)

Résultats d'exécution :

Nous avons constaté que le navigateur a signalé une erreur de type et n'a pas pu être modifié. La valeur de la variable ! ! ! ! Cependant, l’utilisation de var ne pose pas ce problème. Par conséquent, nous pouvons utiliser const pour déclarer certaines quantités qui ne sont pas autorisées à changer. Par exemple, si nous voulons utiliser PI pour calculer l'aire d'un cercle, alors nous le définissons comme ceci :

const PI = 3.14

Cela empêchera d'autres personnes de modifier accidentellement la valeur de PI et de provoquer des erreurs de calcul .

Fonction flèche (Fonction flèche)

Lors de l'écriture d'une fonction à l'aide d'ES5, qu'il s'agisse d'une fonction anonyme ou non, nous écrivons toujours function(){... .. ......}, comme ceci :

function (x) {
	 return x+x
	}

Cependant, dans ES6 on peut écrire comme ceci :

x=>x+x

Pour plusieurs paramètres, on peut écrire comme ceci :

(x,y)=>x+y

S'il y a une déclaration de jugement, nous devons ajouter des accolades ｛｝ :

x=>｛
    if(x>0) return 0
    else   rerun 1
｝

Lors de l'appel, nous pouvons attribuer une valeur à la fonction et l'appeler avec parenthèses :

let b = x=>x=x*x
b(3)

En fait, la fonction flèche est le sucre syntaxique qui nous est fourni par ES6 lorsque nous écrivons la fonction. Elle nous permet d'omettre quelques étapes et le background la générera automatiquement pour nous.

Classe

Nous savons que JavaScript est différent des autres langages. Ce n'est pas un langage orienté objet traditionnel. Nous utilisons généralement des fonctions pour imiter des objets. les plus couramment utilisés. Méthode :

function people(身高, 体重) {
			//people对象的属性
			this.身高 = 身高;
			this.体重 = 体重;
		}
		//people对象的方法
		people.prototype.说话 = function () {
			alert("我很帅")
		};

Le code n'a pas l'air très intuitif. Il est difficile pour les programmeurs qui débutent avec js de penser qu'il s'agit d'un objet. pas écrits ensemble, et le code est très propre.

Dans ES6 nous avons introduit CLASS, écrit comme ceci :

		class people {
                //属性写这里
			constructor(身高, 体重) {
				this.身高 = 身高;
				this.体重 = 体重;
			}
                //方法写这里
			说话() {
				alert("我很帅")
			}
		}

L'appel est toujours le même qu'avant :

                var 小明 = new people(180, 145);

Héritage de classe

Depuis Dans ES6, nos classes sont écrites en utilisant des classes, alors comment implémenter l'héritage de classe ? Toujours comme dans l'exemple précédent, dans ES5, il nous est très gênant d'écrire un héritage. Nous utilisons l'objet

pour usurper l'identité de la méthode /call/apply afin d'hériter des propriétés de l'objet, et utilisons la chaîne de prototypes pour hériter des méthodes de l'objet. Juste comme ceci :

		function man(身高, 体重){
			people.call(this,身高,体重) //call()继承属性
		}
		man.prototype = new people()//原型链继承方法

Dans ES6, il est plus pratique pour nous d'implémenter l'héritage de classe. Regardons d'abord l'exemple suivant :

		class man extends people{
			constructor(身高,体重){
				super(身高,体重)
			}
		}

Nous utilisons extends people(). pour implémenter l'héritage de chaîne de prototype. Hérite des méthodes du prototype de la classe parent ; le paramètre super() remplit les attributs de la classe parent qui doivent être hérités ; le constructeur() remplit tous les attributs de la sous-classe.

En termes de fonction, il n'y a pas de différence entre l'héritage de classe et "l'héritage de fonction" traditionnel. En fait, la classe est du sucre syntaxique, ce qui simplifie grandement le code requis pour l'héritage. Cependant, désormais (2018), tous les navigateurs grand public ne prennent pas en charge la syntaxe de classe, mais nous pouvons utiliser l'outil Babel pour convertir ES6 en ES5 afin de l'utiliser.

Remarque : Babel peut être ajouté et utilisé dans le webpack.

Recommandations associées :

Explication des nouvelles méthodes mathématiques et numériques dans JavaScript ES6

Exemples détaillés de nouvelles méthodes de tableau tableau dans ES6

Partage sur les nouvelles méthodes de chaîne de caractères couramment utilisées dans ES6

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!