Heim  >  Artikel  >  Web-Frontend  >  Was sind die 6 Variablendefinitionsmethoden in es6?

Was sind die 6 Variablendefinitionsmethoden in es6?

青灯夜游
青灯夜游Original
2023-01-29 19:10:592081Durchsuche

6 Möglichkeiten, Variablen in es6 zu definieren: 1. Verwenden Sie das Schlüsselwort var, um eine Variable zu definieren, die Syntax „var variable name = value;“ 2. Verwenden Sie das Schlüsselwort function, um eine Variable zu definieren; Definieren Sie eine Variable, die Syntax „const Variablenname = Wert;“ 4. Verwenden Sie das Schlüsselwort let, um die Variable zu definieren, und die Syntax lautet „let Variablenname = Wert;“ 5. Verwenden Sie das Schlüsselwort import, um die Variable zu definieren; 6. Verwenden Sie das Schlüsselwort class, um die Variable zu definieren.

Was sind die 6 Variablendefinitionsmethoden in es6?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

es6 6 Möglichkeiten zum Deklarieren von Variablen


es5 bietet nur zwei Möglichkeiten zum Deklarieren von Variablen, nämlich var und function.

ES6 Zusätzlich zum Hinzufügen von let- und const-Befehlen gibt es zwei Möglichkeiten, Variablen zu deklarieren: Importbefehl und Klassenbefehl.

Also hat ES6 insgesamt 6 Möglichkeiten, Variablen zu deklarieren, nämlich var/function/let/const/import/class

(1) var command

var a ;  //undefined
var b = 1;
  • var deklarierte Variablenfunktion Domänen sind global oder Funktionsebene.
  • Durch var definierte Variablen können geändert werden, wenn sie nicht initialisiert werden, wird undefiniert ausgegeben und es wird kein Fehler gemeldet.
  • Die von var deklarierte Variable befindet sich im Fenster. Verwenden Sie let oder const, um die Variable zu deklarieren.
  • Viele Sprachen haben Bereiche auf Blockebene, JS jedoch nicht. Es verwendet var, um Variablen zu deklarieren und Funktionen zu verwenden (man kann auch sagen, dass geschweifte Klammern „{}“ verwendet werden), um den Bereich zu unterteilen, aber die geschweifte Klammern „{ }“ begrenzen Es kann den Bereich von var nicht erreichen, sodass mit var deklarierte Variablen den Effekt einer Variablenheraufstufung haben.

(2) Der Funktionsbefehl

function add(a) {
  var sum = a + 1;
  return sum;
}
  • deklariert eine neue Variable namens add und weist ihr eine Funktionsdefinition zu. Der Inhalt zwischen
  • { } wird zum Hinzufügen zugewiesen.
  • Der Code innerhalb der Funktion wird nicht unmittelbar nach der Deklaration ausgeführt , sondern wird lediglich in Variablen für die zukünftige Verwendung gespeichert.

(3) cosnt-Befehl

const a;     //报错,必须初始化
const b = 1; 
b = 2;      //报错,TypeError: Assignment to constant variable.
  • const definiert eine Konstante und muss initialisiert werden.
  • Der Zeiger einer mit dem Schlüsselwort const deklarierten Konstante kann nicht geändert werden. Hier wird gesagt, dass sich der konstante Zeiger nicht ändern kann, aber der Wert des Speicherplatzes, auf den der Zeiger zeigt, kann sich ändern.
    Zum Beispiel:
const obj = {};
obj.n = 123;
obj; // { n: 123 }
obj = { x: 1 }; // TypeError: Assignment to constant variable.

const deklariert ein Objekt mit dem Namen obj. Durch das Hinzufügen von Attributen zum Objekt werden Daten zu den Daten des Objekts hinzugefügt, sodass es ausgeführt werden kann erfolgreich, aber der Vorgang der Neuzuweisung von obj ändert den Zeiger von obj, sodass der Vorgang fehlschlägt und ein Fehler ausgegeben wird.
Das Gleiche gilt für Basistypen, da die Daten der Basistypen direkt auf dem Stapel gespeichert werden und der Konstantenname direkt auf die Daten an dieser Adresse verweist. Sobald der Wert geändert wird, ändert sich die Zeigeradresse und wird erstellt die Illusion, dass der Wert nicht geändert werden kann.

  • Diese Variable ist eine globale Variable oder eine globale Variable innerhalb des Moduls mit Gültigkeitsbereich auf Blockebene.

  • Wenn eine Variable bei der Deklaration nur einmal zugewiesen wird und in anderen Codezeilen nie neu zugewiesen wird, sollte const verwendet werden, aber der Anfangswert der Variablen kann in Zukunft angepasst werden (konstante Variable).

  • Const-definierte Variablen werden im Allgemeinen verwendet, wenn ein Modul benötigt wird oder einige globale Konstanten definiert werden.

  • Konstante darf nicht denselben Namen wie andere Variablen oder Funktionen in ihrem Gültigkeitsbereich haben.

(4) let command

erfordert „strikten Javascript-Modus“: ‚use strict‘; Wenn das Skript ausgeführt wird, ist b bereits vorhanden, es wurde jedoch kein Wert zugewiesen, sodass undefiniert ausgegeben wird.

Variable a wird mit let deklariert und es erfolgt keine Variablenheraufstufung. Vor der Deklaration von Variable a existiert a nicht, daher wird ein Fehler gemeldet.

Doppelte Deklarationen sind nicht zulässig.

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

let kann nur einmal deklariert werden, var kann mehrmals deklariert werden Innerhalb der Funktion definiert, Keine Auswirkung auf die Außenseite der Funktion

Sie können der Variablen beim Deklarieren einen Wert zuweisen, und der Standardwert ist undefiniert. Sie können der Variablen auch später im Skript einen Wert zuweisen kann nicht vor der Deklaration verwendet werden (vorübergehende Totzone)
let a = 1;
let a = 2;
var b = 3;
var b = 4;
a  // Identifier 'a' has already been declared
b  // 4

Hinweis
: ES6 legt eindeutig fest, dass, wenn in einem Codeblock let oder const vorhanden ist, der Codeblock vom Anfang des Blocks bis zu den deklarierten Variablen einen geschlossenen Bereich bildet durch diese Befehle. Innerhalb eines Codeblocks führt die Verwendung der Variablen PI vor der Deklaration zu einem Fehler.

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

(5) Der Importbefehl

wird zum Laden von Dateien verwendet. In den geschweiften Klammern müssen ein oder mehrere Variablennamen mit den gewünschten Variablennamen übereinstimmen importieren.

举个栗子:你想要导入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前端

Das obige ist der detaillierte Inhalt vonWas sind die 6 Variablendefinitionsmethoden in es6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn