Quelles sont les 6 méthodes de définition de variables dans es6

6 façons de définir des variables dans es6 : 1. Utilisez le mot-clé var pour définir une variable, la syntaxe "var variable name = value;" 2. Utilisez le mot-clé function pour définir une variable ; définissez une variable, la syntaxe "const Nom de la variable = valeur;" 4. Utilisez le mot-clé let pour définir la variable, et la syntaxe est "let nom de la variable = valeur;" 5. Utilisez le mot-clé import pour définir la variable ; 6. Utilisez la classe de mots-clés pour définir la variable.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

es6 6 façons de déclarer des variables

---

es5 ne propose que deux façons de déclarer des variables, à savoir var et fonction.

ES6 En plus d'ajouter les commandes let et const, il existe deux façons de déclarer des variables : la commande import et la commande class.

Donc, ES6 a un total de 6 façons de déclarer des variables, à savoir var / function / let / const / import / class

(1) var command

var a ;　　//undefined
var b = 1;

• var Le rôle de les variables déclarées Les domaines sont globaux ou fonction-niveau.
• Les variables définies par var peuvent être modifiées si elles ne sont pas initialisées, undéfini sera affiché et aucune erreur ne sera signalée.
• La variable déclarée par var est sur la fenêtre. Utilisez let ou const pour déclarer la variable. Cette variable ne sera pas placée sur la fenêtre.
• De nombreux langages ont une portée au niveau du bloc, mais pas JS. Il utilise var pour déclarer des variables et des fonctions (ou des accolades '{ }') pour diviser la portée, mais les accolades "{ }" limitent cela. atteindre la portée de var, donc les variables déclarées avec var ont pour effet de promotion de variable.

(2) La commande de fonction

function add(a) {
　　var sum = a + 1;
　　return sum;
}

• déclare une nouvelle variable nommée add et lui attribue une définition de fonction. Le contenu entre
• { } est assigné à ajouter.
• Le code à l'intérieur de la fonction ne sera pas exécuté immédiatement après la déclaration , mais est simplement stocké dans des variables pour une utilisation future.

(3) commande cosnt

const a;     //报错，必须初始化
const b = 1; 
b = 2;      //报错，TypeError: Assignment to constant variable.

• const définit une constante et doit être initialisée.
• Le pointeur d'une constante déclarée avec le mot-clé const ne peut pas être modifié. Ce qui est dit ici, c'est que le pointeur constant ne peut pas changer, mais la valeur de l'espace mémoire pointé par le pointeur peut changer.
  Par exemple :

const obj = {};
obj.n = 123;
obj; // { n: 123 }
obj = { x: 1 }; // TypeError: Assignment to constant variable.

const déclare un objet nommé obj. Le pointeur obj pointe vers un objet ajoute des données aux données de l'objet sans modifier l'objet stocké dans l'adresse obj, afin qu'il puisse être exécuté. avec succès, mais l'opération de réaffectation d'obj modifie le pointeur d'obj, donc l'opération échoue et une erreur est générée.
Il en va de même pour les types de base, car les données des types de base sont stockées directement sur la pile, et le nom de la constante pointe directement vers les données à cette adresse. Une fois la valeur modifiée, l'adresse du pointeur changera, donc elle crée. l'illusion que la valeur ne peut pas être modifiée.

• Cette variable est une variable globale, ou une variable globale au sein du module, avec une portée au niveau du bloc.

• Si une variable se voit attribuer une valeur une seule fois lorsqu'elle est déclarée et ne sera jamais réaffectée dans d'autres lignes de code, alors const doit être utilisé, mais la valeur initiale de la variable peut être ajustée à l'avenir (variable constante ).

• Les variables définies par Const sont généralement utilisées lorsqu'elles nécessitent un module ou définissent des constantes globales.

• Constant ne peut pas avoir le même nom que d'autres variables ou fonctions dans sa portée.

(4) let command

nécessite le "mode javascript strict": 'use strict';

----Il n'y a pas de promotion de variable

console.log(a);  //ReferenceError: a is not defined
let a = "apple";
 
console.log(b);  //undefined
var b = "banana";

La variable b est déclarée avec var, et il y a une promotion de variable, donc lorsque le script commence à s'exécuter, b existe déjà, mais aucune valeur n'a été attribuée, donc undefined sera affiché.
La variable a est déclarée avec let et il n'y a pas de promotion de variable. Avant de déclarer la variable a, a n'existe pas, donc une erreur sera signalée.

Les déclarations en double ne sont pas autorisées

let a = 1;
let a = 2;
var b = 3;
var b = 4;
a  // Identifier 'a' has already been declared
b  // 4

let ne peut être déclaré qu'une seule fois, var peut être déclaré plusieurs fois

