Heim Web-Frontend js-Tutorial Ausführliche Erläuterung von Variablen, Umfang und Förderung in JavaScript

Ausführliche Erläuterung von Variablen, Umfang und Förderung in JavaScript

Oct 14, 2020 pm 05:37 PM
javascript 变量 提升 范围

Ausführliche Erläuterung von Variablen, Umfang und Förderung in JavaScript

Variablen sind ein grundlegender Bestandteil vieler Programmiersprachen und das erste und wichtigste Konzept, das Anfänger lernen müssen. In JavaScript gibt es viele verschiedene Variableneigenschaften sowie einige Regeln, die bei der Benennung von Variablen befolgt werden müssen. In JavaScript werden drei Schlüsselwörter zum Deklarieren von Variablen verwendet – var, let und const –, die sich jeweils unterschiedlich auf die Art und Weise auswirken, wie der Code die Variable interpretiert.

In diesem Tutorial erfahren Sie, was Variablen sind, wie Sie sie deklarieren und benennen und welche Unterschiede zwischen var, let und const es gibt. Wir werden auch die Auswirkungen des Hebens und die Bedeutung globaler und lokaler Bereiche auf das Verhalten von Variablen untersuchen.

Variablen verstehen

Eine Variable ist ein benannter Container, der zum Speichern von Werten verwendet wird. Eine Information, auf die wir möglicherweise mehrfach verweisen, kann zur späteren Verwendung oder Änderung in einer Variablen gespeichert werden. In JavaScript kann der in einer Variablen enthaltene Wert ein beliebiger JavaScript-Datentyp sein, einschließlich Zahlen, Zeichenfolgen oder Objekte.

Vor der Sprachspezifikation ECMAScript 2015 (ES6), auf der das heutige JavaScript basiert, gab es nur eine Möglichkeit, Variablen zu deklarieren – mit dem Schlüsselwort var. Daher verwenden die meisten älteren Code- und Lernressourcen nur var für Variablen. Wir werden den Unterschied zwischen den Schlüsselwörtern var, let und const in einem separaten Abschnitt weiter unten besprechen.

Wir können var verwenden, um das Konzept der Variablen selbst zu demonstrieren. Im folgenden Beispiel deklarieren wir eine Variable und weisen ihr einen Wert zu.

// Assign the string value Sammy to the username identifier
var username = "sammy_shark";
Nach dem Login kopieren

Diese Anweisung besteht aus den folgenden Teilen:

  • Verwenden Sie das Schlüsselwort var, um Variablen zu deklarieren

  • Variablenname (oder Bezeichner), Benutzername

  • Zuweisungsvorgang, dargestellt durch =-Syntax

  • Zugewiesener Wert „sammy_shark“

Jetzt können wir den Benutzernamen in unserem Code verwenden. JavaScript merkt sich, dass der Benutzername den Zeichenfolgenwert sammy_shark darstellt.

// Check if variable is equal to value
if (username === "sammy_shark") {
  console.log(true);
  }
Nach dem Login kopieren

Ausgabe:

true
Nach dem Login kopieren
Nach dem Login kopieren

Wie bereits erwähnt, können Variablen zur Darstellung jedes JavaScript-Datentyps verwendet werden. In diesem Beispiel deklarieren wir Variablen mit Zeichenfolgen-, Zahlen-, Objekt-, booleschen und Nullwerten.

// Assignment of various variables
var name = "Sammy";
var spartans = 300;
var kingdoms = [ "mammals", "birds", "fish" ];
var poem = { roses: "red", violets: "blue" }; 
var success = true;
var nothing = null;
Nach dem Login kopieren

Mit console.log können wir die in einer bestimmten Variablen enthaltenen Werte sehen.

// Send spartans variable to the console
console.log(spartans);
Nach dem Login kopieren

Ausgabe: 300

Variablen speichern Daten im Speicher, auf die später zugegriffen und sie geändert werden können. Variablen können auch neu zugewiesen und mit einem neuen Wert versehen werden. Das folgende vereinfachte Beispiel zeigt, wie man ein Passwort in einer Variablen speichert und diese dann aktualisiert.

//为password变量赋值
var password = "hunter2";
//用一个新值重新分配变量值
password = "hunter3";
console.log(password);
Nach dem Login kopieren

Ausgabe:

'hunter3'
Nach dem Login kopieren

