Heim Web-Frontend js-Tutorial Was ist const in React?

Was ist const in React?

Nov 27, 2020 pm 04:25 PM
const react

Const in React ist: 1. Die von const deklarierte Variable ist ein Wert, der nicht geändert werden kann. 2. Der Gültigkeitsbereich von const ist der gleiche wie der des let-Befehls. 3. Die vom const-Befehl deklarierte Konstante wird nicht heraufgestuft 4. Die von const deklarierte Konstante ist auch die gleiche wie der let-Befehl. 5. Const deklariert eine schreibgeschützte Konstante.

Was ist const in React?

Die Betriebsumgebung dieses Tutorials: Windows7-System, React17-Version. Diese Methode ist für alle Computermarken geeignet.

const in React ist:

1. Nach der Deklaration kann der Wert einer Konstante nicht mehr geändert werden.

const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.
Nach dem Login kopieren

Der obige Code zeigt, dass das Ändern des Werts einer Konstante zu einem Fehler führt.

2. Von const deklarierte Variablen sind Werte, die nicht geändert werden können. Das bedeutet, dass eine const-Variable sofort initialisiert werden muss und nicht für eine spätere Zuweisung übrig bleiben muss.

const foo;
// SyntaxError: Missing initializer in const declaration
Nach dem Login kopieren

Der obige Code gibt an, dass für const ein Fehler gemeldet wird, wenn Sie nur deklarieren, ohne einen Wert zuzuweisen.

3. Der Gültigkeitsbereich von const ist derselbe wie der let-Befehl: Er ist nur innerhalb des Blockebenenbereichs gültig, in dem sich die Deklaration befindet.

if (true) {
const MAX = 5;
}
MAX // Uncaught ReferenceError: MAX is not defined
Nach dem Login kopieren

4. Die vom const-Befehl deklarierten Konstanten werden nicht hochgestuft. Sie haben auch eine vorübergehende Totzone und können nur nach der deklarierten Position verwendet werden.

if (true) {
console.log(MAX); // ReferenceError
const MAX = 5;
}
Nach dem Login kopieren

Der obige Code wird aufgerufen, bevor die Konstante MAX deklariert wird, und ein Fehler wird gemeldet.

5. Mit const deklarierte Konstanten können nicht wie let wiederholt deklariert werden.

var message = "Hello!";
let age = 25;
// 以下两行都会报错
const message = "Goodbye!";
const age = 30;
Nach dem Login kopieren

6. Bei zusammengesetzten Variablen verweist der Variablenname nicht auf die Daten, sondern auf die Adresse, an der sich die Daten befinden. Der Befehl const stellt nur sicher, dass die Adresse, auf die der Variablenname zeigt, unverändert bleibt, garantiert jedoch nicht, dass die Daten an dieser Adresse unverändert bleiben. Daher müssen Sie beim Deklarieren eines Objekts als Konstante sehr vorsichtig sein.

const foo = {};
foo.prop = 123;
foo.prop
// 123
foo = {}; // TypeError: "foo" is read-only
Nach dem Login kopieren

Im obigen Code speichert die Konstante foo eine Adresse, die auf ein Objekt zeigt. Das Einzige, was unveränderlich ist, ist diese Adresse, das heißt, Sie können foo nicht auf eine andere Adresse verweisen, aber das Objekt selbst ist veränderbar, sodass Sie ihm immer noch neue Eigenschaften hinzufügen können.

Hier ist ein weiteres Beispiel.

const a = [];
a.push('Hello'); // 可执行
a.length = 0; // 可执行
a = ['Dave']; // 报错
Nach dem Login kopieren

Im obigen Code ist die Konstante a ein Array. Das Array selbst ist beschreibbar, aber wenn a ein anderes Array zugewiesen wird, wird ein Fehler gemeldet.

7. Wenn Sie das Objekt wirklich einfrieren möchten, sollten Sie die Methode Object.freeze verwenden.

const foo = Object.freeze({});
// 常规模式时,下面一行不起作用;
// 严格模式时,该行会报错
foo.prop = 123;
Nach dem Login kopieren

Im obigen Code zeigt die Konstante foo auf ein eingefrorenes Objekt, sodass das Hinzufügen neuer Attribute nicht funktioniert und im strikten Modus ein Fehler gemeldet wird.

8. Zusätzlich zum Einfrieren des Objekts selbst sollten auch die Eigenschaften des Objekts eingefroren werden. Unten finden Sie eine Funktion, die ein Objekt vollständig einfriert.