Portée au niveau du bloc (c'est-à-dire valide uniquement dans un { })

{
  let a = 0;
  a   // 0
}
a   // 报错 ReferenceError: a is not defined

Après let est défini à l'intérieur de la fonction, aucun impact à l'extérieur de la fonction

Vous pouvez attribuer une valeur à la variable lors de sa déclaration, et la valeur par défaut n'est pas définie. Vous pouvez également attribuer une valeur à la variable plus tard dans le script. ne peut pas être utilisé avant la déclaration (zone morte temporaire)

let a;
console.log(a);    //  undefined
console.log(b);   // ReferenceError: b is not defined
let b = 1;
a = 2;
console.log(a);     // 2

Remarque : ES6 stipule clairement que s'il y a let ou const dans un bloc de code, le bloc de code formera une portée fermée depuis le début du bloc jusqu'aux variables déclarées par ces commandes. Au sein d'un bloc de code, utiliser la variable PI avant de la déclarer entraînera une erreur.

var PI = "a";
if(true){
  console.log(PI);  // ReferenceError: PI is not defined
  const PI = "3.1415926";
}

(5) La commande d'importation

import est utilisée pour charger des fichiers. Ce qui est reçu entre accolades est un ou plusieurs noms de variables. Ces noms de variables doivent être les mêmes que les noms de variables souhaités. à importer.

举个栗子：你想要导入action.js文件中的某一个变量，这个变量里保存了一段代码块，所以你要写成：import { Button } from 'action'，这个时候，你就从action.js中获取到了一个叫 Button 的变量，既然获取到了，你就可以对Button里的代码猥琐欲为了

如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名，比如：

import { NewButton as Button } from 'action.js';

上面的代码表示从action.js文件中，获取一个变量名称叫做Button的代码段，然后你又声明了一个变量 NewButton ，将 Button 保存在 NewButton

(6) class命令

在es5中我们是使用构造函数实例化出来一个对象，那么构造函数与普通的函数有什么区别呢？其实没有区别，无非就是函数名称用首字母大写来加以区分，这个不用对说对es5有了解的朋友都应该知道。
但是es5的这种方式给人的感觉还是不够严谨，于是在es6中就换成了class，就是把es5中的function换成了class，有这个单词就代表是个构造函数，然后呢对象还是new出来的，这一点并没有变化。

类的使用

从里面的代码我们可以看到除了function变成了class以外，其它的跟es5一样

class Coder{
    name(val){
        console.log(val);
    }}
 let shuang= new Coder;shuang.name('shuang');

类的传参

在es6中的对象的属性都是写在constructor里面，方法都是在原型身上。在这里面的代码用constructor约定了两个参数，然后用add（）方法把参数相加，这个地方跟以前不太一样，所以需要多注意一下。

class Coder{
    name(val){
        console.log(val);
        return val;
    }

    constructor(a,b){
        this.a=a;
        this.b=b;
    }
 
    add(){
        return this.a+this.b;
    }}
 let shuang=new Coder(1,2);console.log(shuang.add());

class的继承

class的继承就是用extends

class shuang extends Coder{
 }
 let shuang=new shuang;shuang.name('Angel爽');

声明一个shuang的新类，用extends继承了Coder，调用里面的name方法，发现也是可以输出的。

学习总结：

---

一、用关键字var声明变量

1、var声明的全局对象是顶级对象（window）的属性；

2、用var在函数外声明的对象为全局变量，在函数内声明的对象为局部变量；

3、用var可以对同一对象重复声明和赋值；

4、用var声明的对象具有变量提升的作用（声明提前，赋值不提前）；

二、用关键字function声明变量

1、用function声明的函数对象具有变量提升的作用（声明提前，赋值不提前）；

2、function声明的函数对象是顶级对象（window）的属性；

三、用关键字let声明变量

1、用let声明的变量在块级作用域内有效；

2、let声明的变量不存在变量提升；

3、let声明的变量存在暂时性死区（即同一个块级作用域中，在let声明该变量的语句之前，该变量已经存在，但是不能使用）；

4、在同一个作用域内，对于let声明的变量不能重复声明。

四、用关键字const声明变量

1、const命令声明的值一旦声明，就不能再次改变；

2、const声明变量时，必须立即初始化，否则会报错（因为值一旦声明不可改变）；

3、const声明的变量不存在变量提升；

4、const声明的变量存在暂时性死区；

5、const声明的变量只在块级作用域内有效；

6、const变量在同一个作用域内不能重复声明。

五、关于变量提升

1、只有声明本身会被提升，而赋值操作不会被提升。

2、变量会提升到其所在函数的最上面，而不是整个程序的最上面。

3、函数声明会被提升，但函数表达式不会被提升。

4、函数声明的优先级高于普通变量申明的优先级，并且函数声明和函数定义的部分一起被提升。

5、同一个变量只会声明一次，其他的会被忽略掉。

【相关推荐：javascript视频教程、web前端】

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!