In einem echten Programm wird das Passwort höchstwahrscheinlich sicher in der Datenbank gespeichert. Dieses Beispiel veranschaulicht jedoch eine Situation, in der wir möglicherweise den Wert einer Variablen aktualisieren müssen. Der Wert des Passworts war „hunter2“, wir haben ihn jedoch „hunter3“ zugewiesen, dem Wert, den JavaScript von diesem Zeitpunkt an erkennt.

Benannte Variablen

Variablennamen werden in JavaScript als Bezeichner bezeichnet. Wir haben einige Regeln für die Benennung von Bezeichnern beim Verständnis der JavaScript-Syntax und Codestruktur besprochen, die im Folgenden zusammengefasst sind:

  • Variablennamen dürfen nur aus Buchstaben (a-z), Zahlen (0-9), Dollarzeichen ($) und Unterstrichen ( _) bestehen. ) bestehend aus

  • Variablennamen dürfen keine Leerzeichen (Tabulatoren oder Leerzeichen) enthalten

  • Zahlen dürfen nicht am Anfang des Namens einer Variablen stehen

  • Reservierte Schlüsselwörter können nicht als Namen von Variablen verwendet werden

  • Variablennamen unterscheiden zwischen Groß- und Kleinschreibung

JavaScript hat auch die Angewohnheit, camelCase (manchmal als CamelCase bezeichnet) in den Namen von Funktionen und Variablen zu verwenden, die mit var oder let deklariert wurden. Dabei wird das erste Wort kleingeschrieben und dann der erste Buchstabe jedes weiteren Wortes großgeschrieben, ohne Leerzeichen dazwischen. Mit einigen Ausnahmen folgen die meisten nicht konstanten Variablen dieser Konvention. Die Namen von Konstantenvariablen, die mit dem Schlüsselwort const deklariert werden, werden normalerweise in Großbuchstaben geschrieben.

Das scheint eine Menge Regeln zu sein, die es zu lernen gilt, aber es wird bald zur Selbstverständlichkeit, gültige und reguläre Variablennamen zu schreiben.

Unterschied zwischen var, let und const

JavaScript verfügt über drei verschiedene Schlüsselwörter zum Deklarieren von Variablen, was der Sprache zusätzliche Komplexität verleiht. Der Unterschied zwischen den dreien basiert auf Umfang, Beförderung und Neuzuweisung.

🔜 JaletBlockbereich NeinJaNeinconstBlockbereichNeinNeinNein

您可能想知道应该在自己的程序中使用这三种方法中的哪一种。一个普遍接受的做法是尽可能多地使用const,并在循环和重新分配的情况下使用let。通常,在处理遗留代码之外可以避免var。

变量作用域

JavaScript中的作用域是指代码的当前上下文,它决定了变量对JavaScript的可访问性。范围的两种类型是局部的和全局的:

  • 全局变量是在块之外声明的变量

  • 局部变量是在块内声明的变量

在下面的示例中,我们将创建一个全局变量。

//初始化一个全局变量
var creature = "wolf";
Nach dem Login kopieren

我们知道变量可以重新分配。使用局部作用域,我们实际上可以创建与外部作用域中的变量同名的新变量,而无需更改或重新分配原始值。

在下面的示例中,我们将创建一个全局species变量。函数内部是一个具有相同名称的局部变量。通过将它们发送到控制台,我们可以看到变量的值如何根据范围而不同,并且原始值不会更改。

//初始化一个全局变量
var species = "human";
function transform() {
//初始化一个局部的、函数作用域的变量
  var species = "werewolf";
  console.log(species);
}
//记录全局和局部变量
console.log(species);
transform();
console.log(species);
Nach dem Login kopieren

输出:

human
werewolf
human
Nach dem Login kopieren

在本例中,局部变量是函数作用域的。使用var关键字声明的变量总是函数作用域,这意味着它们将函数识别为具有独立作用域。因此,这个局部作用域的变量不能从全局作用域访问。

然而,新的关键字let和const是块范围的。这意味着从任何类型的块(包括函数块、if语句、for和while循环)创建一个新的本地范围。

为了说明函数作用域变量和块作用域变量之间的区别,我们将使用let在if块中分配一个新变量。

var fullMoon = true;
//初始化一个全局变量
let species = "human";
if (fullMoon) { 
//初始化一个块范围的变量
  let species = "werewolf";
  console.log(`It is a full moon. Lupin is currently a ${species}.`);
}
console.log(`It is not a full moon. Lupin is currently a ${species}.`);
Nach dem Login kopieren

输出:

It is a full moon. Lupin is currently a werewolf.
It is not a full moon. Lupin is currently a human.
Nach dem Login kopieren

在此示例中,species变量具有一个值global(human),另一个值local(werewolf)。var但是,如果我们使用,则会有不同的结果。

//使用var初始化一个变量
var species = "human";
if (fullMoon) {  
//尝试在一个块中创建一个新变量
  var species = "werewolf";
  console.log(`It is a full moon. Lupin is currently a ${species}.`);
}

console.log(`It is not a full moon. Lupin is currently a ${species}.`);
Nach dem Login kopieren

输出:

It is a full moon. Lupin is currently a werewolf.
It is not a full moon. Lupin is currently a werewolf.
Nach dem Login kopieren

在这个例子的结果中,全局变量和块范围的变量都以相同的值结束。这是因为您不是使用var创建一个新的本地变量,而是在相同的范围内重新分配相同的变量。var不能识别是否属于不同的新范围。通常建议声明块范围的变量,因为它们生成的代码不太可能无意中覆盖变量值。

变量提升

到目前为止,在大多数示例中,我们已经使用var声明了一个变量,并使用一个值初始化了它。在声明和初始化之后,我们可以访问或重新分配变量。

如果我们试图在变量被声明和初始化之前使用它,它将返回undefined。

//在声明变量之前尝试使用它
console.log(x);
/ /变量赋值
var x = 100;
Nach dem Login kopieren

输出:

undefined
Nach dem Login kopieren
Nach dem Login kopieren

但是,如果省略var关键字,就不再声明变量,而是初始化它。它将返回一个ReferenceError并停止脚本的执行。

//在声明变量之前尝试使用它
console.log(x);
//没有var的变量赋值
x = 100;
Nach dem Login kopieren

输出:

ReferenceError: x is not defined
Nach dem Login kopieren

原因在于提升,这是JavaScript的一种行为,其中变量和函数声明被移到它们作用域的顶部。由于只挂起实际声明,而没有初始化,因此第一个示例中的值返回未定义的值。

为了更清楚地演示这个概念,下面是我们编写的代码以及JavaScript如何解释它。

// The code we wrote
console.log(x);
var x = 100;
// How JavaScript interpreted it
var x;
console.log(x);
x = 100;
Nach dem Login kopieren

JavaScript在执行脚本之前将x保存为内存作为变量。 由于它在定义之前仍然被调用,因此结果是未定义的而不是100.但是,它不会导致ReferenceError并停止脚本。

尽管var关键字实际上并未更改var的位置,但这有助于表示提升的工作原理。 但是,这种行为可能会导致问题,因为编写此代码的程序员可能希望x的输出为true,而不是undefined。

在下一个例子中,我们还可以看到提升是如何导致不可预测的结果的:

//在全局范围内初始化x
var x = 100;
function hoist() {
//不应影响编码结果的条件
  if (false) {
      var x = 200;
  }
  console.log(x);
}

hoist();
Nach dem Login kopieren

输出:

undefined
Nach dem Login kopieren
Nach dem Login kopieren

在本例中,我们声明x全局为100。根据if语句,x可以更改为200,但是由于条件为false,所以它不应该影响x的值。

这种不可预测的行为可能会在程序中引起bug。由于let和const是块范围的,所以它们不会以这种方式提升,如下所示。

//在全局范围内初始化x
let x = true;function hoist() {
//在函数作用域中初始化x
 if (3 === 4) {
      let x = false;
  }
  console.log(x);
}

hoist();
Nach dem Login kopieren

输出:

true
Nach dem Login kopieren
Nach dem Login kopieren

变量的重复声明(这在var中是可能的)将在let和const中抛出一个错误。

//试图覆盖用var声明的变量
var x = 1;
var x = 2;

console.log(x);
Nach dem Login kopieren

输出:2

//试图覆盖用let声明的变量
let y = 1;
let y = 2;

console.log(y);
Nach dem Login kopieren

输出:

Uncaught SyntaxError: Identifier 'y' has already been declared
Nach dem Login kopieren

总之,使用var引入的变量有可能受到提升的影响,提升是JavaScript中的一种机制,其中变量声明被保存到内存中。这可能导致代码中出现未定义的变量。let和const的引入解决了这个问题,它在试图在声明变量之前使用该变量或多次声明该变量时抛出一个错误。

常量

许多编程语言都有常量,这些常量是不能修改或更改的值。在JavaScript中,const标识符是根据常量建模的,不能重新分配分配给const的值。