var constantize = (obj) => {
Object.freeze(obj);
Object.keys(obj).forEach( (key, value) => {
if ( typeof obj[key] === 'object' ) {
constantize( obj[key] );
}
});
};
Nach dem Login kopieren

ES5 bietet nur zwei Möglichkeiten, Variablen zu deklarieren: den Befehl var und den Befehl function. Neben dem Hinzufügen von let- und const-Befehlen bietet ES6 auch zwei weitere Möglichkeiten zum Deklarieren von Variablen: Importbefehl und Klassenbefehl. Daher verfügt ES6 über insgesamt 6 Möglichkeiten, Variablen zu deklarieren.

Verwandte kostenlose Lernempfehlungen: Javascript (Video)

Das obige ist der detaillierte Inhalt vonWas ist const in React?. 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 erstellen Sie eine Echtzeit-Chat-App mit React und WebSocket So erstellen Sie eine Echtzeit-Chat-App mit React und WebSocket Sep 26, 2023 pm 07:46 PM

So erstellen Sie eine Echtzeit-Chat-Anwendung mit React und WebSocket Einführung: Mit der rasanten Entwicklung des Internets hat die Echtzeitkommunikation immer mehr Aufmerksamkeit auf sich gezogen. Live-Chat-Apps sind aus dem modernen Sozial- und Arbeitsleben nicht mehr wegzudenken. In diesem Artikel wird erläutert, wie Sie mit React und WebSocket eine einfache Echtzeit-Chat-Anwendung erstellen, und es werden spezifische Codebeispiele bereitgestellt. 1. Technische Vorbereitung Bevor wir mit der Erstellung einer Echtzeit-Chat-Anwendung beginnen, müssen wir die folgenden Technologien und Tools vorbereiten: React: eine zum Erstellen

Leitfaden zur React-Front-End- und Back-End-Trennung: So erreichen Sie die Entkopplung und unabhängige Bereitstellung von Front-End und Back-End Leitfaden zur React-Front-End- und Back-End-Trennung: So erreichen Sie die Entkopplung und unabhängige Bereitstellung von Front-End und Back-End Sep 28, 2023 am 10:48 AM

React-Leitfaden zur Front-End- und Back-End-Trennung: So erreichen Sie die Front-End- und Back-End-Entkopplung und die unabhängige Bereitstellung. Es sind spezifische Codebeispiele erforderlich. In der heutigen Webentwicklungsumgebung ist die Front-End- und Back-End-Trennung zu einem Trend geworden. Durch die Trennung von Front-End- und Back-End-Code kann die Entwicklungsarbeit flexibler und effizienter gestaltet und die Zusammenarbeit im Team erleichtert werden. In diesem Artikel wird erläutert, wie Sie mithilfe von React eine Front-End- und Back-End-Trennung erreichen und so die Ziele der Entkopplung und unabhängigen Bereitstellung erreichen. Zuerst müssen wir verstehen, was Front-End- und Back-End-Trennung ist. Im traditionellen Webentwicklungsmodell sind Front-End und Back-End gekoppelt

So erstellen Sie einfache und benutzerfreundliche Webanwendungen mit React und Flask So erstellen Sie einfache und benutzerfreundliche Webanwendungen mit React und Flask Sep 27, 2023 am 11:09 AM

So erstellen Sie mit React und Flask einfache und benutzerfreundliche Webanwendungen. Einführung: Mit der Entwicklung des Internets werden die Anforderungen an Webanwendungen immer vielfältiger und komplexer. Um den Anforderungen der Benutzer an Benutzerfreundlichkeit und Leistung gerecht zu werden, wird es immer wichtiger, moderne Technologie-Stacks zum Aufbau von Netzwerkanwendungen zu verwenden. React und Flask sind zwei sehr beliebte Frameworks für die Front-End- und Back-End-Entwicklung, und sie arbeiten gut zusammen, um einfache und benutzerfreundliche Webanwendungen zu erstellen. In diesem Artikel erfahren Sie, wie Sie React und Flask nutzen

So erstellen Sie eine zuverlässige Messaging-App mit React und RabbitMQ So erstellen Sie eine zuverlässige Messaging-App mit React und RabbitMQ Sep 28, 2023 pm 08:24 PM