将所有const标识符都写成大写是常见的约定。这将它们与其他变量值区分开来。

在下面的示例中,我们使用const关键字将变量SPECIES初始化为常量。试图重新分配变量将导致错误。

//给const赋值
const SPECIES = "human"; 

//尝试重新分配值
SPECIES = "werewolf";

console.log(SPECIES);
Nach dem Login kopieren

输出:

Uncaught TypeError: Assignment to constant variable.
Nach dem Login kopieren

因为不能重新分配const值,所以需要同时声明和初始化它们,否则也会抛出错误。

//声明,但不初始化const
const TODO;

console.log(TODO);
Nach dem Login kopieren

输出:

Uncaught SyntaxError: Missing initializer in const declaration
Nach dem Login kopieren

不能在编程中更改的值称为不可变值,而可以更改的值是可变的。虽然const值不能重新分配,但是它们是可变的,因为可以修改用const声明的对象的属性。

//创建一个具有两个属性的CAR对象
const CAR = {
    color: "blue",
    price: 15000}
//修改CAR的属性
CAR.price = 20000;

console.log(CAR);
Nach dem Login kopieren

输出:

{ color: 'blue', price: 20000 }
Nach dem Login kopieren

常量非常有用,可以让将来的自己和其他程序员清楚地认识到,不应该重新分配预期的变量。如果您希望将来修改某个变量,那么您可能希望使用let来声明该变量。

相关免费学习推荐:JavaScript视频教程

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Variablen, Umfang und Förderung in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So erhöhen Sie die kritische Trefferquote in Love und Deep Space So erhöhen Sie die kritische Trefferquote in Love und Deep Space Mar 23, 2024 pm 01:31 PM

Die Charaktere in Love und Deep Sky haben verschiedene numerische Attribute. Das Attribut „Kritische Trefferquote“ wirkt sich auf den Schaden des Charakters aus Im Folgenden finden Sie die Methode zur Verbesserung dieses Attributs, sodass Spieler, die es wissen möchten, einen Blick darauf werfen können. Methode 1. Kernmethode zur Erhöhung der kritischen Trefferquote von Love und Deep Space. Um eine kritische Trefferquote von 80 % zu erreichen, liegt der Schlüssel in der Summe der kritischen Trefferattribute der sechs Karten auf Ihrer Hand. Auswahl von Corona-Karten: Stellen Sie bei der Auswahl von zwei Corona-Karten sicher, dass mindestens einer ihrer Kern-α- und Kern-β-Unterattributeinträge ein kritisches Trefferattribut ist. Vorteile der Lunar Corona-Karte: Die Lunar Corona-Karten enthalten nicht nur einen kritischen Treffer in ihren Grundattributen, sondern wenn sie Level 60 erreichen und nicht durchgebrochen sind, kann jede Karte 4,1 % des kritischen Treffers liefern.

Mindmap der Python-Syntax: Vertiefendes Verständnis der Codestruktur Mindmap der Python-Syntax: Vertiefendes Verständnis der Codestruktur Feb 21, 2024 am 09:00 AM

Python wird aufgrund seiner einfachen und leicht lesbaren Syntax in einer Vielzahl von Bereichen häufig verwendet. Es ist von entscheidender Bedeutung, die Grundstruktur der Python-Syntax zu beherrschen, um sowohl die Programmiereffizienz zu verbessern als auch ein tiefes Verständnis für die Funktionsweise des Codes zu erlangen. Zu diesem Zweck bietet dieser Artikel eine umfassende Mindmap, die verschiedene Aspekte der Python-Syntax detailliert beschreibt. Variablen und Datentypen Variablen sind Container, die zum Speichern von Daten in Python verwendet werden. Die Mindmap zeigt gängige Python-Datentypen, einschließlich Ganzzahlen, Gleitkommazahlen, Zeichenfolgen, boolesche Werte und Listen. Jeder Datentyp hat seine eigenen Eigenschaften und Betriebsmethoden. Operatoren Operatoren werden verwendet, um verschiedene Operationen an Datentypen auszuführen. Die Mindmap deckt die verschiedenen Operatortypen in Python ab, z. B. arithmetische Operatoren und Verhältnisse

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

Wie erhalte ich Variablen aus der PHP-Methode mit Ajax? Wie erhalte ich Variablen aus der PHP-Methode mit Ajax? Mar 09, 2024 pm 05:36 PM