So erstellen Sie eine zuverlässige Messaging-Anwendung mit React und RabbitMQ Einführung: Moderne Anwendungen müssen zuverlässiges Messaging unterstützen, um Funktionen wie Echtzeitaktualisierungen und Datensynchronisierung zu erreichen. React ist eine beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, während RabbitMQ eine zuverlässige Messaging-Middleware ist. In diesem Artikel wird erläutert, wie Sie React und RabbitMQ kombinieren, um eine zuverlässige Messaging-Anwendung zu erstellen, und es werden spezifische Codebeispiele bereitgestellt. RabbitMQ-Übersicht:

React Router-Benutzerhandbuch: So implementieren Sie die Front-End-Routing-Steuerung React Router-Benutzerhandbuch: So implementieren Sie die Front-End-Routing-Steuerung Sep 29, 2023 pm 05:45 PM

ReactRouter-Benutzerhandbuch: So implementieren Sie die Front-End-Routing-Steuerung Mit der Popularität von Single-Page-Anwendungen ist das Front-End-Routing zu einem wichtigen Bestandteil geworden, der nicht ignoriert werden kann. Als beliebteste Routing-Bibliothek im React-Ökosystem bietet ReactRouter umfangreiche Funktionen und benutzerfreundliche APIs, wodurch die Implementierung des Front-End-Routings sehr einfach und flexibel ist. In diesem Artikel wird die Verwendung von ReactRouter vorgestellt und einige spezifische Codebeispiele bereitgestellt. Um ReactRouter zuerst zu installieren, benötigen wir

So erstellen Sie eine schnelle Datenanalyseanwendung mit React und Google BigQuery So erstellen Sie eine schnelle Datenanalyseanwendung mit React und Google BigQuery Sep 26, 2023 pm 06:12 PM

So verwenden Sie React und Google BigQuery zum Erstellen schneller Datenanalyseanwendungen. Einführung: Im heutigen Zeitalter der Informationsexplosion ist die Datenanalyse zu einem unverzichtbaren Bindeglied in verschiedenen Branchen geworden. Unter anderem ist die Entwicklung schneller und effizienter Datenanalyseanwendungen für viele Unternehmen und Einzelpersonen zum Ziel geworden. In diesem Artikel wird erläutert, wie Sie mit React und Google BigQuery eine schnelle Datenanalyseanwendung erstellen, und es werden detaillierte Codebeispiele bereitgestellt. 1. Übersicht React ist ein Werkzeug zum Erstellen

So erstellen Sie Echtzeit-Datenverarbeitungsanwendungen mit React und Apache Kafka So erstellen Sie Echtzeit-Datenverarbeitungsanwendungen mit React und Apache Kafka Sep 27, 2023 pm 02:25 PM

So verwenden Sie React und Apache Kafka zum Erstellen von Echtzeit-Datenverarbeitungsanwendungen. Einführung: Mit dem Aufkommen von Big Data und Echtzeit-Datenverarbeitung ist die Erstellung von Echtzeit-Datenverarbeitungsanwendungen für viele Entwickler zum Ziel geworden. Die Kombination von React, einem beliebten Front-End-Framework, und Apache Kafka, einem leistungsstarken verteilten Messaging-System, kann uns beim Aufbau von Echtzeit-Datenverarbeitungsanwendungen helfen. In diesem Artikel wird erläutert, wie Sie mit React und Apache Kafka Echtzeit-Datenverarbeitungsanwendungen erstellen

PHP, Vue und React: Wie wählt man das am besten geeignete Frontend-Framework aus? PHP, Vue und React: Wie wählt man das am besten geeignete Frontend-Framework aus? Mar 15, 2024 pm 05:48 PM

PHP, Vue und React: Wie wählt man das am besten geeignete Frontend-Framework aus? Angesichts der kontinuierlichen Weiterentwicklung der Internettechnologie spielen Front-End-Frameworks eine wichtige Rolle bei der Webentwicklung. PHP, Vue und React sind drei repräsentative Frontend-Frameworks, jedes mit seinen eigenen einzigartigen Eigenschaften und Vorteilen. Bei der Auswahl des zu verwendenden Frontend-Frameworks müssen Entwickler eine fundierte Entscheidung treffen, die auf den Projektanforderungen, Teamfähigkeiten und persönlichen Vorlieben basiert. In diesem Artikel werden die Eigenschaften und Verwendungsmöglichkeiten der drei Front-End-Frameworks PHP, Vue und React verglichen.

See all articles