Die Verwendung von Ajax zum Abrufen von Variablen aus PHP-Methoden ist ein häufiges Szenario in der Webentwicklung. Durch Ajax kann die Seite dynamisch abgerufen werden, ohne dass die Daten aktualisiert werden müssen. In diesem Artikel stellen wir vor, wie man Ajax verwendet, um Variablen aus PHP-Methoden abzurufen, und stellen spezifische Codebeispiele bereit. Zuerst müssen wir eine PHP-Datei schreiben, um die Ajax-Anfrage zu verarbeiten und die erforderlichen Variablen zurückzugeben. Hier ist ein Beispielcode für eine einfache PHP-Datei getData.php:

Was sind Instanzvariablen in Java? Was sind Instanzvariablen in Java? Feb 19, 2024 pm 07:55 PM

Instanzvariablen in Java beziehen sich auf Variablen, die in der Klasse definiert sind, nicht in der Methode oder dem Konstruktor. Instanzvariablen werden auch Mitgliedsvariablen genannt. Jede Instanz einer Klasse verfügt über eine eigene Kopie der Instanzvariablen. Instanzvariablen werden während der Objekterstellung initialisiert und ihr Zustand wird während der gesamten Lebensdauer des Objekts gespeichert und beibehalten. Instanzvariablendefinitionen werden normalerweise an der Spitze der Klasse platziert und können mit einem beliebigen Zugriffsmodifikator deklariert werden, der öffentlich, privat, geschützt oder der Standardzugriffsmodifikator sein kann. Es hängt davon ab, was wir wollen

Tiefes Verständnis von const in der C-Sprache Tiefes Verständnis von const in der C-Sprache Feb 18, 2024 pm 12:56 PM

Ausführliche Erklärung und Codebeispiele von const in C. In der C-Sprache wird das Schlüsselwort const zum Definieren von Konstanten verwendet, was bedeutet, dass der Wert der Variablen während der Programmausführung nicht geändert werden kann. Mit dem Schlüsselwort const können Variablen, Funktionsparameter und Funktionsrückgabewerte geändert werden. Dieser Artikel bietet eine detaillierte Analyse der Verwendung des Schlüsselworts const in der C-Sprache und stellt spezifische Codebeispiele bereit. const modifizierte Variable Wenn const zum Ändern einer Variablen verwendet wird, bedeutet dies, dass die Variable eine schreibgeschützte Variable ist und nicht geändert werden kann, sobald ihr ein Wert zugewiesen wurde. Zum Beispiel: constint

jQuery-Nutzungspraxis: Mehrere Möglichkeiten, um festzustellen, ob eine Variable leer ist jQuery-Nutzungspraxis: Mehrere Möglichkeiten, um festzustellen, ob eine Variable leer ist Feb 27, 2024 pm 04:12 PM

jQuery ist eine in der Webentwicklung weit verbreitete JavaScript-Bibliothek, die viele einfache und praktische Methoden zur Bedienung von Webseitenelementen und zur Verarbeitung von Ereignissen bietet. In der tatsächlichen Entwicklung stoßen wir häufig auf Situationen, in denen wir feststellen müssen, ob eine Variable leer ist. In diesem Artikel werden mehrere gängige Methoden zur Verwendung von jQuery vorgestellt, um festzustellen, ob eine Variable leer ist, und um spezifische Codebeispiele anzuhängen. Methode 1: Verwenden Sie die if-Anweisung, um varstr="";if(str){co

Detaillierte Erläuterung des Variablenbereichs in Golang-Funktionen Detaillierte Erläuterung des Variablenbereichs in Golang-Funktionen Jan 18, 2024 am 08:51 AM

Ausführliche Erläuterung des Variablenbereichs in Golang-Funktionen. In Golang bezieht sich der Bereich einer Variablen auf den zugänglichen Bereich der Variablen. Das Verständnis des Variablenbereichs ist wichtig für die Lesbarkeit und Wartbarkeit des Codes. In diesem Artikel werden wir uns eingehend mit dem Variablenbereich in Golang-Funktionen befassen und konkrete Codebeispiele bereitstellen. In Golang kann der Gültigkeitsbereich von Variablen in einen globalen und einen lokalen Gültigkeitsbereich unterteilt werden. Der globale Bereich bezieht sich auf Variablen, die außerhalb aller Funktionen deklariert wurden, dh auf Variablen, die außerhalb der Funktion definiert sind. Diese Variablen können sein

See all articles